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