@twinmatrix/spatialverse-sdk-web 0.0.2 → 0.0.4

package/lib/cjs/meta-atlas-sdk/utils/routing-visualizer/index.js

@@ -12,35 +12,17 @@ var _nearestPointOnLine = require("@turf/nearest-point-on-line");
 var _turf = _interopRequireWildcard(require("@turf/turf"));
 var turf = _turf;
 var _transformTranslate = require("@turf/transform-translate");
-var _interfaces = require("../../MetaAtlasCore/routing-core/interfaces");
-var _routingHelpers = require("../../MetaAtlasCore/routing-core/routing-helpers");
-var _routeLayers = require("../../MetaAtlasCore/routing-core/routeLayers");
-var _routingStore = _interopRequireDefault(require("../routing-store"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+var _interfaces = require("../../MetaAtlasCore/routing-core/interfaces.js");
+var _routingHelpers = require("../../MetaAtlasCore/routing-core/routing-helpers.js");
+var _routeLayers = require("../../MetaAtlasCore/routing-core/routeLayers.js");
+var _routingStore = _interopRequireDefault(require("../routing-store.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // import { distance } from "@turf/distance";
-var RoutingVisualizer = exports.RoutingVisualizer = /*#__PURE__*/function () {
-  function RoutingVisualizer(sdk) {
-    var _this = this;
-    _classCallCheck(this, RoutingVisualizer);
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // import { distance } from "@turf/distance";
+class RoutingVisualizer {
+  constructor(sdk) {
     // Routing
     _defineProperty(this, "routeSourceName", 'routeGeojson');
     _defineProperty(this, "patchFeatureCollection", {
@@ -61,15 +43,15 @@ var RoutingVisualizer = exports.RoutingVisualizer = /*#__PURE__*/function () {
       from: 0,
       to: 0
     });
-    _defineProperty(this, "animateHighlightedRouteSegment", function () {
-      var routeFeature = (0, _lodash.cloneDeep)(_this.animateRouteSegmentFeatureCollection.features[0]);
+    _defineProperty(this, "animateHighlightedRouteSegment", () => {
+      const routeFeature = (0, _lodash.cloneDeep)(this.animateRouteSegmentFeatureCollection.features[0]);
       if (routeFeature) {
-        var currentTime = Date.now();
-        var elapsed = currentTime - _this.animationStartTime;
-        var writeToSource = function writeToSource(feature, coords) {
+        const currentTime = Date.now();
+        const elapsed = currentTime - this.animationStartTime;
+        const writeToSource = (feature, coords) => {
           //@ts-ignore
           feature.geometry.coordinates = coords;
-          var routeSource = _this.map.getSource(_this.animateRouteSourceName);
+          const routeSource = this.map.getSource(this.animateRouteSourceName);
           if (routeSource) {
             //@ts-ignore
             routeSource.setData({
@@ -78,27 +60,29 @@ var RoutingVisualizer = exports.RoutingVisualizer = /*#__PURE__*/function () {
             });
           }
         };
-        var animationDuration = 2000;
+        const animationDuration = 2000;
         if (elapsed < animationDuration) {
-          var progress = 1 - elapsed / animationDuration;
+          const progress = 1 - elapsed / animationDuration;
 
           //@ts-ignore
-          var fullRoute = routeFeature.geometry.coordinates;
-          var end = _this.end;
-          var currentEnd;
+          const fullRoute = routeFeature.geometry.coordinates;
+          const {
+            end
+          } = this;
+          let currentEnd;
           if (progress > 0.5) {
-            var customProgress = 2 * (progress - 0.5); // map 0.5 - 1 to 0 - 1 range
+            const customProgress = 2 * (progress - 0.5); // map 0.5 - 1 to 0 - 1 range
             currentEnd = end.from * (1.0 - customProgress) + customProgress * end.to;
           } else {
-            var _customProgress = progress * 2; // map 0 - 0.5 to 0 - 1 range
-            currentEnd = end.from * (1.0 - _customProgress) + _customProgress * end.to;
+            const customProgress = progress * 2; // map 0 - 0.5 to 0 - 1 range
+            currentEnd = end.from * (1.0 - customProgress) + customProgress * end.to;
           }
 
           // calculate distance along the line using current animation percentage
           // percentage travels 1 - 0
-          var prevsum = 0;
-          var actsum = 0;
-          var i = fullRoute.length - 1;
+          let prevsum = 0;
+          let actsum = 0;
+          let i = fullRoute.length - 1;
           while (actsum < currentEnd && i > 0) {
             prevsum = actsum;
             actsum += turf.distance((0, _helpers.point)(fullRoute[i]), (0, _helpers.point)(fullRoute[i - 1]));
@@ -114,27 +98,27 @@ var RoutingVisualizer = exports.RoutingVisualizer = /*#__PURE__*/function () {
             // }
 
             // Return coordinates from line start to current percentage point
-            var r = (currentEnd - prevsum) / (actsum - prevsum);
-            var or = 1.0 - r;
-            var actRoute = [].concat(_toConsumableArray(fullRoute.slice(0, i + 1)), [[fullRoute[i][0] * r + fullRoute[i + 1][0] * or, fullRoute[i][1] * r + fullRoute[i + 1][1] * or]]);
+            const r = (currentEnd - prevsum) / (actsum - prevsum);
+            const or = 1.0 - r;
+            const actRoute = [...fullRoute.slice(0, i + 1), [fullRoute[i][0] * r + fullRoute[i + 1][0] * or, fullRoute[i][1] * r + fullRoute[i + 1][1] * or]];
             writeToSource(routeFeature, actRoute);
           } else {
             // Forward animation
             if (actsum <= currentEnd) {
               // Return last two points of the line as final result
-              var _actRoute = _toConsumableArray(fullRoute.slice(fullRoute.length - 2, fullRoute.length));
-              writeToSource(routeFeature, _actRoute);
+              const actRoute = [...fullRoute.slice(fullRoute.length - 2, fullRoute.length)];
+              writeToSource(routeFeature, actRoute);
             }
 
             // Return coordinates from line end to current percentage point
-            var _r = (currentEnd - prevsum) / (actsum - prevsum);
-            var _or = 1.0 - _r;
-            var _actRoute2 = [[fullRoute[i][0] * _r + fullRoute[i + 1][0] * _or, fullRoute[i][1] * _r + fullRoute[i + 1][1] * _or]].concat(_toConsumableArray(fullRoute.slice(i + 1, fullRoute.length)));
-            writeToSource(routeFeature, _actRoute2);
+            const r = (currentEnd - prevsum) / (actsum - prevsum);
+            const or = 1.0 - r;
+            const actRoute = [[fullRoute[i][0] * r + fullRoute[i + 1][0] * or, fullRoute[i][1] * r + fullRoute[i + 1][1] * or], ...fullRoute.slice(i + 1, fullRoute.length)];
+            writeToSource(routeFeature, actRoute);
           }
-          _this.animationFrameID = requestAnimationFrame(_this.animateHighlightedRouteSegment);
+          this.animationFrameID = requestAnimationFrame(this.animateHighlightedRouteSegment);
         } else {
-          _this.resetRouteSegmentAnimation();
+          this.resetRouteSegmentAnimation();
         }
       }
     });
@@ -143,476 +127,364 @@ var RoutingVisualizer = exports.RoutingVisualizer = /*#__PURE__*/function () {
 
   // MetaAtlasCore To Editor
   // eslint-disable-next-line class-methods-use-this
-  return _createClass(RoutingVisualizer, [{
-    key: "getCurrentFocus",
-    value: function getCurrentFocus() {
-      return this.main.getCurrentFocus();
+  getCurrentFocus() {
+    return this.main.getCurrentFocus();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  filterWhereDimension(dimension) {
+    this.main.focusTo(dimension, false);
+  }
+
+  // Routing
+  setupRouting(map) {
+    this.map = map;
+    this.map.addSource(this.routeSourceName, {
+      type: 'geojson',
+      data: this.patchFeatureCollection
+    });
+    for (const layer of _routeLayers.routeLayers) {
+      layer.source = this.routeSourceName;
+      this.map.addLayer(layer);
     }
 
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "filterWhereDimension",
-    value: function filterWhereDimension(dimension) {
-      this.main.focusTo(dimension, false);
+    // Animation data
+    this.map.addSource(this.animateRouteSourceName, {
+      type: 'geojson',
+      data: this.animateRouteSegmentFeatureCollection
+    });
+    for (const layer of _routeLayers.routeAnimateLayers) {
+      layer.source = this.animateRouteSourceName;
+      this.map.addLayer(layer);
     }
+  }
 
-    // Routing
-  }, {
-    key: "setupRouting",
-    value: function setupRouting(map) {
-      this.map = map;
-      this.map.addSource(this.routeSourceName, {
-        type: 'geojson',
-        data: this.patchFeatureCollection
-      });
-      var _iterator = _createForOfIteratorHelper(_routeLayers.routeLayers),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var layer = _step.value;
-          layer.source = this.routeSourceName;
-          this.map.addLayer(layer);
-        }
+  // eslint-disable-next-line class-methods-use-this
+  async computeRoute(startMapObjectId, endMapObjectId) {
+    let wheelChairAccessibleRouting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let shouldAddOverviewSegment = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    let indexOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    this.currentPatchNumber = -1;
+    const generatedRoute = await (0, _routingHelpers.createRoute)(startMapObjectId, endMapObjectId, wheelChairAccessibleRouting, shouldAddOverviewSegment, indexOffset);
+    console.log('internal generated: ', generatedRoute);
 
-        // Animation data
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      this.map.addSource(this.animateRouteSourceName, {
-        type: 'geojson',
-        data: this.animateRouteSegmentFeatureCollection
-      });
-      var _iterator2 = _createForOfIteratorHelper(_routeLayers.routeAnimateLayers),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _layer = _step2.value;
-          _layer.source = this.animateRouteSourceName;
-          this.map.addLayer(_layer);
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+    // Generate textual instructions
+    (0, _routingHelpers.generateInstructions)(generatedRoute);
+    console.log(generatedRoute.segments);
+    return generatedRoute;
+  }
+  handleAllRouteUpdate(allSegments, userPosition, segmentIndex) {
+    // Get the LineString Feature of the route
+    const featureLineStringToUpdate = allSegments[segmentIndex].features.filter(f => f.geometry.type === 'LineString')[0];
+
+    // Create a LineString with the coordinates of the route that would be updated accordingly
+    const lineStringToUpdate = (0, _turf.lineString)(featureLineStringToUpdate.geometry.coordinates.slice(1));
+
+    // Create a subset of LineString that contains the first two coords of the route which actually represent the route edge
+    const subLine = (0, _turf.lineString)([featureLineStringToUpdate.geometry.coordinates[0], featureLineStringToUpdate.geometry.coordinates[1]]);
+
+    // Find the nearest point to the user position on the sub line and update the LineString.
+    const nearestPoint = (0, _nearestPointOnLine.nearestPointOnLine)(subLine, userPosition.sourceCoords);
+    lineStringToUpdate.geometry.coordinates.unshift(userPosition.sourceCoords, nearestPoint.geometry.coordinates);
+    const coordsToUpdate = lineStringToUpdate.geometry.coordinates;
+    const index = nearestPoint.properties.index;
+    const coordsToKeep = coordsToUpdate.slice(index);
+    lineStringToUpdate.geometry.coordinates = coordsToKeep;
+    lineStringToUpdate.geometry.coordinates.unshift(userPosition.sourceCoords);
+    lineStringToUpdate.properties = featureLineStringToUpdate.properties;
+    let featureIndex = -1;
+    allSegments[segmentIndex].features.map((f, i) => {
+      if (f.geometry.type === 'LineString') {
+        featureIndex = i;
       }
+    });
+
+    // Update the new LineString in the route
+    allSegments[segmentIndex].features[featureIndex] = lineStringToUpdate;
+    allSegments[segmentIndex].coordinates = lineStringToUpdate.geometry.coordinates;
+  }
+  async computeRoutes(mapObjectIds) {
+    let wheelChairAccessibleRouteOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (mapObjectIds.length < 2) {
+      console.warn('Invalid array passed to computeRoutes');
+      return undefined;
     }
+    console.log('calling computeRoutes with mapObjectIds: ', mapObjectIds);
+    const mergedRoute = {
+      segments: [],
+      walkingDistance: 0,
+      transportDistance: 0,
+      walkingTime: 0,
+      transportTime: 0,
+      distanceUnit: _interfaces.DISTANCE_UNIT,
+      speed: _interfaces.WALK_SPEED
+    };
+
+    // Dummy segment for overview segment
+    const dummySegment = {};
+    mergedRoute.segments.push(dummySegment);
+    let indexOffset = 1; // Index set to 1, since overview segment will be added to 0th index
 
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "computeRoute",
-    value: function () {
-      var _computeRoute = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(startMapObjectId, endMapObjectId) {
-        var wheelChairAccessibleRouting,
-          shouldAddOverviewSegment,
-          indexOffset,
-          generatedRoute,
-          _args = arguments;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
-            case 0:
-              wheelChairAccessibleRouting = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
-              shouldAddOverviewSegment = _args.length > 3 && _args[3] !== undefined ? _args[3] : true;
-              indexOffset = _args.length > 4 && _args[4] !== undefined ? _args[4] : 0;
-              this.currentPatchNumber = -1;
-              _context.n = 1;
-              return (0, _routingHelpers.createRoute)(startMapObjectId, endMapObjectId, wheelChairAccessibleRouting, shouldAddOverviewSegment, indexOffset);
-            case 1:
-              generatedRoute = _context.v;
-              console.log('internal generated: ', generatedRoute);
+    for (let index = 0; index < mapObjectIds.length - 1; index += 1) {
+      let startMapObjectId = mapObjectIds[index];
+      const endMapObjectId = mapObjectIds[index + 1];
+      const shouldAddOverviewSegment = true; // include overview segment in first route
 
-              // Generate textual instructions
-              (0, _routingHelpers.generateInstructions)(generatedRoute);
-              console.log(generatedRoute.segments);
-              return _context.a(2, generatedRoute);
+      const id = mapObjectIds[0];
+      if (typeof mapObjectIds[0] !== 'string') {
+        // Run queryRenderedFeatures.
+        const routeData = _routingStore.default.getState().data;
+        const point = this.map.project([id.sourceCoords[0], id.sourceCoords[1]]);
+        const feats = this.map.queryRenderedFeatures(point);
+        feats.map(f => {
+          if (routeData[_interfaces.RouteDimension.Edge].hasOwnProperty(f.properties.mapObjectId)) {
+            const edgeData = routeData[_interfaces.RouteDimension.Edge][f.properties.mapObjectId];
+            if (edgeData.lines.length > 0) {
+              startMapObjectId = f.properties.mapObjectId;
+            }
           }
-        }, _callee, this);
-      }));
-      function computeRoute(_x, _x2) {
-        return _computeRoute.apply(this, arguments);
+        });
       }
-      return computeRoute;
-    }()
-  }, {
-    key: "handleAllRouteUpdate",
-    value: function handleAllRouteUpdate(allSegments, userPosition, segmentIndex) {
-      // Get the LineString Feature of the route
-      var featureLineStringToUpdate = allSegments[segmentIndex].features.filter(function (f) {
-        return f.geometry.type === 'LineString';
-      })[0];
-
-      // Create a LineString with the coordinates of the route that would be updated accordingly
-      var lineStringToUpdate = (0, _turf.lineString)(featureLineStringToUpdate.geometry.coordinates.slice(1));
-
-      // Create a subset of LineString that contains the first two coords of the route which actually represent the route edge
-      var subLine = (0, _turf.lineString)([featureLineStringToUpdate.geometry.coordinates[0], featureLineStringToUpdate.geometry.coordinates[1]]);
 
-      // Find the nearest point to the user position on the sub line and update the LineString.
-      var nearestPoint = (0, _nearestPointOnLine.nearestPointOnLine)(subLine, userPosition.sourceCoords);
-      lineStringToUpdate.geometry.coordinates.unshift(userPosition.sourceCoords, nearestPoint.geometry.coordinates);
-      var coordsToUpdate = lineStringToUpdate.geometry.coordinates;
-      var index = nearestPoint.properties.index;
-      var coordsToKeep = coordsToUpdate.slice(index);
-      lineStringToUpdate.geometry.coordinates = coordsToKeep;
-      lineStringToUpdate.geometry.coordinates.unshift(userPosition.sourceCoords);
-      lineStringToUpdate.properties = featureLineStringToUpdate.properties;
-      var featureIndex = -1;
-      allSegments[segmentIndex].features.map(function (f, i) {
-        if (f.geometry.type === 'LineString') {
-          featureIndex = i;
-        }
-      });
+      // eslint-disable-next-line no-await-in-loop
+      const generatedRoute = await this.computeRoute(startMapObjectId, endMapObjectId, wheelChairAccessibleRouteOnly, shouldAddOverviewSegment, indexOffset);
+      const allSegments = generatedRoute.segments;
+      // if (typeof mapObjectIds[index] !== 'string' && typeof startMapObjectId === 'string') {
+      //   //Handle SectionOverview:
+      //   this.handleAllRouteUpdate(allSegments, id as UserPosition, 0);
 
-      // Update the new LineString in the route
-      allSegments[segmentIndex].features[featureIndex] = lineStringToUpdate;
-      allSegments[segmentIndex].coordinates = lineStringToUpdate.geometry.coordinates;
-    }
-  }, {
-    key: "computeRoutes",
-    value: function () {
-      var _computeRoutes = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(mapObjectIds) {
-        var _this2 = this;
-        var wheelChairAccessibleRouteOnly,
-          mergedRoute,
-          dummySegment,
-          indexOffset,
-          _loop,
-          index,
-          overviewSegment,
-          _args3 = arguments;
-        return _regenerator().w(function (_context3) {
-          while (1) switch (_context3.n) {
-            case 0:
-              wheelChairAccessibleRouteOnly = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : false;
-              if (!(mapObjectIds.length < 2)) {
-                _context3.n = 1;
-                break;
-              }
-              console.warn('Invalid array passed to computeRoutes');
-              return _context3.a(2, undefined);
-            case 1:
-              console.log('calling computeRoutes with mapObjectIds: ', mapObjectIds);
-              mergedRoute = {
-                segments: [],
-                walkingDistance: 0,
-                transportDistance: 0,
-                walkingTime: 0,
-                transportTime: 0,
-                distanceUnit: _interfaces.DISTANCE_UNIT,
-                speed: _interfaces.WALK_SPEED
-              }; // Dummy segment for overview segment
-              dummySegment = {};
-              mergedRoute.segments.push(dummySegment);
-              indexOffset = 1; // Index set to 1, since overview segment will be added to 0th index
-              _loop = /*#__PURE__*/_regenerator().m(function _loop() {
-                var startMapObjectId, endMapObjectId, shouldAddOverviewSegment, id, routeData, _point, feats, generatedRoute, allSegments, segmentOverview, j, segment;
-                return _regenerator().w(function (_context2) {
-                  while (1) switch (_context2.n) {
-                    case 0:
-                      startMapObjectId = mapObjectIds[index];
-                      endMapObjectId = mapObjectIds[index + 1];
-                      shouldAddOverviewSegment = true; // include overview segment in first route
-                      id = mapObjectIds[0];
-                      if (typeof mapObjectIds[0] !== 'string') {
-                        // Run queryRenderedFeatures.
-                        routeData = _routingStore["default"].getState().data;
-                        _point = _this2.map.project([id.sourceCoords[0], id.sourceCoords[1]]);
-                        feats = _this2.map.queryRenderedFeatures(_point);
-                        feats.map(function (f) {
-                          if (routeData[_interfaces.RouteDimension.Edge].hasOwnProperty(f.properties.mapObjectId)) {
-                            var edgeData = routeData[_interfaces.RouteDimension.Edge][f.properties.mapObjectId];
-                            if (edgeData.lines.length > 0) {
-                              startMapObjectId = f.properties.mapObjectId;
-                            }
-                          }
-                        });
-                      }
+      //   // Handle the second segment.
+      //   const secondSegmentFeatures = generatedRoute.segments[1].features;
+      //   if (secondSegmentFeatures.length < 3 && secondSegmentFeatures[0].geometry.type === 'Point') {
+      //     secondSegmentFeatures[0].geometry.coordinates = id.sourceCoords;
+      //     allSegments[1].coordinates = id.sourceCoords as any;
+      //   } else {
+      //     this.handleAllRouteUpdate(allSegments, id as UserPosition, 1);
+      //   }
 
-                      // eslint-disable-next-line no-await-in-loop
-                      _context2.n = 1;
-                      return _this2.computeRoute(startMapObjectId, endMapObjectId, wheelChairAccessibleRouteOnly, shouldAddOverviewSegment, indexOffset);
-                    case 1:
-                      generatedRoute = _context2.v;
-                      allSegments = generatedRoute.segments; // if (typeof mapObjectIds[index] !== 'string' && typeof startMapObjectId === 'string') {
-                      //   //Handle SectionOverview:
-                      //   this.handleAllRouteUpdate(allSegments, id as UserPosition, 0);
-                      //   // Handle the second segment.
-                      //   const secondSegmentFeatures = generatedRoute.segments[1].features;
-                      //   if (secondSegmentFeatures.length < 3 && secondSegmentFeatures[0].geometry.type === 'Point') {
-                      //     secondSegmentFeatures[0].geometry.coordinates = id.sourceCoords;
-                      //     allSegments[1].coordinates = id.sourceCoords as any;
-                      //   } else {
-                      //     this.handleAllRouteUpdate(allSegments, id as UserPosition, 1);
-                      //   }
-                      //   // Handle third segment
-                      //   const thirdSegmentFeatures = generatedRoute.segments[2].features;
-                      //   if (thirdSegmentFeatures.length < 3 && thirdSegmentFeatures.geometry.type === 'Point') {
-                      //     allSegments[1].features[0].geometry.coordinates = id.sourceCoords;
-                      //     allSegments[1].coordinates = id.sourceCoords as any;
-                      //   } else {
-                      //     this.handleAllRouteUpdate(allSegments, id as UserPosition, 2);
-                      //   }
-                      // }
-                      if (generatedRoute.segments.length > 0) {
-                        segmentOverview = generatedRoute.segments[0];
-                        segmentOverview.maneuverType = _routingHelpers.ManeuverType.SectionOverview;
-                        segmentOverview.instructions = ["".concat(segmentOverview.startEdge.name, " to ").concat(segmentOverview.endEdge.name)];
-                      }
-                      for (j = 0; j < generatedRoute.segments.length; j += 1) {
-                        segment = generatedRoute.segments[j];
-                        mergedRoute.segments.push(segment);
-                      }
-                      mergedRoute.walkingDistance += generatedRoute.walkingDistance;
-                      mergedRoute.transportDistance += generatedRoute.transportDistance;
-                      mergedRoute.walkingTime += generatedRoute.walkingTime;
-                      mergedRoute.transportTime += generatedRoute.transportTime;
+      //   // Handle third segment
+      //   const thirdSegmentFeatures = generatedRoute.segments[2].features;
+      //   if (thirdSegmentFeatures.length < 3 && thirdSegmentFeatures.geometry.type === 'Point') {
+      //     allSegments[1].features[0].geometry.coordinates = id.sourceCoords;
+      //     allSegments[1].coordinates = id.sourceCoords as any;
+      //   } else {
+      //     this.handleAllRouteUpdate(allSegments, id as UserPosition, 2);
+      //   }
+      // }
 
-                      // Increment by segment count
-                      indexOffset += generatedRoute.segments.length;
-                    case 2:
-                      return _context2.a(2);
-                  }
-                }, _loop);
-              });
-              index = 0;
-            case 2:
-              if (!(index < mapObjectIds.length - 1)) {
-                _context3.n = 4;
-                break;
-              }
-              return _context3.d(_regeneratorValues(_loop()), 3);
-            case 3:
-              index += 1;
-              _context3.n = 2;
-              break;
-            case 4:
-              if (mergedRoute.segments.length > 1) {
-                // Use 1 here because 1 dummy segment will always be included
-                overviewSegment = (0, _routingHelpers.generateOverviewSegment)(mergedRoute);
-                mergedRoute.segments[0] = overviewSegment;
-              } else {
-                mergedRoute.segments.length = 0; // Remove dummy segment
-              }
-              console.log('merged route: ', mergedRoute);
-              return _context3.a(2, mergedRoute);
-          }
-        }, _callee2);
-      }));
-      function computeRoutes(_x3) {
-        return _computeRoutes.apply(this, arguments);
+      if (generatedRoute.segments.length > 0) {
+        const segmentOverview = generatedRoute.segments[0];
+        segmentOverview.maneuverType = _routingHelpers.ManeuverType.SectionOverview;
+        segmentOverview.instructions = ["".concat(segmentOverview.startEdge.name, " to ").concat(segmentOverview.endEdge.name)];
       }
-      return computeRoutes;
-    }()
-  }, {
-    key: "updateRouteSource",
-    value: function updateRouteSource(updatedFeatureCollection) {
-      if (!this.map) return false;
-      this.patchFeatureCollection = updatedFeatureCollection;
-      var routeSource = this.map.getSource(this.routeSourceName);
-      if (routeSource) routeSource.setData(updatedFeatureCollection);
-      return true;
-    }
-  }, {
-    key: "updateAnimateRouteSource",
-    value: function updateAnimateRouteSource(updatedFeatureCollection) {
-      if (!this.map) return false;
-      this.animateRouteSegmentFeatureCollection = updatedFeatureCollection;
-      var routeSource = this.map.getSource(this.animateRouteSourceName);
-      if (routeSource) routeSource.setData(updatedFeatureCollection);
-      return true;
-    }
-  }, {
-    key: "setActiveRoute",
-    value: function setActiveRoute(route) {
-      this.route = route;
+      for (let j = 0; j < generatedRoute.segments.length; j += 1) {
+        const segment = generatedRoute.segments[j];
+        mergedRoute.segments.push(segment);
+      }
+      mergedRoute.walkingDistance += generatedRoute.walkingDistance;
+      mergedRoute.transportDistance += generatedRoute.transportDistance;
+      mergedRoute.walkingTime += generatedRoute.walkingTime;
+      mergedRoute.transportTime += generatedRoute.transportTime;
+
+      // Increment by segment count
+      indexOffset += generatedRoute.segments.length;
     }
-  }, {
-    key: "getActiveRoute",
-    value: function getActiveRoute() {
-      return this.route;
+    if (mergedRoute.segments.length > 1) {
+      // Use 1 here because 1 dummy segment will always be included
+      const overviewSegment = (0, _routingHelpers.generateOverviewSegment)(mergedRoute);
+      mergedRoute.segments[0] = overviewSegment;
+    } else {
+      mergedRoute.segments.length = 0; // Remove dummy segment
     }
-  }, {
-    key: "resetRouteSegmentAnimation",
-    value: function resetRouteSegmentAnimation() {
-      this.animationStartTime = Date.now();
-      cancelAnimationFrame(this.animationFrameID);
-      if (this.animateRouteSegmentFeatureCollection.features.length > 0) {
-        var routeFeature = this.animateRouteSegmentFeatureCollection.features[0];
-        //@ts-ignore
-        if (routeFeature.geometry.type === 'LineString') this.animateHighlightedRouteSegment();
-      }
+    console.log('merged route: ', mergedRoute);
+    return mergedRoute;
+  }
+  updateRouteSource(updatedFeatureCollection) {
+    if (!this.map) return false;
+    this.patchFeatureCollection = updatedFeatureCollection;
+    const routeSource = this.map.getSource(this.routeSourceName);
+    if (routeSource) routeSource.setData(updatedFeatureCollection);
+    return true;
+  }
+  updateAnimateRouteSource(updatedFeatureCollection) {
+    if (!this.map) return false;
+    this.animateRouteSegmentFeatureCollection = updatedFeatureCollection;
+    const routeSource = this.map.getSource(this.animateRouteSourceName);
+    if (routeSource) routeSource.setData(updatedFeatureCollection);
+    return true;
+  }
+  setActiveRoute(route) {
+    this.route = route;
+  }
+  getActiveRoute() {
+    return this.route;
+  }
+  resetRouteSegmentAnimation() {
+    this.animationStartTime = Date.now();
+    cancelAnimationFrame(this.animationFrameID);
+    if (this.animateRouteSegmentFeatureCollection.features.length > 0) {
+      const routeFeature = this.animateRouteSegmentFeatureCollection.features[0];
+      //@ts-ignore
+      if (routeFeature.geometry.type === 'LineString') this.animateHighlightedRouteSegment();
     }
-  }, {
-    key: "updateFeaturesToAnimate",
-    value: function updateFeaturesToAnimate(segmentNumber, whereDimensionForFeatures) {
-      if (this.route && this.route.segments.length > segmentNumber) {
-        var routeSegment = this.route.segments[segmentNumber];
-        // set features for animated segment source
-        if (routeSegment.features.length > 0) {
-          var lineFeaturesOfSegment =
-          // include where dimension here?
-          (0, _routingHelpers.getLineStringFeaturesOfRouteSegment)(routeSegment, whereDimensionForFeatures);
-          if (lineFeaturesOfSegment.length > 0) {
-            this.updateAnimateRouteSource({
-              type: 'FeatureCollection',
-              features: lineFeaturesOfSegment
-            });
-            var ls = lineFeaturesOfSegment[0];
-            //@ts-ignore
-            var nearest = (0, _nearestPointOnLine.nearestPointOnLine)(ls, (0, _helpers.point)(lineFeaturesOfSegment[0].geometry.coordinates[0]));
-            var toDist = (0, _length["default"])(ls) - nearest.properties.location;
-            this.end = {
-              from: 0,
-              to: toDist
-            };
-          } else {
-            this.updateAnimateRouteSource({
-              type: 'FeatureCollection',
-              features: []
-            });
-          }
-          this.resetRouteSegmentAnimation();
+  }
+  updateFeaturesToAnimate(segmentNumber, whereDimensionForFeatures) {
+    if (this.route && this.route.segments.length > segmentNumber) {
+      const routeSegment = this.route.segments[segmentNumber];
+      // set features for animated segment source
+      if (routeSegment.features.length > 0) {
+        const lineFeaturesOfSegment =
+        // include where dimension here?
+        (0, _routingHelpers.getLineStringFeaturesOfRouteSegment)(routeSegment, whereDimensionForFeatures);
+        if (lineFeaturesOfSegment.length > 0) {
+          this.updateAnimateRouteSource({
+            type: 'FeatureCollection',
+            features: lineFeaturesOfSegment
+          });
+          const ls = lineFeaturesOfSegment[0];
+          //@ts-ignore
+          const nearest = (0, _nearestPointOnLine.nearestPointOnLine)(ls, (0, _helpers.point)(lineFeaturesOfSegment[0].geometry.coordinates[0]));
+          const toDist = (0, _length.default)(ls) - nearest.properties.location;
+          this.end = {
+            from: 0,
+            to: toDist
+          };
+        } else {
+          this.updateAnimateRouteSource({
+            type: 'FeatureCollection',
+            features: []
+          });
         }
+        this.resetRouteSegmentAnimation();
       }
     }
-  }, {
-    key: "highlightRouteSegment",
-    value: function highlightRouteSegment(segmentNumberToHighlight) {
-      var updateFilters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var route = this.route;
-      if (route && route.segments.length > segmentNumberToHighlight) {
-        if (route.segments[segmentNumberToHighlight].coordinates.length > 0) {
-          this.highlightedSegmentNumber = segmentNumberToHighlight;
-          var routeSegment = route.segments[segmentNumberToHighlight];
-          var segmentWhereDimension = routeSegment.maneuverType === _routingHelpers.ManeuverType.ExitPortal || routeSegment.maneuverType === _routingHelpers.ManeuverType.Static ? routeSegment.endEdge.whereDimension : routeSegment.startEdge.whereDimension;
-          var routeFeaturesToUse = this.patchFeatureCollection.features;
+  }
+  highlightRouteSegment(segmentNumberToHighlight) {
+    let updateFilters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const {
+      route
+    } = this;
+    if (route && route.segments.length > segmentNumberToHighlight) {
+      if (route.segments[segmentNumberToHighlight].coordinates.length > 0) {
+        this.highlightedSegmentNumber = segmentNumberToHighlight;
+        const routeSegment = route.segments[segmentNumberToHighlight];
+        const segmentWhereDimension = routeSegment.maneuverType === _routingHelpers.ManeuverType.ExitPortal || routeSegment.maneuverType === _routingHelpers.ManeuverType.Static ? routeSegment.endEdge.whereDimension : routeSegment.startEdge.whereDimension;
+        let routeFeaturesToUse = this.patchFeatureCollection.features;
 
-          // update visible route features if required
-          var segmentPatchNumber = routeSegment.features[0].properties.patchNumber;
-          if (this.currentPatchNumber !== segmentPatchNumber) {
-            this.currentPatchNumber = segmentPatchNumber;
-            var featureCollectionToDraw = {
-              type: 'FeatureCollection',
-              features: (0, _routingHelpers.getFeaturesForPatch)(route, segmentPatchNumber, {
-                includeOverviewFeatures: (0, _routingHelpers.isOverviewSegment)(routeSegment),
-                patchNumberForOverviewFeatures: segmentPatchNumber
-              })
-            };
-            routeFeaturesToUse = featureCollectionToDraw.features;
-          }
-          if (segmentWhereDimension && segmentWhereDimension !== this.getCurrentFocus() && updateFilters) {
-            this.filterWhereDimension(segmentWhereDimension);
-          }
+        // update visible route features if required
+        const segmentPatchNumber = routeSegment.features[0].properties.patchNumber;
+        if (this.currentPatchNumber !== segmentPatchNumber) {
+          this.currentPatchNumber = segmentPatchNumber;
+          const featureCollectionToDraw = {
+            type: 'FeatureCollection',
+            features: (0, _routingHelpers.getFeaturesForPatch)(route, segmentPatchNumber, {
+              includeOverviewFeatures: (0, _routingHelpers.isOverviewSegment)(routeSegment),
+              patchNumberForOverviewFeatures: segmentPatchNumber
+            })
+          };
+          routeFeaturesToUse = featureCollectionToDraw.features;
+        }
+        if (segmentWhereDimension && segmentWhereDimension !== this.getCurrentFocus() && updateFilters) {
+          this.filterWhereDimension(segmentWhereDimension);
+        }
 
-          // update highlighted route segment
-          var updatedFeatures = (0, _routingHelpers.highlightRouteSegment)(routeFeaturesToUse, segmentNumberToHighlight);
-          this.updateRouteSource({
+        // update highlighted route segment
+        const updatedFeatures = (0, _routingHelpers.highlightRouteSegment)(routeFeaturesToUse, segmentNumberToHighlight);
+        this.updateRouteSource({
+          type: 'FeatureCollection',
+          features: updatedFeatures
+        });
+        if (!(0, _routingHelpers.isOverviewSegment)(routeSegment)) {
+          this.updateFeaturesToAnimate(segmentNumberToHighlight, segmentWhereDimension);
+        } else {
+          // clear animation source
+          this.updateAnimateRouteSource({
             type: 'FeatureCollection',
-            features: updatedFeatures
+            features: []
           });
-          if (!(0, _routingHelpers.isOverviewSegment)(routeSegment)) {
-            this.updateFeaturesToAnimate(segmentNumberToHighlight, segmentWhereDimension);
-          } else {
-            // clear animation source
-            this.updateAnimateRouteSource({
-              type: 'FeatureCollection',
-              features: []
-            });
-          }
+        }
 
-          // animate camera to segment
-          if (routeSegment) {
-            var getStartCoords = function getStartCoords(feature) {
+        // animate camera to segment
+        if (routeSegment) {
+          const getStartCoords = feature => {
+            //@ts-ignore
+            if (feature.geometry.type === 'Point') {
               //@ts-ignore
-              if (feature.geometry.type === 'Point') {
-                //@ts-ignore
-                return feature.geometry.coordinates;
-              }
+              return feature.geometry.coordinates;
+            }
 
-              //@ts-ignore
-              return feature.geometry.coordinates[0];
-            };
-            var canvas = this.map.getCanvas();
-            var w = canvas.clientWidth;
-            var h = canvas.clientHeight;
-            var fitBoundsConfig = {
-              padding: {
-                top: h * 0.2,
-                bottom: h * 0.2,
-                left: w * 0.2,
-                right: w * 0.2
-              },
-              duration: 1000,
-              bearing: this.map.getBearing(),
-              pitch: this.map.getPitch()
-            };
-            if (routeSegment.coordinates.length > 1) {
-              var currentPatchFeatures = (0, _routingHelpers.getPatch)(route, routeSegment.patchNumber);
-              var startCoords = getStartCoords(currentPatchFeatures[0]);
-              // let index = 0;
-              // for (index = 0; index < currentPatchFeatures.length; index++) {
-              //   const element = currentPatchFeatures[index];
-              //   if (element.properties.segmentNumber === segmentNumberToHighlight) {
-              //     startCoords = getStartCoords(element);
-              //   }
-              // }
-              var sw = new _maplibreGl["default"].LngLat(startCoords[0], startCoords[1]);
-              var ne = new _maplibreGl["default"].LngLat(startCoords[0], startCoords[1]);
-              var llb = new _maplibreGl["default"].LngLatBounds(sw, ne);
-              for (var index = 0; index < currentPatchFeatures.length; index++) {
-                var element = currentPatchFeatures[index];
-                if (element.geometry.type === 'Point') {
-                  llb.extend(element.geometry.coordinates);
-                } else {
-                  //@ts-ignore
-                  var _iterator3 = _createForOfIteratorHelper(element.geometry.coordinates),
-                    _step3;
-                  try {
-                    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                      var coord = _step3.value;
-                      llb.extend(coord);
-                    }
-                  } catch (err) {
-                    _iterator3.e(err);
-                  } finally {
-                    _iterator3.f();
-                  }
+            //@ts-ignore
+            return feature.geometry.coordinates[0];
+          };
+          const canvas = this.map.getCanvas();
+          const w = canvas.clientWidth;
+          const h = canvas.clientHeight;
+          const fitBoundsConfig = {
+            padding: {
+              top: h * 0.2,
+              bottom: h * 0.2,
+              left: w * 0.2,
+              right: w * 0.2
+            },
+            duration: 1000,
+            bearing: this.map.getBearing(),
+            pitch: this.map.getPitch()
+          };
+          if (routeSegment.coordinates.length > 1) {
+            const currentPatchFeatures = (0, _routingHelpers.getPatch)(route, routeSegment.patchNumber);
+            const startCoords = getStartCoords(currentPatchFeatures[0]);
+            // let index = 0;
+            // for (index = 0; index < currentPatchFeatures.length; index++) {
+            //   const element = currentPatchFeatures[index];
+            //   if (element.properties.segmentNumber === segmentNumberToHighlight) {
+            //     startCoords = getStartCoords(element);
+            //   }
+            // }
+            const sw = new _maplibreGl.default.LngLat(startCoords[0], startCoords[1]);
+            const ne = new _maplibreGl.default.LngLat(startCoords[0], startCoords[1]);
+            const llb = new _maplibreGl.default.LngLatBounds(sw, ne);
+            for (let index = 0; index < currentPatchFeatures.length; index++) {
+              const element = currentPatchFeatures[index];
+              if (element.geometry.type === 'Point') {
+                llb.extend(element.geometry.coordinates);
+              } else {
+                //@ts-ignore
+                for (const coord of element.geometry.coordinates) {
+                  llb.extend(coord);
                 }
               }
-              this.map.fitBounds(llb, fitBoundsConfig);
-            } else {
-              // Translate the point slightly to get another point which can used for the fitBounds function.
-              var transformedFeatures = {
-                type: 'FeatureCollection',
-                features: [(0, _helpers.point)(routeSegment.coordinates[0])]
-              };
-              var forwardTransformed = (0, _transformTranslate.transformTranslate)(transformedFeatures, 0.025, 3).features[0].geometry.coordinates;
-              var reverseTransformed = (0, _transformTranslate.transformTranslate)(transformedFeatures, -0.025, -3).features[0].geometry.coordinates;
-              var bbox = [reverseTransformed, forwardTransformed];
-              this.map.fitBounds(bbox, fitBoundsConfig);
             }
+            this.map.fitBounds(llb, fitBoundsConfig);
+          } else {
+            // Translate the point slightly to get another point which can used for the fitBounds function.
+            const transformedFeatures = {
+              type: 'FeatureCollection',
+              features: [(0, _helpers.point)(routeSegment.coordinates[0])]
+            };
+            const forwardTransformed = (0, _transformTranslate.transformTranslate)(transformedFeatures, 0.025, 3).features[0].geometry.coordinates;
+            const reverseTransformed = (0, _transformTranslate.transformTranslate)(transformedFeatures, -0.025, -3).features[0].geometry.coordinates;
+            const bbox = [reverseTransformed, forwardTransformed];
+            this.map.fitBounds(bbox, fitBoundsConfig);
           }
-        } else {
-          console.log('at vertical portal segment, ignoring!');
         }
-        console.log(route.segments[segmentNumberToHighlight].instructions);
       } else {
-        console.warn('Invalid segment number passed to highlightRouteSegment');
+        console.log('at vertical portal segment, ignoring!');
       }
+      console.log(route.segments[segmentNumberToHighlight].instructions);
+    } else {
+      console.warn('Invalid segment number passed to highlightRouteSegment');
     }
-  }, {
-    key: "clearRoute",
-    value: function clearRoute() {
-      var featureCollectionToDraw = {
-        type: 'FeatureCollection',
-        features: []
-      };
-      this.updateRouteSource(featureCollectionToDraw);
-      this.updateAnimateRouteSource(featureCollectionToDraw);
-      this.route = null;
-      cancelAnimationFrame(this.animationFrameID);
-    }
-  }]);
-}();
+  }
+  clearRoute() {
+    const featureCollectionToDraw = {
+      type: 'FeatureCollection',
+      features: []
+    };
+    this.updateRouteSource(featureCollectionToDraw);
+    this.updateAnimateRouteSource(featureCollectionToDraw);
+    this.route = null;
+    cancelAnimationFrame(this.animationFrameID);
+  }
+}
+exports.RoutingVisualizer = RoutingVisualizer;
 //# sourceMappingURL=index.js.map