don/pilgrim
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add waypoint mode

Browse Source
This commit is contained in:
don philipe
2025-05-09 21:07:53 +02:00
parent 61d96b30b9
commit 81b65968c6
1 changed files with 69 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/main/webapp/lib.js
View File

@@ -1,7 +1,11 @@
const lib = new function () {
let ghbase = ""
let planningMode = "classic";
let planningMode = "modern";
const modeContext = {
"classic": '<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>',
"modern": '<button id="btn-feat">feature</button></br><button id="btn-waypoint">waypoint</button>'
};
/**
* Initialize Map etc
@@ -48,49 +52,72 @@ const lib = new function () {
const contextmenu = new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML('<button id="btn-feat">feature</button></br><button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>')
.setHTML(modeContext[planningMode])
.addTo(map);
let featbtn = document.getElementById("btn-feat");
featbtn.onclick = function () {
contextmenu.remove();
const features = map.queryRenderedFeatures(e.point);
const prop = features.map(function (feat) {
return feat["properties"];
});
const featPopup = new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML(JSON.stringify(prop))
.addTo(map);
};
let startbtn = document.getElementById("btn-start");
startbtn.onclick = function () {
contextmenu.remove();
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
startMarker.onMap = true;
if (finishMarker.onMap) {
lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
}
};
let finishbtn = document.getElementById("btn-finish");
finishbtn.onclick = function () {
contextmenu.remove();
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
finishMarker.onMap = true;
if (startMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
}
};
let viabtn = document.getElementById("btn-via");
viabtn.onclick = function () {
contextmenu.remove();
const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]);
marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
marker.addTo(map);
marker.onMap = true;
viaMarkers.push(marker);
if (startMarker.onMap && finishMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
if (planningMode === 'classic') {
let featbtn = document.getElementById("btn-feat");
featbtn.onclick = function () {
contextmenu.remove();
const features = map.queryRenderedFeatures(e.point);
const prop = features.map(function (feat) {
return feat["properties"];
});
const featPopup = new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML(JSON.stringify(prop))
.addTo(map);
};
let startbtn = document.getElementById("btn-start");
startbtn.onclick = function () {
contextmenu.remove();
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
startMarker.onMap = true;
if (finishMarker.onMap) {
lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
}
};
let finishbtn = document.getElementById("btn-finish");
finishbtn.onclick = function () {
contextmenu.remove();
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
finishMarker.onMap = true;
if (startMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), coordinates, viaMarkers);
}
};
let viabtn = document.getElementById("btn-via");
viabtn.onclick = function () {
contextmenu.remove();
const marker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat([coordinates.lng, coordinates.lat]);
marker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
marker.addTo(map);
marker.onMap = true;
viaMarkers.push(marker);
if (startMarker.onMap && finishMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
}
};
} else if (planningMode === 'modern') {
let waypointbtn = document.getElementById("btn-waypoint");
waypointbtn.onclick = function () {
contextmenu.remove();
if (!startMarker.onMap) {
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
startMarker.onMap = true;
} else if (!finishMarker.onMap) {
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
finishMarker.onMap = true;
lib.doRouting(map, startMarker.getLngLat(), coordinates);
} else {
const oldFinishMarker = new maplibregl.Marker({color: "#0000FF", draggable: true}).setLngLat(finishMarker.getLngLat());
finishMarker.setLngLat([coordinates.lng, coordinates.lat]);
oldFinishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
oldFinishMarker.addTo(map);
oldFinishMarker.onMap = true;
viaMarkers.push(oldFinishMarker);
lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);
}
}
};
});