Custom Colors with Isochrone Polygons
colorsMap = {
mutable loaderColorSeries = true;
let container = DOM.element("div", {
style: `width:${width}px;height:${width / 1.6}px`
});
// allow for correct sizing by yielding the container early
yield container;
// set the targomo client
const client = tgmClient("britishisles");
// starting out with one source
const source = sourcePoints[0];
// set the map
const map = L.map(container, {
scrollWheelZoom: false,
layers: [new tgm.leaflet.TgmLeafletTileLayer(client, "Light")]
}).setView(source, 12);
// add our starting point
L.marker(source).addTo(map);
// define the polygon overlay
const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({
strokeWidth: 20,
colors: parseColors()
});
polygonOverlayLayer.addTo(map);
// get the polygons
const polygons = await client.polygons.fetch(
[source],
travelOptions.set("bike", travelTimes)
);
polygonOverlayLayer.setData(polygons);
mutable loaderColorSeries = false;
}
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.
