Move standing woter to use libremap instead of mapbox

html/static/js/map-cell.js

@@ -1,4 +1,3 @@
-var map = null;
 // A map for showing a single h3 cell
 class MapCell extends HTMLElement {
 	constructor() {

html/static/js/map-locator.js

@@ -29,66 +29,71 @@ class MapLocator extends HTMLElement {
 	_initializeMap() {
 		console.log("Setting up the map...");
 		const apiKey = this.getAttribute("api-key");
-		const lat = Number(this.getAttribute('latitude') || 36.2);
-		const lng = Number(this.getAttribute('longitude') || -119.2);
-		const zoom = Number(this.getAttribute('zoom') || 15);
+		const lat = Number(this.getAttribute("latitude") || 36.2);
+		const lng = Number(this.getAttribute("longitude") || -119.2);
+		const zoom = Number(this.getAttribute("zoom") || 15);
 
-		mapboxgl.accessToken = apiKey;
 		const mapElement = this.shadowRoot.querySelector("#map");
-		this._map = new mapboxgl.Map({
+		this._map = new maplibregl.Map({
 			container: mapElement,
 			center: {
 				lat: lat,
 				lng: lng,
 			},
-			style: 'mapbox://styles/mapbox/streets-v12', // style URL
+			style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json",
 			zoom: zoom,
 		});
 		/*
-		map.addControl(new mapboxgl.GeolocateControl({
+		map.addControl(new maplibregl.GeolocateControl({
 			positionOptions: {
 				enableHighAccuracy: true
 			},
 			trackUserLocation: true,
 			showUserHeading: true
 		}));
-		map.addControl(new mapboxgl.NavigationControl());
+		map.addControl(new maplibregl.NavigationControl());
 		*/
 		this._map.on("click", (e) => {
 			e.preventDefault();
 			console.log("internal click", e);
-			this.dispatchEvent(new CustomEvent("click", {
+			this.dispatchEvent(
+				new CustomEvent("click", {
 					bubbles: true,
 					composed: true, // Allows event to cross shadow DOM boundary
 					detail: {
 						lngLat: e.lngLat,
 					},
-			}));
+				}),
+			);
 		});
 		this._map.on("load", () => {
 			console.log("map loaded");
-			this.dispatchEvent(new CustomEvent("load", {
+			this.dispatchEvent(
+				new CustomEvent("load", {
 					bubbles: true,
 					composed: true, // Allows event to cross shadow DOM boundary
 					detail: {
-					map: this
-				}
-			}));
+						map: this,
+					},
+				}),
+			);
 		});
 		this._map.on("zoomend", (e) => {
-			this.dispatchEvent(new CustomEvent("zoomend", {
+			this.dispatchEvent(
+				new CustomEvent("zoomend", {
 					bubbles: true,
 					composed: true,
 					detail: e,
-			}));
+				}),
+			);
 		});
 	}
 
 	// Initial render of component
 	render() {
 		this.shadowRoot.innerHTML = `
-			<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
 			<style>
+				@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
 				.map-container {
 					background-color: #e9ecef;
 					border-radius: 10px;
@@ -133,15 +138,17 @@ class MapLocator extends HTMLElement {
 		console.log("Setting map marker", coords);
 		this._markers.forEach((marker) => marker.remove());
 
-		const marker = new mapboxgl.Marker({
+		const marker = new maplibregl.Marker({
 			color: "#FF0000",
-			draggable: true
-		}).setLngLat(coords).addTo(this._map);
-		marker.on('dragend', (e) => {
+			draggable: true,
+		})
+			.setLngLat(coords)
+			.addTo(this._map);
+		marker.on("dragend", (e) => {
 			const markerDraggedEvent = new CustomEvent("markerdragend", {
 				detail: {
-					marker: marker
-				}
+					marker: marker,
+				},
 			});
 			this.dispatchEvent(markerDraggedEvent);
 		});
@@ -149,4 +156,4 @@ class MapLocator extends HTMLElement {
 	}
 }
 
-customElements.define('map-locator', MapLocator);
+customElements.define("map-locator", MapLocator);

html/template/rmo/mailer/root.html

@@ -2,6 +2,11 @@
 
 {{ define "title" }}Report Standing Water{{ end }}
 {{ define "extraheader" }}
+	<script
+		type="text/javascript"
+		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
+	></script>
+	<script src="/static/js/map-locator.js"></script>
 	<style>
 		body {
 			background-color: #f8f9fa;
@@ -117,7 +122,11 @@
 			<!-- Address Information -->
 			<div class="address-container">
 				<div class="mb-2"><strong>Detected Address:</strong></div>
-				<h5>123 Maple Street, Riverside, CA 92501</h5>
+				<h5>
+					{{ .C.Address.Number }} {{ .C.Address.Street }},
+					{{ .C.Address.Locality }}, {{ .C.Address.Region }}
+					{{ .C.Address.PostalCode }}
+				</h5>
 			</div>
 
 			<div class="mb-4">

html/template/rmo/water.html

@@ -2,7 +2,10 @@
 
 {{ define "title" }}Report Standing Water{{ end }}
 {{ define "extraheader" }}
-	<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js"></script>
+	<script
+		type="text/javascript"
+		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
+	></script>
 	<script src="/static/js/address-suggestion.js"></script>
 	<script src="/static/js/geocode.js"></script>
 	<script src="/static/js/location.js"></script>