Some blurb.
<style> /* Stack zoom buttons */ .zoom-button { display: block; margin-bottom: 5px; } </style> <html> <!-- Flow Map --> <flow-map id="map1" map-style="osm-bright" center="-0.2,51.5,10" style="height: 450px;"> <!-- Airquality Data Source --> <flow-map-data-source name="no2" type="geojson" src="airquality"> </flow-map-data-source> <!-- Circle Layer --> <flow-map-layer id="circles" name="circles" type="circle" source="no2"> circle-color: @no2 ? from-palette('OrRd', @no2, 0, 100) : gray; circle-radius: @no2 ? @no2 / 5 : 5; </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> </html>
← Debugging Client-Side Geospatial Functions →
