Public
Edited
Dec 7, 2023
2 forks
2 stars
meta = fetch(
`https://api.targomo.com/statistics/collection/meta/79?key=${targomoKey()}`
).then((response) => response.json())
colorDef = {
const breakpoints = statistic.breakpoints
.sort((a, b) => b.min_zoom - a.min_zoom)
.find((d) => zoom > d.min_zoom)[color_dist].c7;
return [
"interpolate",
["linear"],
["get", `${statistic.statistic_id}`],
...breakpoints
.map((b, i) => {
return [b, color_scale.scale(breakpoints.length)[i]];
})
.flat()
];
}
{
// if the layer is already present, remove it and its source
if (map.getLayer(`statistics`)) {
map.removeLayer(`statistics`);
map.removeSource(`statistics`);
}
map.addLayer(
{
id: `statistics`,
type: "fill",
source: {
type: "vector",
tiles: [
`https://api.targomo.com/statistics/collections/tiles/79/{z}/{x}/{y}.mvt?columns=${
statistic.statistic_id
}&apiKey=${targomoKey()}&serviceUrl=https://api.targomo.com/westcentraleurope`
]
},
"source-layer": "statistics", // the layer name is always "statistics" for tiled MVTs
layout: {},
paint: {
"fill-opacity": 0.55,
"fill-color": "rgba(255,255,255,0)", // we'll be updating on zoom, so can set to transparent to begin
"fill-outline-color": "rgba(255,255,255,0)"
}
},
"place_other"
);
// set a new trigger value so layer can be updated with breakpoints
mutable styletrigger = new Date();
return md`_update tile mvt url if statistic is changed_`;
}
{
styletrigger;
if (map.getLayer(`statistics`)) {
map.setPaintProperty("statistics", "fill-color", colorDef);
}
return md`_update breakpoints based on zoom and selected statistic_`;
}
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.
