Switch cell detail page to libremap rendering

html/template/sync/component/map.html

@@ -1,87 +0,0 @@
-{{ define "sync/component/map.html" }}
-	<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 }}