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 19147587303b69b079fbc3792c526a64b6f0193a..430801a3b669aca3954abe6f20ab0fab553ce094 100644 (file)
--- a/app/assets/javascripts/index/directions/graphhopper.js
+++ b/app/assets/javascripts/index/directions/graphhopper.js
@@ -1,21 +1,21 @@
 (function () {
-  function GraphHopperEngine(id, vehicleType) {
+  function GraphHopperEngine(modeId, vehicleType) {
     const 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
+      "-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
     };
 
     function _processDirections(path) {
@@ -34,7 +34,7 @@
           lineseg
         ]; // TODO does graphhopper map instructions onto line indices?
       });
-      steps.at(-1)[1] = 14;
+      steps.at(-1)[1] = "destination";
 
       return {
         line: line,
@@ -47,42 +47,34 @@
     }
 
     return {
-      id: id,
+      mode: modeId,
+      provider: "graphhopper",
       creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">GraphHopper</a>",
       draggable: false,
 
-      getRoute: function (points, callback) {
+      getRoute: function (points, signal) {
         // GraphHopper Directions API documentation
         // https://graphhopper.com/api/1/docs/routing/
-        const data = {
+        const query = new URLSearchParams({
           vehicle: vehicleType,
           locale: I18n.currentLocale(),
           key: "LijBPDQGfu7Iiq80w3HzwB4RUDJbMbhs6BU0dEnn",
           elevation: false,
           instructions: true,
-          turn_costs: vehicleType === "car",
-          point: points.map(p => p.lat + "," + p.lng)
-        };
-        return $.ajax({
-          url: OSM.GRAPHHOPPER_URL,
-          data,
-          traditional: true,
-          dataType: "json",
-          success: function ({ paths }) {
-            if (!paths || paths.length === 0) {
-              return callback(true);
-            }
-            callback(false, _processDirections(paths[0]));
-          },
-          error: function () {
-            callback(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);
 }());