Published
Edited
Apr 10, 2021
Importers
map = function*(points, options, mapOptions = {}) {
const container = html`<div style="height:500px;">`;
const map = L.map(container, {
maxBounds: [[-100, -190], [100, 190]],
...mapOptions
});
yield container;
const renderer = L.canvas();
const cluster = L.featureGroup(points.map(m => marker(m, renderer))).addTo(
map
);
if (points.length > 0) map.fitBounds(cluster.getBounds());
if (options) {
map.setView(options.view, options.zoom);
}
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 19,
noWrap: true
}
).addTo(map);
container.value = map;
return container;
}
function marker(cluster, renderer) {
const lnglat = projection.invert([cluster.x, cluster.y]);
const options = {
renderer,
radius: cluster.r
};
return L.circleMarker(lnglat.reverse(), options).bindTooltip(
`items: ${cluster.n}, radius:${Math.round(cluster.r * 100) / 100}`,
{ direction: "top", offset: [0, -cluster.r] }
);
}
import { projection } from "@stardisblue/fsac-utils"
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.
