Get directions using fetch

[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..729618f2d596441597482dea5f159f99f09357b4 100644 (file)
--- a/app/assets/javascripts/index/directions/graphhopper.js
+++ b/app/assets/javascripts/index/directions/graphhopper.js
@@ -1,6 +1,6 @@
 (function () {
   function GraphHopperEngine(id, vehicleType) {
 (function () {
   function GraphHopperEngine(id, vehicleType) {

-    var GH_INSTR_MAP = {
+    const GH_INSTR_MAP = {

       "-3": 7, // sharp left
       "-2": 6, // left
       "-1": 5, // slight left
       "-3": 7, // sharp left
       "-2": 6, // left
       "-1": 5, // slight left


@@ -18,70 +18,57 @@
       "8": 4 // right u-turn
     };
 
       "8": 4 // right u-turn
     };
 

+    function _processDirections(path) {
+      const line = L.PolylineUtil.decode(path.points);
+
+      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] = 14;
+
+      return {
+        line: line,
+        steps: steps,
+        distance: path.distance,
+        time: path.time / 1000,
+        ascend: path.ascend,
+        descend: path.descend
+      };
+    }
+

     return {
       id: id,
       creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">GraphHopper</a>",
       draggable: false,
 
     return {
       id: id,
       creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">GraphHopper</a>",
       draggable: false,
 

-      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);
-            }
-
-            var path = data.paths[0];
-            var line = L.PolylineUtil.decode(path.points);
-
-            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?
-            }
-
-            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]);
+          });

       }
     };
   }
       }
     };
   }