From dc5245d7cdf47e78ec55296940fc91570369ab00 Mon Sep 17 00:00:00 2001
From: don philipe <don_philipe@gmx.de>
Date: Tue, 6 May 2025 22:06:40 +0200
Subject: [PATCH] Add via routing

---
 src/main/java/de/spacedon/ConfigServlet.java |   3 +
 src/main/webapp/index.html                   |   4 +-
 src/main/webapp/lib.js                       | 155 ++++++++++---------
 start.sh                                     |   1 +
 4 files changed, 91 insertions(+), 72 deletions(-)

diff --git a/src/main/java/de/spacedon/ConfigServlet.java b/src/main/java/de/spacedon/ConfigServlet.java
index 07000c8..c3720df 100644
--- a/src/main/java/de/spacedon/ConfigServlet.java
+++ b/src/main/java/de/spacedon/ConfigServlet.java
@@ -12,6 +12,9 @@ import org.json.JSONObject;
 public class ConfigServlet extends HttpServlet {
     private static final long serialVersionUID = 1L;
 
+    /**
+     * Output configuration as JSON
+     */
     @Override
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         response.setContentType("application/json");
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 3d120db..f50fdea 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -4,8 +4,8 @@
         <meta charset="utf-8">
         <title>Pilgrim</title>
         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
-		<script src="jquery-3.7.1.min.js"></script>
-		<script src="lib.js"></script>
+	<script src="jquery-3.7.1.min.js"></script>
+	<script src="lib.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">
         <style>
diff --git a/src/main/webapp/lib.js b/src/main/webapp/lib.js
index c314bf1..33bf5dd 100644
--- a/src/main/webapp/lib.js
+++ b/src/main/webapp/lib.js
@@ -8,79 +8,91 @@ const lib = new function () {
     this.init = function () {
         $.get("/config", function(result) { ghbase = result["ghbase"]; });
 
-		const map = new maplibregl.Map({ container: 'map',
-			style: 'spacedon.json',
-			center: [13, 51],
-			zoom: 6
-		}); 
-		map.addControl(new maplibregl.NavigationControl());
+      const map = new maplibregl.Map({ container: 'map',
+        style: 'spacedon.json',
+        center: [13, 51],
+        zoom: 6
+      }); 
+      map.addControl(new maplibregl.NavigationControl());
 
-        const startMarker = new maplibregl.Marker({color: "#00FF00", 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());});
-        finishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat());});
-		const viaMarkers = new Array();
+      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 viaMarkers = new Array();
+      startMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
+      finishMarker.on("dragend", function() {lib.doRouting(map, startMarker.getLngLat(), finishMarker.getLngLat(), viaMarkers);});
 
-		map.on('mousemove', function (e) {
-			var features = map.queryRenderedFeatures(e.point);
-			// Limit the number of properties we're displaying for
-			// legibility and performance
-			var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
-			var displayFeatures = features.map(function (feat) {
-				var displayFeat = {};
-				displayProperties.forEach(function (prop) {
-					displayFeat[prop] = feat[prop];
-				});
-				return displayFeat;
-			});
-			document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
-		});
-		map.on('click', function (e) {
-			let coordinates = e.lngLat;
+      map.on('mousemove', function (e) {
+        var features = map.queryRenderedFeatures(e.point);
+        // Limit the number of properties we're displaying for
+        // legibility and performance
+        var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
+        var displayFeatures = features.map(function (feat) {
+          var displayFeat = {};
+          displayProperties.forEach(function (prop) {
+            displayFeat[prop] = feat[prop];
+          });
+          return displayFeat;
+        });
+        document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
+      });
+      map.on('click', function (e) {
+        let coordinates = e.lngLat;
 
-			// Ensure that if the map is zoomed out such that multiple
-			// copies of the feature are visible, the popup appears
-			// over the copy being pointed to.
-			while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
-				coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
-			}
+        // Ensure that if the map is zoomed out such that multiple
+        // copies of the feature are visible, the popup appears
+        // over the copy being pointed to.
+        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+        }
 
-			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>')
-				.addTo(map);
+        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>')
+          .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());
-                }
-            };
-            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);
-                }
-            };
-		});
+              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);
+                  }
+              };
+      });
     };
 
     this.doRouting = function (map, start, finish, vias = undefined, vehicle = "foot") {
@@ -93,9 +105,12 @@ const lib = new function () {
             points_encoded: false
         };
         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({
             type: "POST",
             url: ghbase + "/route",
diff --git a/start.sh b/start.sh
index cbc4832..f94f47a 100755
--- a/start.sh
+++ b/start.sh
@@ -1,5 +1,6 @@
 #!/bin/sh
 
 mvn clean package
+echo "Starting at localhost:8082"
 java -jar target/pilgrim-1.0-SNAPSHOT-jar-with-dependencies.jar
 exit 0