pilgrim/src/main/webapp/lib.js

const lib = new function () {

    let ghbase = ""

    /**
     * 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]);
      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;

        // 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);

              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") {
        const s = [start.lat, start.lng];
        let data = {
            points: [
                [start.lng, start.lat]
            ],
            profile: vehicle,
            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]);
        $.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"
        });
    };
};