// Update Hexagon & Text layer for the current view
function updateLayer() {
const [hexFeatures, pointFeatures] = getFeatures(map.getBounds());
map.getSource("geojson").setData(hexFeatures);
map.getSource("label").setData(pointFeatures);
}
map.on("moveend", updateLayer);
d3.select("#resolution-slider").on("change", updateLayer);
function getFeatures(bbox) {
const bboxFeature = ({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[bbox._sw.lng, bbox._sw.lat],
[bbox._sw.lng, bbox._ne.lat],
[bbox._ne.lng, bbox._ne.lat],
[bbox._ne.lng, bbox._sw.lat],
[bbox._sw.lng, bbox._sw.lat]
]]
}
});
const hexagons = geojson2h3.featureToH3Set(bboxFeature, resolution);
const hexPolygon = geojson2h3.h3SetToMultiPolygonFeature(hexagons);
const points = {
"type": "FeatureCollection",
"features": hexagons.map(hex => (
{
"type": "Feature",
"properties": {
"hex": hex
},
"geometry": {
"type": "Point",
"coordinates": h3.h3ToGeo(hex).reverse()
}
}
))
}
return [hexPolygon, points];
}
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.
