From ed3d7122f19b680bd13f63ffca6980b498e396c6 Mon Sep 17 00:00:00 2001 From: MuchQuak Date: Thu, 6 Jun 2024 12:56:45 -0700 Subject: [PATCH 1/5] pointaid only autoselects tool if point not present and click to edit is now possible with leaflet draw --- collections/tools/mappointaid.php | 66 +++++++++++++++++++++++-------- 1 file changed, 50 insertions(+), 16 deletions(-) diff --git a/collections/tools/mappointaid.php b/collections/tools/mappointaid.php index 04749095dc..d540fffd4f 100644 --- a/collections/tools/mappointaid.php +++ b/collections/tools/mappointaid.php @@ -64,7 +64,12 @@ function setLatLngForm(lat, lng) { document.getElementById("lngbox").value = parseFloat(lng).toFixed(5); } - //Function For refreshing markers based upon user input + function clearForm() { + document.getElementById("latbox").value = ""; + document.getElementById("lngbox").value = ""; + document.getElementById("errRadius").value = ""; + } + //Function For Submission function SubmitCoordinates(lat, lng) { opener.document.getElementById("decimallatitude").value = lat; @@ -112,34 +117,63 @@ function leafletInit() { map.mapLayer.addControl(drawControl); const markerControl = document.querySelector(".leaflet-draw-draw-marker"); - if(markerControl) markerControl.click(); let marker; + let deleteOn = false; + map.mapLayer.on(L.Draw.Event.DELETESTART, () => deleteOn = true) + map.mapLayer.on(L.Draw.Event.DELETESTOP, () => deleteOn = false) + function createMarker(lat, lng) { drawnItems.clearLayers(); if(marker) map.mapLayer.removeLayer(marker); latlng = [lat,lng]; + setLatLngForm(lat, lng); + function handleModeClick() { + if(deleteOn) { + //Ensures marker is removed + map.mapLayer.removeLayer(marker); + } else { + try { + //Very Jank and all the other ways current are also Jank + drawControl._toolbars.edit._modes.edit.handler.enable() + } catch(e) { + console.log("Failed to enable edit") + } + } + } + marker = L.marker([lat, lng]) + .on('click', handleModeClick) + + map.mapLayer.on('draw:deleted', e => { + clearForm() + }) if(errRadius && errRadius > 0) { - marker.addTo(map.mapLayer); const circ = L.circle([lat, lng], errRadius) .on('drag', e=> { const pos = e.target.getLatLng() - setLatLngForm(pos.lat, pos.lng); - - map.mapLayer.removeLayer(marker) - marker = L.marker([pos.lat, pos.lng]) - .addTo(map.mapLayer) + marker.setLatLng(pos); }) + .on('click', handleModeClick) .setStyle(map.DEFAULT_SHAPE_OPTIONS) .addTo(drawnItems); + marker.on('drag', e => { + const pos = e.target.getLatLng() + setLatLngForm(pos.lat, pos.lng); + circ.setLatLng(pos); + //Jank way of reseting the edit handle + circ.editing.disable(); + circ.editing.enable(); + }).addTo(drawnItems); + + map.mapLayer.fitBounds(circ.getBounds()); map.mapLayer.on('draw:deleted', e => { @@ -163,10 +197,11 @@ function createMarker(lat, lng) { map.mapLayer.on('draw:editstop', e => { map.mapLayer.removeLayer(marker); marker = L.marker([latlng[0], latlng[1]]) - .addTo(map.mapLayer) + .addTo(drawnItems) }) } else { + marker.on('drag', e => { const pos = e.target.getLatLng(); setLatLngForm(pos.lat, pos.lng); @@ -180,6 +215,7 @@ function createMarker(lat, lng) { latlng = getLatLng(); }) + marker.addTo(drawnItems); map.mapLayer.setView(latlng, map.mapLayer.getZoom()); @@ -203,15 +239,13 @@ function createMarker(lat, lng) { createMarker(lat, lng) } - - if(markerControl) { - setTimeout(() => markerControl.click(), 50); - } }) //Draw marker if one exists if(latlng) { createMarker(latlng[0], latlng[1]); + } else if(markerControl) { + markerControl.click(); } } @@ -262,7 +296,7 @@ function createMarker(lat, lng) { function drawError() { if(!marker || isNaN(errRadius) || errRadius <= 0) return; - if(errCircle) errCircle.setMap(); + if(errCircle) errCircle.setMap(); errCircle = new google.maps.Circle({ center: new google.maps.LatLng(latlng[0], latlng[1]), @@ -330,9 +364,9 @@ function initialize() { } leafletInit(); - + googleInit(); - + } function updateParentForm(f) { From 7219c1ed2143401277543fd456f045036dde58b9 Mon Sep 17 00:00:00 2001 From: MuchQuak Date: Thu, 6 Jun 2024 13:55:19 -0700 Subject: [PATCH 2/5] fixes deletion problem with marker and circle present. Also fixes drag not being possible when click editing --- collections/tools/mappointaid.php | 127 +++++++++++++++--------------- 1 file changed, 64 insertions(+), 63 deletions(-) diff --git a/collections/tools/mappointaid.php b/collections/tools/mappointaid.php index d540fffd4f..d5dc401792 100644 --- a/collections/tools/mappointaid.php +++ b/collections/tools/mappointaid.php @@ -126,102 +126,103 @@ function leafletInit() { function createMarker(lat, lng) { drawnItems.clearLayers(); - if(marker) map.mapLayer.removeLayer(marker); latlng = [lat,lng]; setLatLngForm(lat, lng); + let circ = errRadius && errRadius > 0? + L.circle(latlng, errRadius): + false; + let marker = L.marker(latlng); + function handleModeClick() { - if(deleteOn) { + if(deleteOn && circ) { //Ensures marker is removed - map.mapLayer.removeLayer(marker); - } else { - try { - //Very Jank and all the other ways current are also Jank - drawControl._toolbars.edit._modes.edit.handler.enable() - } catch(e) { - console.log("Failed to enable edit") + drawnItems.removeLayer(marker); + if(circ) { + drawnItems.removeLayer(circ); } + } else { + } + } + + function enableEdit() { + try { + //Very Jank and all the other ways current are also Jank + drawControl._toolbars.edit._modes.edit.button.click() + } catch(e) { + console.log("Failed to enable edit") } } - marker = L.marker([lat, lng]) - .on('click', handleModeClick) + function handleMarkerClick() { + if(deleteOn && circ) drawnItems.removeLayer(circ); + else enableEdit(); + } + + function handleCircleClick() { + if(deleteOn) drawnItems.removeLayer(marker); + else enableEdit(); + } - map.mapLayer.on('draw:deleted', e => { - clearForm() - }) + marker + .on('click', handleMarkerClick) + .on('drag', e => { + const pos = e.target.getLatLng(); + setLatLngForm(pos.lat, pos.lng); - if(errRadius && errRadius > 0) { - const circ = L.circle([lat, lng], errRadius) + if(circ) { + circ.setLatLng(pos); + //Jank way of reseting the edit handle + circ.editing.disable(); + circ.editing.enable(); + } + }) + .addTo(drawnItems) + if(circ) { + circ .on('drag', e=> { const pos = e.target.getLatLng() setLatLngForm(pos.lat, pos.lng); marker.setLatLng(pos); }) - .on('click', handleModeClick) + .on('click', handleCircleClick) .setStyle(map.DEFAULT_SHAPE_OPTIONS) .addTo(drawnItems); - marker.on('drag', e => { - const pos = e.target.getLatLng() - setLatLngForm(pos.lat, pos.lng); - circ.setLatLng(pos); - //Jank way of reseting the edit handle - circ.editing.disable(); - circ.editing.enable(); - }).addTo(drawnItems); - + map.mapLayer.on('draw:editresize', e => { + document.getElementById("errRadius").value = e.layer._mRadius.toFixed(5); + }) map.mapLayer.fitBounds(circ.getBounds()); + } else { + map.mapLayer.setView(latlng, map.mapLayer.getZoom()); + } - map.mapLayer.on('draw:deleted', e => { - map.mapLayer.removeLayer(marker); + map.mapLayer + .on('draw:deleted', e => { + clearForm(); }) - - map.mapLayer.on('draw:editresize', e => { - document.getElementById("errRadius").value = e.layer._mRadius.toFixed(5); + .on('draw:deletestop', e => { + const hasCircle = circ && drawnItems.hasLayer(circ); + const hasMarker = drawnItems.hasLayer(marker); + //Add Back marker or Circle if change Reverted and were present + if(hasCircle && !hasMarker) { + drawnItems.addLayer(marker); + } else if(hasMarker && circ && !hasCircle) { + drawnItems.addLayer(circ); + } }) - - map.mapLayer.on('draw:edited', function(e) { + .on('draw:edited', function(e) { latlng = getLatLng(); errRadius = parseFloat(document.getElementById("errRadius").value); }) - - map.mapLayer.on('draw:editstop', e => { + .on('draw:editstop', e => { setLatLngForm(latlng[0], latlng[1]); document.getElementById("errRadius").value = errRadius; }) - - map.mapLayer.on('draw:editstop', e => { - map.mapLayer.removeLayer(marker); - marker = L.marker([latlng[0], latlng[1]]) - .addTo(drawnItems) - }) - - } else { - - marker.on('drag', e => { - const pos = e.target.getLatLng(); - setLatLngForm(pos.lat, pos.lng); - }) - - map.mapLayer.on('draw:editstop', e => { - setLatLngForm(latlng[0], latlng[1]); - }) - - map.mapLayer.on('draw:edited', function(e) { - latlng = getLatLng(); - }) - - - marker.addTo(drawnItems); - - map.mapLayer.setView(latlng, map.mapLayer.getZoom()); - } } - onFormChange = (event) => { errRadius = parseFloat(event.target.value); const pos = getLatLng(); From 2a5928578aaa49e1e3e443a144a76196ce60f115 Mon Sep 17 00:00:00 2001 From: MuchQuak Date: Thu, 6 Jun 2024 13:56:13 -0700 Subject: [PATCH 3/5] change checklist point aid to just use collection point aid to reduce duplicated effort --- checklists/checklistadminmeta.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/checklists/checklistadminmeta.php b/checklists/checklistadminmeta.php index 6685fd39df..818cfffe0a 100644 --- a/checklists/checklistadminmeta.php +++ b/checklists/checklistadminmeta.php @@ -110,13 +110,13 @@ function setExclusionChecklistMode(f){ } function openMappingAid() { - mapWindow=open("/checklists/tools/mappointaid.php?clid=&formname=editclmatadata&latname=latcentroid&longname=longcentroid","mapaid","resizable=0,width=1000,height=800,left=20,top=20"); + mapWindow=open("/collections/tools/mappointaid.php?clid=&formname=editclmatadata&latname=latcentroid&longname=longcentroid","mapaid","resizable=0,width=1000,height=800,left=20,top=20"); if(mapWindow.opener == null) mapWindow.opener = self; } function openMappingPolyAid() { - var latDec = document.getElementById("latdec").value; - var lngDec = document.getElementById("lngdec").value; + var latDec = document.getElementById("decimallatitude").value; + var lngDec = document.getElementById("decimallongtitude").value; mapWindow=open("/checklists/tools/mappolyaid.php?clid=&formname=editclmatadata&latname=latcentroid&longname=longcentroid&latdef="+latDec+"&lngdef="+lngDec,"mapaid","resizable=0,width=1000,height=800,left=20,top=20"); if(mapWindow.opener == null) mapWindow.opener = self; } @@ -238,18 +238,18 @@ function enableDisableExtServiceFields() {

- " /> + " />

- " /> + " />

- " /> + " />
From c1b2964628a015cd59de77559e33cae3c808cfb3 Mon Sep 17 00:00:00 2001 From: MuchQuak Date: Thu, 6 Jun 2024 14:42:51 -0700 Subject: [PATCH 4/5] fixed problem that occured while in edit mode and changing the error radius --- collections/tools/mappointaid.php | 76 ++++++++++++++++++++----------- 1 file changed, 50 insertions(+), 26 deletions(-) diff --git a/collections/tools/mappointaid.php b/collections/tools/mappointaid.php index d5dc401792..adbe2a4a67 100644 --- a/collections/tools/mappointaid.php +++ b/collections/tools/mappointaid.php @@ -119,33 +119,28 @@ function leafletInit() { const markerControl = document.querySelector(".leaflet-draw-draw-marker"); let marker; + let circ; let deleteOn = false; map.mapLayer.on(L.Draw.Event.DELETESTART, () => deleteOn = true) map.mapLayer.on(L.Draw.Event.DELETESTOP, () => deleteOn = false) + let editOn = false; + map.mapLayer.on(L.Draw.Event.EDITSTART, () => editOn = true) + map.mapLayer.on(L.Draw.Event.EDITSTOP, () => editOn = false) + function createMarker(lat, lng) { drawnItems.clearLayers(); + errRadius = parseFloat(document.getElementById("errRadius").value); latlng = [lat,lng]; setLatLngForm(lat, lng); - let circ = errRadius && errRadius > 0? + circ = errRadius && errRadius > 0? L.circle(latlng, errRadius): false; - let marker = L.marker(latlng); - - function handleModeClick() { - if(deleteOn && circ) { - //Ensures marker is removed - drawnItems.removeLayer(marker); - if(circ) { - drawnItems.removeLayer(circ); - } - } else { - } - } + marker = L.marker(latlng); function enableEdit() { try { @@ -166,6 +161,18 @@ function handleCircleClick() { else enableEdit(); } + function addCircleEvents(circle) { + circle + .on('drag', e=> { + const pos = e.target.getLatLng() + setLatLngForm(pos.lat, pos.lng); + marker.setLatLng(pos); + }) + .on('click', handleCircleClick) + .setStyle(map.DEFAULT_SHAPE_OPTIONS) + .addTo(drawnItems); + } + marker .on('click', handleMarkerClick) .on('drag', e => { @@ -181,15 +188,7 @@ function handleCircleClick() { }) .addTo(drawnItems) if(circ) { - circ - .on('drag', e=> { - const pos = e.target.getLatLng() - setLatLngForm(pos.lat, pos.lng); - marker.setLatLng(pos); - }) - .on('click', handleCircleClick) - .setStyle(map.DEFAULT_SHAPE_OPTIONS) - .addTo(drawnItems); + addCircleEvents(circ); map.mapLayer.on('draw:editresize', e => { document.getElementById("errRadius").value = e.layer._mRadius.toFixed(5); @@ -202,6 +201,7 @@ function handleCircleClick() { map.mapLayer .on('draw:deleted', e => { + errRadius = 0; clearForm(); }) .on('draw:deletestop', e => { @@ -222,13 +222,37 @@ function handleCircleClick() { setLatLngForm(latlng[0], latlng[1]); document.getElementById("errRadius").value = errRadius; }) + if(radiusInput) { + radiusInput.addEventListener("change", event => { + const radius = parseFloat(event.target.value); + if(circ) { + circ.setRadius(radius); + if(editOn) { + circ.editing.disable(); + circ.editing.enable(); + } + } else if(radius) { + if(!editOn) errRadius = radius; + circ = L.circle(latlng, radius); + addCircleEvents(circ); + } + console.log(radius) + + map.mapLayer.fitBounds(circ.getBounds()) + }); + } + + const onFormChange = () => marker.setLatLng(getLatLng()); + + latInput.addEventListener("change", onFormChange); + lngInput.addEventListener("change", onFormChange); } onFormChange = (event) => { - errRadius = parseFloat(event.target.value); - const pos = getLatLng(); - if(pos) createMarker(pos[0], pos[1]); + if(!marker) { + const pos = getLatLng(); + createMarker(); + } } - if(radiusInput) radiusInput.addEventListener("change", onFormChange); latInput.addEventListener("change", onFormChange); lngInput.addEventListener("change", onFormChange); From 65b59947873559473d59856fe9fb1800817e5831 Mon Sep 17 00:00:00 2001 From: MuchQuak Date: Thu, 6 Jun 2024 15:00:34 -0700 Subject: [PATCH 5/5] more form enhancements so that circle and marker move with each other during position edits --- collections/tools/mappointaid.php | 33 ++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/collections/tools/mappointaid.php b/collections/tools/mappointaid.php index adbe2a4a67..ba2ed8663f 100644 --- a/collections/tools/mappointaid.php +++ b/collections/tools/mappointaid.php @@ -129,6 +129,14 @@ function leafletInit() { map.mapLayer.on(L.Draw.Event.EDITSTART, () => editOn = true) map.mapLayer.on(L.Draw.Event.EDITSTOP, () => editOn = false) + function moveCircle(c, pos) { + c.setLatLng(pos); + if(editOn) { + circ.editing.disable(); + circ.editing.enable(); + } + } + function createMarker(lat, lng) { drawnItems.clearLayers(); errRadius = parseFloat(document.getElementById("errRadius").value); @@ -178,12 +186,8 @@ function addCircleEvents(circle) { .on('drag', e => { const pos = e.target.getLatLng(); setLatLngForm(pos.lat, pos.lng); - if(circ) { - circ.setLatLng(pos); - //Jank way of reseting the edit handle - circ.editing.disable(); - circ.editing.enable(); + moveCircle(circ, pos); } }) .addTo(drawnItems) @@ -225,24 +229,31 @@ function addCircleEvents(circle) { if(radiusInput) { radiusInput.addEventListener("change", event => { const radius = parseFloat(event.target.value); - if(circ) { + + if(!radius && circ) { + drawnItems.removeLayer(circ); + } else if(circ) { circ.setRadius(radius); if(editOn) { circ.editing.disable(); circ.editing.enable(); } + map.mapLayer.fitBounds(circ.getBounds()) } else if(radius) { if(!editOn) errRadius = radius; circ = L.circle(latlng, radius); addCircleEvents(circ); - } - console.log(radius) + map.mapLayer.fitBounds(circ.getBounds()) + } - map.mapLayer.fitBounds(circ.getBounds()) }); } - const onFormChange = () => marker.setLatLng(getLatLng()); + const onFormChange = () => { + const pos = getLatLng(); + marker.setLatLng(pos); + if(circ) moveCircle(circ, pos); + }; latInput.addEventListener("change", onFormChange); lngInput.addEventListener("change", onFormChange); @@ -251,7 +262,7 @@ function addCircleEvents(circle) { if(!marker) { const pos = getLatLng(); createMarker(); - } + } } latInput.addEventListener("change", onFormChange); lngInput.addEventListener("change", onFormChange);