Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Allow for direct click on the map to set location

Browse source
This commit is contained in:
Eli Ribble 2026-02-03 17:01:39 +00:00
parent cb3c4e8d2c
commit 82adb92d06
No known key found for this signature in database
2 changed files with 34 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

20
html/static/js/map-locator.js
View file

@ -1,4 +1,3 @@
var map = null;
// A map that can be used to locate a single point by setting its location explicitly
// or by allowing the user to move a marker.
class MapLocator extends HTMLElement {
@ -55,22 +54,33 @@ class MapLocator extends HTMLElement {
}));
map.addControl(new mapboxgl.NavigationControl());
*/
this._map.on("click", (e) => {
e.preventDefault();
console.log("internal click", e);
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
}
});
}));
});
this._map.on("zoomend", (e) => {
this.dispatchEvent(new CustomEvent("zoomend"), {
this.dispatchEvent(new CustomEvent("zoomend", {
bubbles: true,
composed: true,
detail: e,
});
}));
});
}

19
rmo/template/nuisance.html
View file

@ -10,6 +10,19 @@
<script src="/static/js/photo-upload.js"></script>
<script>
const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
async function handleMapClick(mapLocator, lngLat) {
mapLocator.SetMarker(lngLat);
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,
@ -118,6 +131,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();