gridVertexes = {
const vertexes = new Set();
for (const cell of hexagons) {
const boundary = h3.cellToBoundary(cell);
for (const latLng of boundary) {
vertexes.add(latLng.join(','));
}
}
return vertexes;
}
vertexModeVertexes = {
const vertexes = new Set();
for (const cell of hexagons) {
const cellVerts = h3.cellToVertexes(cell);
for (const vertex of cellVerts) {
const latLng = h3.vertexToLatLng(vertex);
vertexes.add(latLng.join(','));
}
}
return vertexes;
}
mismatched = {
const simplify = (latlng) => latlng.split(',').map(Number).map(n => n.toFixed(12)).join(',');
const verts = [...gridVertexes];
const simpleVerts = verts.map(simplify);
const pairs = verts.map((v1, i) => {
for (let j = 0; j < verts.length; j++) {
const v2 = verts[j];
if (v1 !== v2 && simpleVerts[i] === simpleVerts[j]) {
return [v1, v2];
}
}
return null;
}).filter(Boolean);
return pairs;
}
config = ({
lat: 20,
lng: -100,
zoom: 1,
});
{
renderH3IndexesToMap(map, 'hexes', hexagons);
renderMapLayer({map, id: 'vertex-mode', data: vertexModeGeoJson, type: 'fill', paint: {'fill-color': 'blue', 'fill-opacity': 0.4}});
return md`*{map rendering logic}*`
}
hexagons = {
const center = h3.latLngToCell(config.lat, config.lng, 0);
return h3.gridDisk(center, 1);
}
vertexModeGeoJson = {
return {
type: 'Feature',
geometry: {
type: 'MultiPolygon',
coordinates: hexagons.map(cell => {
const vertexes = [];
const cellVerts = h3.cellToVertexes(cell);
for (const vertex of cellVerts) {
const [lat, lng] = h3.vertexToLatLng(vertex);
vertexes.push([lng, lat]);
}
return [vertexes];
})
}
}
}
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.
