Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Push an H3 cell to javascript and render it

Browse source 
A proof-of-concept.
This commit is contained in:
Eli Ribble 2025-11-13 20:01:15 +00:00
parent b6c078f04c
commit 134dcd7444
No known key found for this signature in database
6 changed files with 118 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
templates/dashboard.html
View file

@ -5,8 +5,9 @@
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<script>
const geojson = {{.Geo}};
function onLoad() {
console.log("Setting up the map...");
console.log("Setting up the map...", geojson);
mapboxgl.accessToken = {{ .MapboxToken }};
const map = new mapboxgl.Map({
container: 'map', // container ID
@ -14,7 +15,33 @@ function onLoad() {
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
console.log("done.");
map.on("load", function() {
console.log("Map post-load...");
const sourceId = 'h3-hexes';
const layerId = 'h3-hexes-layer';
let source = map.getSource(sourceId);
if (!source) {
map.addSource(sourceId, {
type: 'geojson',
data: geojson
});
map.addLayer({
id: layerId,
source: sourceId,
type: 'fill',
interactive: false,
paint: {
'fill-color': '#F00000',
'fill-opacity': 0.3
}
});
source = map.getSource(sourceId);
}
source.setData(geojson);
console.log("Map post-load done.");
});
console.log("Map init done.");
}
window.addEventListener("load", onLoad);
</script>