Eli Ribble
c0b527c9a3
This makes it much easier to troubleshoot information related to a cell by showing detailed data about a single cell. At this point much is a placeholder, but we at least get the cell boundary coordinates and a map. This also starts to make some code common around doing things like mapping.
67 lines
1.5 KiB
HTML
67 lines
1.5 KiB
HTML
{{define "map"}}
|
|
<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 = JSON.parse({{.GeoJSON}})
|
|
function onLoad() {
|
|
console.log("Setting up the map...", geojson);
|
|
mapboxgl.accessToken = {{ .MapboxToken }};
|
|
const map = new mapboxgl.Map({
|
|
container: "map",
|
|
center: [{{.Center.Lng}}, {{.Center.Lat}}],
|
|
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
|
zoom: {{.Zoom}},
|
|
});
|
|
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>
|
|
<style>
|
|
.map-container {
|
|
background-color: #e9ecef;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
height: 500px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
#map {
|
|
height: 500px;
|
|
width:100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
#map img {
|
|
max-width: none;
|
|
min-width: 0px;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
{{end}}
|