Update water page to allow direct clicks
This commit is contained in:
parent
8bed4fa2fa
commit
8d96055ba1
1 changed files with 24 additions and 2 deletions
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue