Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/3.1/mappoint aid better edit #1417

Merged
merged 5 commits into from
Jun 7, 2024
Merged

Enhancement/3.1/mappoint aid better edit #1417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed3d712
pointaid only autoselects tool if point not present and click to edit…
MuchQuak Jun 6, 2024
7219c1e
fixes deletion problem with marker and circle present. Also fixes dra…
MuchQuak Jun 6, 2024
2a59285
change checklist point aid to just use collection point aid to reduce…
MuchQuak Jun 6, 2024
c1b2964
fixed problem that occured while in edit mode and changing the error …
MuchQuak Jun 6, 2024
65b5994
more form enhancements so that circle and marker move with each other…
MuchQuak Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions checklists/checklistadminmeta.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,13 @@ function setExclusionChecklistMode(f){
}

function openMappingAid() {
mapWindow=open("<?php echo $CLIENT_ROOT; ?>/checklists/tools/mappointaid.php?clid=<?php echo $clid; ?>&formname=editclmatadata&latname=latcentroid&longname=longcentroid","mapaid","resizable=0,width=1000,height=800,left=20,top=20");
mapWindow=open("<?php echo $CLIENT_ROOT; ?>/collections/tools/mappointaid.php?clid=<?php echo $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("<?php echo $CLIENT_ROOT; ?>/checklists/tools/mappolyaid.php?clid=<?php echo $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;
}
Expand Down Expand Up @@ -238,18 +238,18 @@ function enableDisableExtServiceFields() {
<div id="geoDiv" style="width:100%;margin-top:5px">
<div style="float:left;">
<b><?php echo $LANG['LATCENT']; ?></b><br/>
<input id="latdec" type="text" name="latcentroid" style="width:110px;" value="<?php echo ($clArray?$clArray["latcentroid"]:''); ?>" />
<input id="decimallatitude" type="text" name="latcentroid" style="width:110px;" value="<?php echo ($clArray?$clArray["latcentroid"]:''); ?>" />
</div>
<div style="float:left;margin-left:15px;">
<b><?php echo $LANG['LONGCENT']; ?></b><br/>
<input id="lngdec" type="text" name="longcentroid" style="width:110px;" value="<?php echo ($clArray?$clArray["longcentroid"]:''); ?>" />
<input id="decimallongitude" type="text" name="longcentroid" style="width:110px;" value="<?php echo ($clArray?$clArray["longcentroid"]:''); ?>" />
</div>
<div style="float:left;margin:25px 3px;">
<a href="#" onclick="openMappingAid();return false;"><img src="../images/world.png" style="width:1em;" /></a>
</div>
<div style="float:left;margin-left:15px;">
<b><?php echo $LANG['POINTRAD']; ?></b><br/>
<input type="number" name="pointradiusmeters" style="width:110px;" value="<?php echo ($clArray?$clArray["pointradiusmeters"]:''); ?>" />
<input id="coordinateuncertaintyinmeters" type="number" name="pointradiusmeters" style="width:110px;" value="<?php echo ($clArray?$clArray["pointradiusmeters"]:''); ?>" />
</div>
</div>
<div style="clear:both;margin-top:5px;">
Expand Down
178 changes: 124 additions & 54 deletions collections/tools/mappointaid.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -112,86 +117,153 @@ function leafletInit() {

map.mapLayer.addControl(drawControl);
const markerControl = document.querySelector(".leaflet-draw-draw-marker");
if(markerControl) markerControl.click();

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 moveCircle(c, pos) {
c.setLatLng(pos);
if(editOn) {
circ.editing.disable();
circ.editing.enable();
}
}

function createMarker(lat, lng) {
drawnItems.clearLayers();
if(marker) map.mapLayer.removeLayer(marker);
errRadius = parseFloat(document.getElementById("errRadius").value);

latlng = [lat,lng];

setLatLngForm(lat, lng);

marker = L.marker([lat, lng])
circ = errRadius && errRadius > 0?
L.circle(latlng, errRadius):
false;
marker = L.marker(latlng);

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")
}
}

function handleMarkerClick() {
if(deleteOn && circ) drawnItems.removeLayer(circ);
else enableEdit();
}

function handleCircleClick() {
if(deleteOn) drawnItems.removeLayer(marker);
else enableEdit();
}

if(errRadius && errRadius > 0) {
marker.addTo(map.mapLayer);
const circ = L.circle([lat, lng], errRadius)
function addCircleEvents(circle) {
circle
.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', handleCircleClick)
.setStyle(map.DEFAULT_SHAPE_OPTIONS)
.addTo(drawnItems);
}

map.mapLayer.fitBounds(circ.getBounds());

map.mapLayer.on('draw:deleted', e => {
map.mapLayer.removeLayer(marker);
marker
.on('click', handleMarkerClick)
.on('drag', e => {
const pos = e.target.getLatLng();
setLatLngForm(pos.lat, pos.lng);
if(circ) {
moveCircle(circ, pos);
}
})
.addTo(drawnItems)
if(circ) {
addCircleEvents(circ);

map.mapLayer.on('draw:editresize', e => {
document.getElementById("errRadius").value = e.layer._mRadius.toFixed(5);
})

map.mapLayer.on('draw:edited', function(e) {
latlng = getLatLng();
errRadius = parseFloat(document.getElementById("errRadius").value);
})
map.mapLayer.fitBounds(circ.getBounds());
} else {
map.mapLayer.setView(latlng, map.mapLayer.getZoom());
}

map.mapLayer.on('draw:editstop', e => {
setLatLngForm(latlng[0], latlng[1]);
document.getElementById("errRadius").value = errRadius;
map.mapLayer
.on('draw:deleted', e => {
errRadius = 0;
clearForm();
})

map.mapLayer.on('draw:editstop', e => {
map.mapLayer.removeLayer(marker);
marker = L.marker([latlng[0], latlng[1]])
.addTo(map.mapLayer)
.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);
}
})

} else {
marker.on('drag', e => {
const pos = e.target.getLatLng();
setLatLngForm(pos.lat, pos.lng);
.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;
})
if(radiusInput) {
radiusInput.addEventListener("change", event => {
const radius = parseFloat(event.target.value);

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);
map.mapLayer.fitBounds(circ.getBounds())
}

});
}

map.mapLayer.on('draw:edited', function(e) {
latlng = getLatLng();
})

marker.addTo(drawnItems);
const onFormChange = () => {
const pos = getLatLng();
marker.setLatLng(pos);
if(circ) moveCircle(circ, pos);
};

map.mapLayer.setView(latlng, map.mapLayer.getZoom());
}
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);

Expand All @@ -203,15 +275,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();
}
}

Expand Down Expand Up @@ -262,7 +332,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]),
Expand Down Expand Up @@ -330,9 +400,9 @@ function initialize() {
}
<?php if(empty($GOOGLE_MAP_KEY)) { ?>
leafletInit();
<?php } else { ?>
<?php } else { ?>
googleInit();
<?php } ?>
<?php } ?>
}

function updateParentForm(f) {
Expand Down