Switch cell detail page to libremap rendering

html/template/sync/cell.html

@@ -2,21 +2,11 @@
 
 {{ define "title" }}Dash{{ end }}
 {{ define "extraheader" }}
-	{{ template "map" .MapData }}
-	<style>
-		.address-container {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-		}
-
-		.section-header {
-			margin-top: 30px;
-			margin-bottom: 15px;
-			padding-bottom: 10px;
-			border-bottom: 1px solid #dee2e6;
-		}
-	</style>
+	<script
+		type="text/javascript"
+		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
+	></script>
+	<script src="/static/js/map-cell.js"></script>
 {{ end }}
 {{ define "content" }}
 	<div class="container mt-4 mb-5">
@@ -30,9 +20,14 @@
 		<!-- Map and Address Section - Side by Side -->
 		<div class="row mb-4">
 			<div class="col-md-8">
-				<div class="map-container">
-					<div id="map"></div>
-				</div>
+				<map-cell
+					geojson="{{ .MapData.GeoJSON|json }}"
+					latitude="{{ .MapData.Center.Lat }}"
+					longitude="{{ .MapData.Center.Lng }}"
+					organization-id="{{ .User.Organization.ID }}"
+					tegola="{{ .URL.Tegola }}"
+					zoom="{{ .MapData.Zoom }}"
+				/>
 			</div>
 			<div class="col-md-4">
 				<div class="card h-100">

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

html/template/sync/dashboard.html

@@ -7,7 +7,6 @@
 		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
 	></script>
 	<script src="/static/js/map-aggregate.js"></script>
-	<style></style>
 	<script>
 		function onLoad() {
 			const map = document.querySelector("map-aggregate");
@@ -144,7 +143,6 @@
 	<div class="row">
 		<div class="col-12">
 			<map-aggregate
-				api-key="{{ .MapData.MapboxToken }}"
 				latitude="36.3"
 				longitude="-119.2"
 				organization-id="{{ .User.Organization.ID }}"