// Demo App API key
apiKey = 'b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7'
map1 = html`
<style>
.zoom-button {
display: block;
margin-bottom: 5px;
}
</style>
<flow-map id="map1" map-style="osm-bright" center="-0.1,51.5,12.5" style="height: 500px;">
<!-- Buildings - API key is set to access uk_buildings dataset from Shared Resources app -->
<flow-map-data-source name="buildings" type="vector" src="uk_buildings" api-key="6f19c5c7-1a9b-425b-84ab-09ba56e905b2">
</flow-map-data-source>
<flow-map-layer name="uk_buildings" above="buildings" type="fill-extrusion" source="buildings" source-layer="buildings">
fill-extrusion-color: #bbb;
fill-extrusion-height: @max;
</flow-map-layer>
<!-- Map Controls -->
<div slot="top-left">
<flow-fab class="zoom-button" compact square icon="fas-plus" onclick="map1.zoomBy(1);"></flow-fab>
<flow-fab class="zoom-button" compact square icon="fas-minus" onclick="map1.zoomBy(-1);"></flow-fab>
</div>
</flow-map>
`
// Set initial map pitch
context.maps.getMap('map1').then(map => map.mapboxMap.setPitch(60))
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
