map1 = html`
<flow-map id="map1" map-style="positron" center="-4.0880463,53.0695219,13" style="height: 500px;">
<!-- Hill shade raster image tiles -->
<flow-map-layer name="hillshade" type="raster" source="hillshade">
raster-contrast: 0;
raster-fade-duration: 300;
raster-opacity: interpolate(exponential(0.8), zoom(), 3, 0, 5, 0.15, 12, 0.15);
</flow-map-layer>
<!-- Minor contour lines -->
<flow-map-layer name="contours" type="line" source="contours" source-layer="contour"
filter="@height > 0 && !in(@nth_line, literal([5, 10]))">
line-color: rgba(181, 129, 100, 1);
line-opacity: 0.5;
line-width: 0.8;
</flow-map-layer>
<!-- Major contour lines -->
<flow-map-layer name="contours-index" type="line" source="contours" source-layer="contour"
filter="@height > 0 && in(@nth_line, literal([5, 10]))">
line-color: rgba(181, 129, 100, 1);
line-opacity: interpolate(linear(), zoom(), 7, 0.2, 10, 0.6);
line-width: 1.3;
</flow-map-layer>
<!-- Major contour line labels -->
<flow-map-layer name="contours-labels" type="symbol" source="contours" source-layer="contour"
filter="@height > 0 && in(@nth_line, literal([5, 10]))">
symbol-avoid-edges: true;
symbol-placement: line;
text-allow-overlap: false;
text-field: @height;
text-ignore-placement: false;
text-padding: 10;
text-rotation-alignment: map;
text-font: ['Noto Sans Regular'];
text-size: interpolate(linear(), zoom(), 15, 9.5, 20, 12);
text-color: rgba(181, 129, 100, 1);
text-halo-blur: 1;
text-halo-color: rgba(232, 230, 223, 1);
text-halo-width: 1;
</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>
`
apiKey = 'b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7'
import {
initializeFlow,
datasetTable,
tileSourceTable,
datasetSource,
datasetAttributes
} from '@emuanalytics/flow-helper-library'
context = {
const context = await initializeFlow(apiKey, '1.1.7');
return context;
}
turf = require("@turf/turf")
html`
<style>
/* Stack zoom buttons */
.zoom-button {
display: block;
margin-bottom: 5px;
}
</style>
`
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.
