Make public report and sync share static assets

It just seems useful

htmlpage/static/js/geocode.js

@@ -0,0 +1,13 @@
+async function geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat) {
+	const url = `https://api.mapbox.com/search/geocode/v6/reverse?longitude=${lngLat.lng}&latitude=${lngLat.lat}&access_token=${MAPBOX_ACCESS_TOKEN}`
+	const response = await fetch(url);
+	const data = await response.json();
+	console.log("reverse geocoded to", data);
+	if (data.features.length == 0) {
+		console.warn("No results for reverse geocode");
+		return;
+	}
+	const match = data.features[0];
+	displaySelectedLocation(match);
+	setLocationInputs(match);
+}

htmlpage/static/js/location.js

@@ -0,0 +1,23 @@
+function getGeolocation(options) {
+	return new Promise((resolve, reject) => {
+		// Check if geolocation is supported by the browser
+		if (!navigator.geolocation) {
+			reject(new Error("Geolocation is not supported by your browser"));
+			return;
+		}
+		
+		// Default options if none provided
+		const geolocationOptions = options || {
+			enableHighAccuracy: true,
+			timeout: 5000,
+			maximumAge: 0
+		};
+		
+		// Call the geolocation API
+		navigator.geolocation.getCurrentPosition(
+			position => resolve(position),
+			error => reject(error),
+			geolocationOptions
+		);
+	});
+}

htmlpage/static/js/map.js

@@ -0,0 +1,62 @@
+var map = null;
+var markers = [];
+
+function mapAddMarker(coords) {
+	const mapContainer = document.getElementById("map-container");
+	const marker = new mapboxgl.Marker({
+		color: "#FF0000",
+		draggable: true
+	}).setLngLat(coords).addTo(map);
+	marker.on('dragend', function(e) {
+		const markerDraggedEvent = new CustomEvent("markerdragend", {
+			detail: {
+				marker: marker
+			}
+		});
+		mapContainer.dispatchEvent(markerDraggedEvent);
+	});
+	markers.push(marker);
+}
+
+function mapLoad(MAPBOX_ACCESS_TOKEN) {
+	return new Promise((resolve, reject) => {
+		console.log("Setting up the map...");
+		mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
+		map = new mapboxgl.Map({
+			container: "map",
+			center: {
+				lat: 36.2,
+				lng: -119.2
+			},
+			style: 'mapbox://styles/mapbox/streets-v12', // style URL
+			zoom: 15,
+		});
+		map.addControl(new mapboxgl.GeolocateControl({
+			positionOptions: {
+				enableHighAccuracy: true
+			},
+			trackUserLocation: true,
+			showUserHeading: true
+		}));
+		map.addControl(new mapboxgl.NavigationControl());
+		map.on("load", function() {
+			console.log("Map loaded.");
+			resolve(map);
+		});
+	});
+}
+
+function mapJumpTo(args) {
+	map.jumpTo(args);
+}
+
+function mapSetMarker(coords) {
+	console.log("Setting map marker", coords);
+	map.jumpTo({
+		center: coords,
+		zoom: 14,
+	});
+	markers.forEach((marker) => marker.remove());
+	mapAddMarker(coords);
+}
+