Update water page to allow direct clicks

This commit is contained in:
Eli Ribble 2026-02-03 17:25:14 +00:00
parent 8bed4fa2fa
commit 8d96055ba1
No known key found for this signature in database

View file

@ -10,6 +10,20 @@
<script src="/static/js/photo-upload.js"></script>
<script>
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
async function handleMapClick(mapLocator, lngLat) {
mapLocator.SetMarker(lngLat);
mapLocator.PanTo(lngLat, {duration: 2000});
const response = await geocodeReverse(MAPBOX_ACCESS_TOKEN, {
lat: lngLat.lat,
lng: lngLat.lng,
});
console.log("click reverse geocode", response);
if (response !== undefined && response.features.length > 0) {
const addressInput = document.querySelector("address-input");
addressInput.SetValue(response.features[0]);
setLocationInputs(response.features[0]);
}
}
async function handleMarkerDrag(lngLat) {
const response = await geocodeReverse(MAPBOX_ACCESS_TOKEN, {
lat: lngLat.lat,
@ -100,10 +114,12 @@ document.addEventListener('DOMContentLoaded', function() {
},
zoom: 14,
});
mapLocator.SetMarker([
const coords = [
position.coords.longitude,
position.coords.latitude,
]);
];
mapLocator.SetMarker(coords);
mapLocator.JumpTo({center: coords, zoom: 14});
handleMarkerDrag({
lat: position.coords.latitude,
lng: position.coords.longitude,
@ -116,6 +132,12 @@ document.addEventListener('DOMContentLoaded', function() {
mapLocator.addEventListener("zoomend", function(e) {
mapZoom.value = e.target.GetZoom();
});
mapLocator.addEventListener("click", (e) => {
// We get some events without the lngLat
if (e.detail !== undefined && e.detail.lngLat !== undefined) {
handleMapClick(mapLocator, e.detail.lngLat);
}
});
mapLocator.addEventListener("markerdragend", (e) => {
const marker = event.detail.marker;
const lngLat = marker.getLngLat();