{{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}}