config = ({
lat: 60,
lng: 60,
zoom: 0,
});
{
renderMapLayer({map, id: 'poly', data: polarPolygon, type: 'line', paint: {'line-color': 'blue'}});
renderH3IndexesToMap(map, 'hexes', badHexagons);
renderH3IndexesToMap(map, 'hexes', goodHexagons, {'fill-color': 'green'});
return md`*{map rendering logic}*`
}
// Use an H3 base cell as an example polygon
polarPolygon = ({
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [h3.h3ToGeoBoundary('8100fffffffffff', true)]
}
})
goodHexagons = {
const coords = polarPolygon.geometry.coordinates[0];
const hexagons = [];
for (let i = 0; i < coords.length - 1; i++) {
const triangle = [coords[i], coords[i + 1], [0, 89.999]];
hexagons.push(...h3.polyfill(triangle, 2, {geojson: true}));
}
return hexagons;
}
badHexagons = {
// This doesn't work with a polar polygon
return h3.polyfill(polarPolygon.geometry.coordinates, 2, {geojson: true});
}
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.
