Use svg symbols for routing icons

[rails.git] / app / assets / javascripts / index / directions / graphhopper.js

diff --git a/app/assets/javascripts/index/directions/graphhopper.js b/app/assets/javascripts/index/directions/graphhopper.js
index 021fc7b64de26961f749e11c21290fc198eb7c4c..430801a3b669aca3954abe6f20ab0fab553ce094 100644 (file)
--- a/app/assets/javascripts/index/directions/graphhopper.js
+++ b/app/assets/javascripts/index/directions/graphhopper.js
@@ -1,92 +1,80 @@
 (function () {
-  function GraphHopperEngine(id, vehicleType) {
-    var GH_INSTR_MAP = {
-      "-3": 7, // sharp left
-      "-2": 6, // left
-      "-1": 5, // slight left
-      "0": 0, // straight
-      "1": 1, // slight right
-      "2": 2, // right
-      "3": 3, // sharp right
-      "4": 14, // finish reached
-      "5": 14, // via reached
-      "6": 10, // roundabout
-      "-7": 19, // keep left
-      "7": 18, // keep right
-      "-98": 4, // unknown direction u-turn
-      "-8": 4, // left u-turn
-      "8": 4 // right u-turn
+  function GraphHopperEngine(modeId, vehicleType) {
+    const GH_INSTR_MAP = {
+      "-3": "sharp-left",
+      "-2": "left",
+      "-1": "slight-left",
+      "0": "straight",
+      "1": "slight-right",
+      "2": "right",
+      "3": "sharp-right",
+      "4": "destination", // finish reached
+      "5": "destination", // via reached
+      "6": "roundabout",
+      "-7": "fork-left",
+      "7": "fork-right",
+      "-98": "u-turn", // unknown direction u-turn
+      "-8": "u-turn", // left u-turn
+      "8": "u-turn" // right u-turn
     };
 
-    return {
-      id: id,
-      creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">GraphHopper</a>",
-      draggable: false,
+    function _processDirections(path) {
+      const line = L.PolylineUtil.decode(path.points);
 
-      getRoute: function (points, callback) {
-      // GraphHopper Directions API documentation
-      // https://graphhopper.com/api/1/docs/routing/
-        return $.ajax({
-          url: OSM.GRAPHHOPPER_URL,
-          data: {
-            vehicle: vehicleType,
-            locale: I18n.currentLocale(),
-            key: "LijBPDQGfu7Iiq80w3HzwB4RUDJbMbhs6BU0dEnn",
-            elevation: false,
-            instructions: true,
-            turn_costs: vehicleType === "car",
-            point: points.map(function (p) { return p.lat + "," + p.lng; })
-          },
-          traditional: true,
-          dataType: "json",
-          success: function (data) {
-            if (!data.paths || data.paths.length === 0) {
-              return callback(true);
-            }
+      const steps = path.instructions.map(function (instr, i) {
+        const num = `<b>${i + 1}.</b> `;
+        const lineseg = line
+          .slice(instr.interval[0], instr.interval[1] + 1)
+          .map(([lat, lng]) => ({ lat, lng }));
+        return [
+          lineseg[0],
+          GH_INSTR_MAP[instr.sign],
+          num + instr.text,
+          instr.distance,
+          lineseg
+        ]; // TODO does graphhopper map instructions onto line indices?
+      });
+      steps.at(-1)[1] = "destination";
 
-            var path = data.paths[0];
-            var line = L.PolylineUtil.decode(path.points);
+      return {
+        line: line,
+        steps: steps,
+        distance: path.distance,
+        time: path.time / 1000,
+        ascend: path.ascend,
+        descend: path.descend
+      };
+    }
 
-            var steps = [];
-            var len = path.instructions.length;
-            for (var i = 0; i < len; i++) {
-              var instr = path.instructions[i];
-              var instrCode = (i === len - 1) ? 14 : GH_INSTR_MAP[instr.sign];
-              var instrText = "<b>" + (i + 1) + ".</b> ";
-              instrText += instr.text;
-              var latLng = line[instr.interval[0]];
-              var distInMeter = instr.distance;
-              var lineseg = [];
-              for (var j = instr.interval[0]; j <= instr.interval[1]; j++) {
-                lineseg.push({ lat: line[j][0], lng: line[j][1] });
-              }
-              steps.push([
-                { lat: latLng[0], lng: latLng[1] },
-                instrCode,
-                instrText,
-                distInMeter,
-                lineseg
-              ]); // TODO does graphhopper map instructions onto line indices?
-            }
+    return {
+      mode: modeId,
+      provider: "graphhopper",
+      creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">GraphHopper</a>",
+      draggable: false,
 
-            callback(false, {
-              line: line,
-              steps: steps,
-              distance: path.distance,
-              time: path.time / 1000,
-              ascend: path.ascend,
-              descend: path.descend
-            });
-          },
-          error: function () {
-            callback(true);
-          }
+      getRoute: function (points, signal) {
+        // GraphHopper Directions API documentation
+        // https://graphhopper.com/api/1/docs/routing/
+        const query = new URLSearchParams({
+          vehicle: vehicleType,
+          locale: I18n.currentLocale(),
+          key: "LijBPDQGfu7Iiq80w3HzwB4RUDJbMbhs6BU0dEnn",
+          elevation: false,
+          instructions: true,
+          turn_costs: vehicleType === "car"
         });
+        points.forEach(p => query.append("point", p.lat + "," + p.lng));
+        return fetch(OSM.GRAPHHOPPER_URL + "?" + query, { signal })
+          .then(response => response.json())
+          .then(({ paths }) => {
+            if (!paths || paths.length === 0) throw new Error();
+            return _processDirections(paths[0]);
+          });
       }
     };
   }
 
-  OSM.Directions.addEngine(new GraphHopperEngine("graphhopper_car", "car"), true);
-  OSM.Directions.addEngine(new GraphHopperEngine("graphhopper_bicycle", "bike"), true);
-  OSM.Directions.addEngine(new GraphHopperEngine("graphhopper_foot", "foot"), true);
+  OSM.Directions.addEngine(new GraphHopperEngine("car", "car"), true);
+  OSM.Directions.addEngine(new GraphHopperEngine("bicycle", "bike"), true);
+  OSM.Directions.addEngine(new GraphHopperEngine("foot", "foot"), true);
 }());