Eli Ribble
bacd452346
This is a significant overhaul to make it possible to serve totally different templates with different components for the different sites.
84 lines
1.8 KiB
HTML
84 lines
1.8 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 addMarkers(map, markers) {
|
|
for (let i = 0; i < markers.length; i++) {
|
|
let marker = markers[i];
|
|
marker.addTo(map);
|
|
}
|
|
}
|
|
function mapMarkers() {
|
|
const markers = [
|
|
{{ range .Markers }}
|
|
new mapboxgl.Marker().setLngLat([{{.LatLng.Lng}}, {{.LatLng.Lat}}])
|
|
{{end}}
|
|
];
|
|
return markers;
|
|
}
|
|
|
|
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...");
|
|
addMarkers(map, mapMarkers());
|
|
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}}
|