map.on("load", () => {
// Add initial data for hexagons & points
console.log("load");
let resolution = 4;
const [hexFeatures, pointFeatures] = getFeatures(map.getBounds(), resolution);
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"
}
});
// Setup our event listeners to update our map.
(() => {
map.on("moveend", () => updateLayer(resolution));
d3.select("#resolution-slider").on("change", () => {
resolution = parseInt(d3.select("#resolution-slider").property("value"));
updateLayer(resolution);
});
})()
});
// Update Hexagon & Text layer for the current view
function updateLayer(resolution) {
console.log(`Update layer (${resolution})`)
const [hexFeatures, pointFeatures] = getFeatures(map.getBounds(), resolution);
map.getSource("geojson").setData(hexFeatures);
map.getSource("label").setData(pointFeatures);
}
function getFeatures(bbox, resolution) {
console.log(`Getting features (${resolution})...`);
// bbox is only _ne and _sw, add this for convenience
bbox._nw = { lat: bbox._ne.lat, lng: bbox._sw.lng };
bbox._se = { lat: bbox._sw.lat, lng: bbox._ne.lng };
const fuzzLng = (bbox._se.lng - bbox._sw.lng) * 0.1
const fuzzLat = (bbox._se.lat - bbox._ne.lat) * 0.1
const bboxFeature = ({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[bbox._sw.lng - fuzzLng, bbox._sw.lat + fuzzLat],
[bbox._nw.lng - fuzzLng, bbox._nw.lat - fuzzLat],
[bbox._ne.lng + fuzzLng, bbox._ne.lat - fuzzLat],
[bbox._se.lng + fuzzLng, bbox._se.lat + fuzzLat],
[bbox._sw.lng - fuzzLng, bbox._sw.lat + fuzzLat]
]]
}
});
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()
}
}
))
}
console.log("Done Getting features.");
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.
