Simple routing with GH

.gitignore

@@ -1 +1,2 @@
 target/
+pilgrim.properties

pom.xml

@@ -17,19 +17,24 @@
 	
     <dependencies>
         <dependency>
-	    <groupId>org.eclipse.jetty</groupId>
+            <groupId>org.eclipse.jetty</groupId>
-	    <artifactId>jetty-server</artifactId>
+            <artifactId>jetty-server</artifactId>
-	    <version>11.0.3</version>
+            <version>11.0.3</version>
         </dependency>
         <dependency>
-	    <groupId>org.eclipse.jetty</groupId>
+            <groupId>org.eclipse.jetty</groupId>
-	    <artifactId>jetty-servlet</artifactId>
+            <artifactId>jetty-servlet</artifactId>
-	    <version>11.0.3</version>
+            <version>11.0.3</version>
         </dependency>
         <dependency>
-	    <groupId>org.eclipse.jetty</groupId>
+            <groupId>org.eclipse.jetty</groupId>
-	    <artifactId>apache-jsp</artifactId>
+            <artifactId>apache-jsp</artifactId>
-	    <version>11.0.3</version>
+            <version>11.0.3</version>
+        </dependency>
+        <dependency>
+            <groupId>org.json</groupId>
+            <artifactId>json</artifactId>
+            <version>20240303</version>
         </dependency>
     </dependencies>
 

src/main/java/de/spacedon/ConfigServlet.java

@@ -0,0 +1,43 @@
+package de.spacedon;
+
+import java.io.InputStream;
+import java.io.IOException;
+import java.util.Properties;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServlet;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.json.JSONObject;
+
+public class ConfigServlet extends HttpServlet {
+    private static final long serialVersionUID = 1L;
+
+    @Override
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        response.setContentType("application/json");
+	response.setStatus(HttpServletResponse.SC_OK);
+	Properties conf = getConfig("de/spacedon/pilgrim.properties");
+	JSONObject jo = new JSONObject();
+	jo.put("ghbase", conf.getProperty("ghbase"));
+	response.getWriter().println(jo);
+    }
+
+   /**
+    * Try to load properties file from given path and return it.
+    * IOExceptions will be caught (e.g. when the file doesn't exist).
+    * @param path Path to properties file
+    * @return properties from given path
+    */
+   protected static Properties getConfig(String path) {
+       Properties config = new Properties();
+       ClassLoader loader = Thread.currentThread().getContextClassLoader();
+
+       try (InputStream resourceStream = loader.getResourceAsStream(path)) {
+           config.load(resourceStream);
+       } catch (IOException ex) {
+           ex.printStackTrace();
+       }
+
+       return config;
+   }
+}

src/main/java/de/spacedon/MyServlet.java

@@ -1,18 +0,0 @@
-package de.spacedon;
-
-import java.io.IOException;
-import jakarta.servlet.ServletException;
-import jakarta.servlet.http.HttpServlet;
-import jakarta.servlet.http.HttpServletRequest;
-import jakarta.servlet.http.HttpServletResponse;
-
-public class MyServlet extends HttpServlet {
-    private static final long serialVersionUID = 1L;
-
-    @Override
-    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-        response.setContentType("application/json");
-	response.setStatus(HttpServletResponse.SC_OK);
-	response.getWriter().println("{\"status\":\"ok\"}");
-    }
-}

src/main/java/de/spacedon/PilgrimServer.java

@@ -20,8 +20,8 @@ public class PilgrimServer {
 	contextHandler.setContextPath("/");
 	server.setHandler(contextHandler);
 	
-	// register custom Servlet at endpoint /index
+	// register custom Servlet at endpoint /config
-	contextHandler.addServlet(new ServletHolder(new MyServlet()), "/index");
+	contextHandler.addServlet(new ServletHolder(new ConfigServlet()), "/config");
 
 	// register index.html
 	ServletHolder staticHolder = new ServletHolder(new DefaultServlet());

src/main/resources/de/spacedon/pilgrim-example.properties

@@ -0,0 +1 @@
+ghbase=http://

src/main/webapp/index.html

@@ -2,9 +2,10 @@
 <html>
 <head>
         <meta charset="utf-8">
-        <title>Display a map</title>
+        <title>Pilgrim</title>
         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
-	<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>
@@ -34,52 +35,10 @@
         </style>
 </head>
 <body>
-        <div id="map">
+        <div id="map"></div>
-        </div>
-
         <pre id="features"></pre>
         <script>
-		var map = new maplibregl.Map({ container: 'map', // container id
+			lib.init();
-			//style: 'https://demotiles.maplibre.org/style.json', // style URL
-			style: 'spacedon.json', // style URL
-			center: [13, 51], // starting position [lng, lat]
-			zoom: 6 // starting zoom
-		}); 
-		map.addControl(new maplibregl.NavigationControl());
-		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) {
-			var 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;
-			}
-
-			new maplibregl.Popup()
-				.setLngLat(coordinates)
-				.setHTML('<button>start</button></br><button>via</button></br><button>finish</button>')
-				.addTo(map);
-		});
-		const startMarker = new maplibregl.Marker({draggable: true})
-			.setLngLat([0, 0]);
-		const finishMarker = new maplibregl.Marker({draggable: true})
-			.setLngLat([0, 0]);
-		const viaMarkers = new Array();
         </script>
 </body>
 </html>

src/main/webapp/lib.js

@@ -1,7 +1,124 @@
-let lib = new function () {
+const lib = new function () {
-    this.setStartMarker = function (coordinates) {
+
-    }
+    let ghbase = ""
-    this.setMarker = function (marker, lng, lat, map) {
+
-        marker.setLngLat([lng, lat]).addTo(map);
+    /**
+     * Initialize Map etc
+     */
+    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 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();
+
+		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;
+			}
+
+			const contextmenu = new maplibregl.Popup()
+				.setLngLat(coordinates)
+				.setHTML('<button id="btn-start">start</button></br><button id="btn-via">via</button></br><button id="btn-finish">finish</button>')
+				.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);
+                }
+            };
+		});
+    };
+
+    this.doRouting = function (map, start, finish, vias = undefined, vehicle = "foot") {
+        const s = [start.lat, start.lng];
+        let data = {
+            points: [
+                [start.lng, start.lat]
+            ],
+            profile: vehicle,
+            points_encoded: false
+        };
+        if (vias != undefined && vias.length > 0) {
+
+        }
+        data.points.push([finish.lng, finish.lat])
+        $.ajax({
+            type: "POST",
+            url: ghbase + "/route",
+            data: JSON.stringify(data),
+            contentType: "application/json",
+            success: function (result) {
+                if(map.getLayer("route") !== undefined) {
+                    map.removeLayer("route");
+                }
+                if(map.getSource("ghroute") !== undefined) {
+                    map.removeSource("ghroute");
+                }
+
+                map.addSource("ghroute", {
+                    "type": "geojson",
+                    "data": {
+                        "type": "Feature",
+                        "geometry": result.paths[0].points
+                    }
+                });
+                map.addLayer({
+                    "id": "route",
+                    "type": "line",
+                    "source": "ghroute",
+                    "layout": {
+                        "line-join": "round",
+                        "line-cap": "round"
+                    },
+                    "paint": {
+                        "line-color": "#f00",
+                        "line-width": 9
+                    }
+                });
+            },
+            dataType: "json"
+        });
     };
 };