map.on("load", () => {
// Add initial data for hexagons & points
const [hexFeatures, pointFeatures] = getFeatures(map.getBounds());
map.addSource("geojson", {
type: "geojson",
data: hexFeatures
});
map.addSource("label", {
type: "geojson",
data: pointFeatures
});
// Add hexagon layer (outline of h3 hexagon)
map.addLayer({
"id": "geojsonLayer",
"type": "line",
"source": "geojson",
"layout": {},
"paint": {
"line-width": 1,
"line-color": "#00a0ff",
"line-opacity": 0.8
}
});
// Add text label layer (text of h3 index)
map.addLayer({
"id": "points",
"type": "symbol",
"source": "label",
"layout": {
"text-field": "{hex}",
"text-size": 12,
"text-anchor": "center"
},
"paint": {
"text-color": "#00a0ff"
}
});
});
// 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 hexagons = ['608293930559078399',
'608293930626187263',
'608296719737683967',
'608296719804792831',
'608296727958519807',
'603790331166588927',
'603793126250774527',
'603793128129822719',
'603793125713903615',
'599289533200072703'];
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.
