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

Add via routing

Browse Source
This commit is contained in:
don philipe
2025-05-06 22:06:40 +02:00
parent c6df2464af
commit dc5245d7cd
4 changed files with 91 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/java/de/spacedon/ConfigServlet.java
View File

@@ -12,6 +12,9 @@ import org.json.JSONObject;
public class ConfigServlet extends HttpServlet { public class ConfigServlet extends HttpServlet {
private static final long serialVersionUID = 1L; private static final long serialVersionUID = 1L;
/**
* Output configuration as JSON
*/
@Override @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json"); response.setContentType("application/json");

4
src/main/webapp/index.html
View File

@@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Pilgrim</title> <title>Pilgrim</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="jquery-3.7.1.min.js"></script> <script src="jquery-3.7.1.min.js"></script>
<script src="lib.js"></script> <script src="lib.js"></script>
<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script> <script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet"> <link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
<style> <style>

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

@@ -8,79 +8,91 @@ const lib = new function () {
this.init = function () { this.init = function () {
$.get("/config", function(result) { ghbase = result["ghbase"]; }); $.get("/config", function(result) { ghbase = result["ghbase"]; });
const map = new maplibregl.Map({ container: 'map', const map = new maplibregl.Map({ container: 'map',
style: 'spacedon.json', style: 'spacedon.json',
center: [13, 51], center: [13, 51],
zoom: 6 zoom: 6
}); });
map.addControl(new maplibregl.NavigationControl()); map.addControl(new maplibregl.NavigationControl());
const startMarker = new maplibregl.Marker({color: "#00FF00", draggable: true}).setLngLat([0, 0]); const startMarker = new maplibregl.Marker({color: "#00FF00", draggable: true}).setLngLat([0, 0]);
const finishMarker = new maplibregl.Marker({color: "#FF0000", draggable: true}).setLngLat([0, 0]); const finishMarker = new maplibregl.Marker({color: "#FF0000", draggable: true}).setLngLat([0, 0]);
startMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat());}); const viaMarkers = new Array();
finishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat());}); startMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
const viaMarkers = new Array(); finishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
map.on('mousemove', function (e) { map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point); var features = map.queryRenderedFeatures(e.point);
// Limit the number of properties we're displaying for // Limit the number of properties we're displaying for
// legibility and performance // legibility and performance
var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ]; var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
var displayFeatures = features.map(function (feat) { var displayFeatures = features.map(function (feat) {
var displayFeat = {}; var displayFeat = {};
displayProperties.forEach(function (prop) { displayProperties.forEach(function (prop) {
displayFeat[prop] = feat[prop]; displayFeat[prop] = feat[prop];
}); });
return displayFeat; return displayFeat;
}); });
document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 ); document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
}); });
map.on('click', function (e) { map.on('click', function (e) {
let coordinates = e.lngLat; let coordinates = e.lngLat;
// Ensure that if the map is zoomed out such that multiple // Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears // copies of the feature are visible, the popup appears
// over the copy being pointed to. // over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
} }
const contextmenu = new maplibregl.Popup() const contextmenu = new maplibregl.Popup()
.setLngLat(coordinates) .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('<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>')
.addTo(map); .addTo(map);
let featbtn = document.getElementById("btn-feat"); let featbtn = document.getElementById("btn-feat");
featbtn.onclick = function () { featbtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
const features = map.queryRenderedFeatures(e.point); const features = map.queryRenderedFeatures(e.point);
const prop = features.map(function (feat) { const prop = features.map(function (feat) {
return feat["properties"]; return feat["properties"];
}); });
const featPopup = new maplibregl.Popup() const featPopup = new maplibregl.Popup()
.setLngLat(coordinates) .setLngLat(coordinates)
.setHTML(JSON.stringify(prop)) .setHTML(JSON.stringify(prop))
.addTo(map); .addTo(map);
}; };
let startbtn = document.getElementById("btn-start"); let startbtn = document.getElementById("btn-start");
startbtn.onclick = function () { startbtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map); startMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
startMarker.onMap = true; startMarker.onMap = true;
if (finishMarker.onMap) { if (finishMarker.onMap) {
lib.doRouting(map, coordinates, finishMarker.getLngLat()); lib.doRouting(map, coordinates, finishMarker.getLngLat(), viaMarkers);
} }
}; };
let finishbtn = document.getElementById("btn-finish"); let finishbtn = document.getElementById("btn-finish");
finishbtn.onclick = function () { finishbtn.onclick = function () {
contextmenu.remove(); contextmenu.remove();
finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map); finishMarker.setLngLat([coordinates.lng, coordinates.lat]).addTo(map);
finishMarker.onMap = true; finishMarker.onMap = true;
if (startMarker.onMap) { if (startMarker.onMap) {
lib.doRouting(map, startMarker.getLngLat(), coordinates); 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);
}
};
});
}; };
this.doRouting = function (map, start, finish, vias = undefined, vehicle = "foot") { this.doRouting = function (map, start, finish, vias = undefined, vehicle = "foot") {
@@ -93,9 +105,12 @@ const lib = new function () {
points_encoded: false points_encoded: false
}; };
if (vias != undefined && vias.length > 0) { if (vias != undefined && vias.length > 0) {
for (let marker of vias) {
const lnglat = marker.getLngLat()
data.points.push([lnglat["lng"], lnglat["lat"]]);
}
} }
data.points.push([finish.lng, finish.lat]) data.points.push([finish.lng, finish.lat]);
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: ghbase + "/route", url: ghbase + "/route",

1
start.sh
View File

@@ -1,5 +1,6 @@
#!/bin/sh #!/bin/sh
mvn clean package mvn clean package
echo "Starting at localhost:8082"
java -jar target/pilgrim-1.0-SNAPSHOT-jar-with-dependencies.jar java -jar target/pilgrim-1.0-SNAPSHOT-jar-with-dependencies.jar
exit 0 exit 0