mobility-toolbox-js 2.0.0-beta.30 → 2.0.0-beta.34

package/ol/controls/RoutingControl.js

@@ -1,388 +1,683 @@
-import { Feature } from "ol";
-import { LineString, Point } from "ol/geom";
-import { Modify } from "ol/interaction";
-import { unByKey } from "ol/Observable";
-import { click } from "ol/events/condition";
-import { GeoJSON } from "ol/format";
-import { buffer } from "ol/extent";
-import { fromLonLat, toLonLat } from "ol/proj";
-import GeomType from "ol/geom/GeometryType";
-import { RoutingAPI } from "../../api";
-import Control from "../../common/controls/Control";
-import RoutingLayer from "../layers/RoutingLayer";
-const REGEX_VIA_POINT = /^([^@$!\n]*)(@?([\d.]+),([\d.]+))?(\$?([a-zA-Z0-9]{0,2}))$/;
-const REGEX_VIA_POINT_COORD = /^([\d.]+),([\d.]+)$/;
-const REGEX_VIA_POINT_STATION_ID = /^!([^$]*)(\$?([a-zA-Z0-9]{0,2}))$/;
-const STOP_FETCH_ABORT_CONTROLLER_KEY = "stop-fetch";
-const getFlatCoordinatesFromSegments = (segmentArray) => {
-  const coords = [];
-  segmentArray.forEach((seg) => {
-    coords.push(...seg.getGeometry().getCoordinates());
-  });
-  return coords;
-};
-class RoutingControl extends Control {
-  constructor(options = {}) {
-    super(options);
-    Object.defineProperties(this, {
-      mot: {
-        get: () => this.get("mot"),
-        set: (newMot) => {
-          if (newMot) {
-            this.set("mot", newMot);
-            if (this.viaPoints) {
-              this.drawRoute();
-            }
-          }
-        }
-      },
-      loading: {
-        get: () => this.get("loading"),
-        set: (newLoading) => {
-          this.set("loading", newLoading);
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-      },
-      modify: {
-        get: () => this.get("modify"),
-        set: (modify) => {
-          this.set("modify", modify);
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
         }
-      }
-    });
-    this.loading = false;
-    this.graphs = options.graphs || [["osm", 0, 99]];
-    this.mot = options.mot || "bus";
-    this.modify = options.modify !== false;
-    this.routingApiParams = options.routingApiParams || {};
-    this.useRawViaPoints = options.useRawViaPoints || false;
-    this.snapToClosestStation = options.snapToClosestStation || false;
-    this.cacheStationData = {};
-    this.abortControllers = [];
-    this.apiKey = options.apiKey;
-    this.stopsApiKey = options.stopsApiKey || this.apiKey;
-    this.segments = [];
-    this.stopsApiUrl = options.stopsApiUrl || "https://api.geops.io/stops/v1/";
-    this.api = new RoutingAPI({
-      ...options
-    });
-    this.routingLayer = options.routingLayer || new RoutingLayer({
-      name: "routing-layer",
-      style: options.style
-    });
-    this.onRouteError = options.onRouteError || ((error) => {
-      this.dispatchEvent({
-        type: "change:route",
-        target: this
-      });
-      this.reset();
-      console.error(error);
-    });
-    this.viaPoints = [];
-    this.onMapClick = this.onMapClick.bind(this);
-    this.onModifyEnd = this.onModifyEnd.bind(this);
-    this.onModifyStart = this.onModifyStart.bind(this);
-    this.apiChangeListener = () => this.drawRoute();
-    this.createModifyInteraction();
-  }
-  static getGraphsResolutions(graphs, map) {
-    const view = map.getView();
-    return graphs.map(([, minZoom, maxZoom]) => [
-      view.getResolutionForZoom(minZoom),
-      view.getResolutionForZoom(maxZoom || minZoom + 1)
-    ]);
-  }
-  addViaPoint(coordinatesOrString, index = -1, overwrite = 0) {
-    this.viaPoints.splice(index === -1 ? this.viaPoints.length : index, overwrite, coordinatesOrString);
-    this.drawRoute();
-    this.dispatchEvent({
-      type: "change:route",
-      target: this
-    });
-  }
-  removeViaPoint(index = this.viaPoints.length - 1) {
-    if (this.viaPoints.length && this.viaPoints[index]) {
-      this.viaPoints.splice(index, 1);
     }
-    this.drawRoute();
-    this.dispatchEvent({
-      type: "change:route",
-      target: this
-    });
-  }
-  setViaPoints(coordinateArray) {
-    this.viaPoints = [...coordinateArray];
-    this.drawRoute();
-    this.dispatchEvent({
-      type: "change:route",
-      target: this
-    });
-  }
-  reset() {
-    this.abortRequests();
-    this.viaPoints = [];
-    this.routingLayer.olLayer.getSource().clear();
-    this.dispatchEvent({
-      type: "change:route",
-      target: this
-    });
-  }
-  abortRequests() {
-    this.graphs.forEach(([graph]) => {
-      if (this.abortControllers[graph]) {
-        this.abortControllers[graph].abort();
-      }
-      this.abortControllers[graph] = new AbortController();
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ol_1 = require("ol");
+var geom_1 = require("ol/geom");
+var interaction_1 = require("ol/interaction");
+var Observable_1 = require("ol/Observable");
+var condition_1 = require("ol/events/condition");
+var format_1 = require("ol/format");
+var extent_1 = require("ol/extent");
+var proj_1 = require("ol/proj");
+var GeometryType_1 = require("ol/geom/GeometryType");
+var api_1 = require("../../api");
+var Control_1 = require("../../common/controls/Control");
+var RoutingLayer_1 = require("../layers/RoutingLayer");
+// Examples for a single hop:
+// basel sbb a station named "basel sbb"
+// ZUE, station "Zürich HB" by its common abbreviation
+// Zürich Hauptbahnhof or HBF Zürich are all valid synonyms für "Zürich HB"
+// @47.37811,8.53935 a station at position 47.37811, 8.53935
+// @47.37811,8.53935$4 track 4 in a station at position 47.37811, 8.53935
+// zürich hb@47.37811,8.53935$8 track 8 in station "Zürich HB" at position 47.37811, 8.53935
+/** @private */
+var REGEX_VIA_POINT = /^([^@$!\n]*)(@?([\d.]+),([\d.]+))?(\$?([a-zA-Z0-9]{0,2}))$/;
+// Examples for a single hop:
+//
+// 47.37811,8.53935 a position 47.37811, 8.53935
+/** @private */
+var REGEX_VIA_POINT_COORD = /^([\d.]+),([\d.]+)$/;
+// Examples for a single hop:
+//
+// !8596126 a station with id 8596126
+// !8596126$4 a station with id 8596126
+/** @private */
+var REGEX_VIA_POINT_STATION_ID = /^!([^$]*)(\$?([a-zA-Z0-9]{0,2}))$/;
+/** @private */
+var STOP_FETCH_ABORT_CONTROLLER_KEY = 'stop-fetch';
+/** @private */
+var getFlatCoordinatesFromSegments = function (segmentArray) {
+    var coords = [];
+    segmentArray.forEach(function (seg) {
+        coords.push.apply(coords, seg.getGeometry().getCoordinates());
     });
-    this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]?.abort();
-    this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY] = new AbortController();
-    this.loading = false;
-  }
-  drawRoute() {
-    this.abortRequests();
-    this.routingLayer.olLayer.getSource().clear();
-    if (!this.viaPoints.length) {
-      return null;
-    }
-    if (this.viaPoints.length === 1) {
-      return this.drawViaPoint(this.viaPoints[0], 0, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]);
+    return coords;
+};
+/**
+ * Display a route of a specified mean of transport.
+ *
+ * @example
+ * import { Map } from 'ol';
+ * import { RoutingControl } from 'mobility-toolbox-js/ol';
+ *
+ * const map = new Map({
+ *   target: 'map'
+ * });
+ *
+ * const control = new RoutingControl();
+ *
+ * control.attachToMap(map)
+ *
+ * @classproperty {string} apiKey - Key used for RoutingApi requests.
+ * @classproperty {string} stopsApiKey - Key used for Stop lookup requests (defaults to apiKey).
+ * @classproperty {string} stopsApiUrl - Url used for Stop lookup requests (defaults to https://api.geops.io/stops/v1/lookup/).
+ * @classproperty {Array.<Array<graph="osm", minZoom=0, maxZoom=99>>} graphs - Array of routing graphs and min/max zoom levels. If you use the control in combination with the [geOps Maps API](https://developer.geops.io/apis/maps/), you may want to use the optimal level of generalizations: "[['gen4', 0, 8], ['gen3', 8, 9], ['gen2', 9, 11], ['gen1', 11, 13], ['osm', 13, 99]]"
+ * @classproperty {string} mot - Mean of transport to be used for routing.
+ * @classproperty {object} routingApiParams - object of additional parameters to pass to the routing api request.
+ * @classproperty {object} snapToClosestStation - If true, the routing will snap the coordinate to the closest station. Default to false.
+ * @classproperty {boolean} useRawViaPoints - Experimental property. Wen true, it allows the user to add via points using different kind of string. See "via" parameter defined by the [geOps Routing API](https://developer.geops.io/apis/routing/). Default to false, only array of coordinates and station's id are supported as via points.
+ * @classproperty {RoutingLayer|Layer} routingLayer - Layer for adding route features.
+ * @classproperty {function} onRouteError - Callback on error.
+ * @classproperty {boolean} loading - True if the control is requesting the backend.
+ * @see <a href="/example/ol-routing">Openlayers routing example</a>
+ *
+ * @extends {Control}
+ * @implements {RoutingInterface}
+ */
+var RoutingControl = /** @class */ (function (_super) {
+    __extends(RoutingControl, _super);
+    function RoutingControl(options) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, options) || this;
+        Object.defineProperties(_this, {
+            mot: {
+                get: function () { return _this.get('mot'); },
+                set: function (newMot) {
+                    if (newMot) {
+                        _this.set('mot', newMot);
+                        if (_this.viaPoints) {
+                            _this.drawRoute();
+                        }
+                    }
+                },
+            },
+            loading: {
+                get: function () { return _this.get('loading'); },
+                set: function (newLoading) {
+                    _this.set('loading', newLoading);
+                },
+            },
+            modify: {
+                get: function () { return _this.get('modify'); },
+                set: function (modify) {
+                    _this.set('modify', modify);
+                },
+            },
+        });
+        /** True if the control is requesting the backend. */
+        _this.loading = false;
+        /** @ignore */
+        _this.graphs = options.graphs || [['osm', 0, 99]];
+        /** @ignore */
+        _this.mot = options.mot || 'bus';
+        /** @ignore */
+        _this.modify = options.modify !== false;
+        /** @ignore */
+        _this.routingApiParams = options.routingApiParams || {};
+        /** @ignore */
+        _this.useRawViaPoints = options.useRawViaPoints || false;
+        /** @ignore */
+        _this.snapToClosestStation = options.snapToClosestStation || false;
+        /** @ignore */
+        _this.cacheStationData = {};
+        /** @ignore */
+        _this.abortControllers = [];
+        /** @ignore */
+        _this.apiKey = options.apiKey;
+        /** @ignore */
+        _this.stopsApiKey = options.stopsApiKey || _this.apiKey;
+        /** @ignore */
+        _this.segments = [];
+        /** @ignore */
+        _this.stopsApiUrl = options.stopsApiUrl || 'https://api.geops.io/stops/v1/';
+        /** @ignore */
+        _this.api = new api_1.RoutingAPI(__assign({}, options));
+        /** @ignore */
+        _this.routingLayer =
+            options.routingLayer ||
+                new RoutingLayer_1.default({
+                    name: 'routing-layer',
+                    style: options.style,
+                });
+        /** @ignore */
+        _this.onRouteError =
+            options.onRouteError ||
+                (function (error) {
+                    _this.dispatchEvent({
+                        type: 'change:route',
+                        target: _this,
+                    });
+                    _this.reset();
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+        /** @ignore */
+        _this.viaPoints = [];
+        /** @ignore */
+        _this.onMapClick = _this.onMapClick.bind(_this);
+        /** @ignore */
+        _this.onModifyEnd = _this.onModifyEnd.bind(_this);
+        /** @ignore */
+        _this.onModifyStart = _this.onModifyStart.bind(_this);
+        /** @ignore */
+        _this.apiChangeListener = function () { return _this.drawRoute(); };
+        /** @ignore */
+        _this.createModifyInteraction();
+        return _this;
     }
-    const formattedViaPoints = this.viaPoints.map((viaPoint) => {
-      if (Array.isArray(viaPoint)) {
-        const projection = this.map.getView().getProjection();
-        const [lon, lat] = toLonLat(viaPoint, projection);
-        return this.snapToClosestStation ? [`@${lat}`, lon] : [lat, lon];
-      }
-      return this.useRawViaPoints ? viaPoint : `!${viaPoint}`;
-    });
-    this.loading = true;
-    this.routingLayer.olLayer.getSource().clear();
-    this.viaPoints.forEach((viaPoint, idx) => this.drawViaPoint(viaPoint, idx, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]));
-    return Promise.all(this.graphs.map(([graph], index) => {
-      return this.api.route({
-        graph,
-        via: `${formattedViaPoints.join("|")}`,
-        mot: `${this.mot}`,
-        "resolve-hops": false,
-        elevation: false,
-        "coord-radius": 100,
-        "coord-punish": 1e3,
-        ...this.routingApiParams
-      }, this.abortControllers[graph]).then((featureCollection) => {
-        this.segments = this.format.readFeatures(featureCollection);
-        if (this.mot === "foot") {
-          const uniqueVias = this.segments.reduce((resultVias, currentFeat) => {
-            const segTrg = currentFeat.get("trg");
-            return resultVias.find((via) => via[0] === segTrg[0] && via[1] === segTrg[1]) ? resultVias : [...resultVias, segTrg];
-          }, []);
-          this.segments = uniqueVias.map((via) => {
-            const viaSegments = this.segments.filter((seg) => {
-              const segTrg = seg.get("trg");
-              return segTrg[0] === via[0] && segTrg[1] === via[1];
-            });
-            const coords2 = getFlatCoordinatesFromSegments(viaSegments);
-            return new Feature({
-              geometry: new LineString(coords2)
-            });
-          });
-        }
-        const coords = getFlatCoordinatesFromSegments(this.segments);
-        const routeFeature = new Feature({
-          geometry: new LineString(coords)
+    /**
+     * Calculate at which resolutions corresponds each generalizations.
+     *
+     * @private
+     */
+    RoutingControl.getGraphsResolutions = function (graphs, map) {
+        var view = map.getView();
+        return graphs.map(function (_a) {
+            var minZoom = _a[1], maxZoom = _a[2];
+            return [
+                view.getResolutionForZoom(minZoom),
+                view.getResolutionForZoom(maxZoom || minZoom + 1),
+            ];
         });
-        routeFeature.set("graph", graph);
-        routeFeature.set("mot", this.mot);
-        routeFeature.set("minResolution", this.graphsResolutions[index][0]);
-        routeFeature.set("maxResolution", this.graphsResolutions[index][1]);
-        this.routingLayer.olLayer.getSource().addFeature(routeFeature);
-        this.loading = false;
-      }).catch((error) => {
-        if (error.name === "AbortError") {
-          return;
-        }
-        this.segments = [];
+    };
+    /**
+     * Adds/Replaces a viaPoint to the viaPoints array and redraws route:
+     *   Adds a viaPoint at end of array by default.
+     *   If an index is passed a viaPoint is added at the specified index.
+     *   If an index is passed and overwrite x is > 0, x viaPoints at the specified
+     *     index are replaced with a single new viaPoint.
+     * @param {number[]|string} coordinates Array of coordinates
+     * @param {number} [index=-1] Integer representing the index of the added viaPoint. If not specified, the viaPoint is added at the end of the array.
+     * @param {number} [overwrite=0] Marks the number of viaPoints that are removed at the specified index on add.
+     */
+    RoutingControl.prototype.addViaPoint = function (coordinatesOrString, index, overwrite) {
+        if (index === void 0) { index = -1; }
+        if (overwrite === void 0) { overwrite = 0; }
+        /* Add/Insert/Overwrite viapoint and redraw route */
+        this.viaPoints.splice(index === -1 ? this.viaPoints.length : index, overwrite, coordinatesOrString);
+        this.drawRoute();
         this.dispatchEvent({
-          type: "error",
-          target: this
+            type: 'change:route',
+            target: this,
         });
-        this.onRouteError(error, this);
-        this.loading = false;
-      });
-    }));
-  }
-  drawViaPoint(viaPoint, idx, abortController) {
-    const pointFeature = new Feature();
-    pointFeature.set("viaPointIdx", idx);
-    if (Array.isArray(viaPoint)) {
-      pointFeature.setGeometry(new Point(viaPoint));
-      this.routingLayer.olLayer.getSource().addFeature(pointFeature);
-      return Promise.resolve(pointFeature);
-    }
-    if (!this.useRawViaPoints || REGEX_VIA_POINT_STATION_ID.test(viaPoint)) {
-      let stationId;
-      let track2;
-      if (this.useRawViaPoints) {
-        [, stationId, , track2] = REGEX_VIA_POINT_STATION_ID.exec(viaPoint);
-      } else {
-        [stationId, track2] = viaPoint.split("$");
-      }
-      return fetch(`${this.stopsApiUrl}lookup/${stationId}?key=${this.stopsApiKey}`, { signal: abortController.signal }).then((res) => res.json()).then((stationData) => {
-        const { coordinates } = stationData.features[0].geometry;
-        this.cacheStationData[viaPoint] = fromLonLat(coordinates);
-        pointFeature.set("viaPointTrack", track2);
-        pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
-        this.routingLayer.olLayer.getSource().addFeature(pointFeature);
-        return pointFeature;
-      }).catch((error) => {
-        if (error.name === "AbortError") {
-          return;
+    };
+    /**
+     * Removes a viaPoint at the passed array index and redraws route
+     * By default the last viaPoint is removed.
+     * @param {number} index Integer representing the index of the viaPoint to delete.
+     */
+    RoutingControl.prototype.removeViaPoint = function (index) {
+        if (index === void 0) { index = this.viaPoints.length - 1; }
+        /* Remove viapoint and redraw route */
+        if (this.viaPoints.length && this.viaPoints[index]) {
+            this.viaPoints.splice(index, 1);
         }
+        this.drawRoute();
         this.dispatchEvent({
-          type: "error",
-          target: this
+            type: 'change:route',
+            target: this,
         });
-        this.onRouteError(error, this);
-        this.loading = false;
-      });
-    }
-    if (this.useRawViaPoints && REGEX_VIA_POINT_COORD.test(viaPoint)) {
-      const [lat2, lon2] = REGEX_VIA_POINT_COORD.exec(viaPoint);
-      const coordinates = fromLonLat([parseFloat(lon2), parseFloat(lat2)], this.map.getView().getProjection());
-      pointFeature.setGeometry(new Point(coordinates));
-      this.routingLayer.olLayer.getSource().addFeature(pointFeature);
-      return Promise.resolve(pointFeature);
-    }
-    const [, stationName, , lat, lon, , track] = REGEX_VIA_POINT.exec(viaPoint);
-    if (lon && lat) {
-      const coordinates = fromLonLat([parseFloat(lon), parseFloat(lat)], this.map.getView().getProjection());
-      pointFeature.set("viaPointTrack", track);
-      pointFeature.setGeometry(new Point(coordinates));
-      this.routingLayer.olLayer.getSource().addFeature(pointFeature);
-      return Promise.resolve(pointFeature);
-    }
-    if (stationName) {
-      return fetch(`${this.stopsApiUrl}?key=${this.stopsApiKey}&q=${stationName}&limit=1`, { signal: abortController.signal }).then((res) => res.json()).then((stationData) => {
-        const { coordinates } = stationData.features[0].geometry;
-        this.cacheStationData[viaPoint] = fromLonLat(coordinates);
-        pointFeature.set("viaPointTrack", track);
-        pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
-        this.routingLayer.olLayer.getSource().addFeature(pointFeature);
-        return pointFeature;
-      }).catch((error) => {
+    };
+    /**
+     * Replaces the current viaPoints with a new coordinate array.
+     * @param {Array<Array<number>>} coordinateArray Array of nested coordinates
+     */
+    RoutingControl.prototype.setViaPoints = function (coordinateArray) {
+        this.viaPoints = __spreadArray([], coordinateArray, true);
+        this.drawRoute();
         this.dispatchEvent({
-          type: "error",
-          target: this
+            type: 'change:route',
+            target: this,
         });
-        this.onRouteError(error, this);
+    };
+    /**
+     * Removes all viaPoints, clears the source and triggers a change event
+     */
+    RoutingControl.prototype.reset = function () {
+        // Clear viaPoints and source
+        this.abortRequests();
+        this.viaPoints = [];
+        this.routingLayer.olLayer.getSource().clear();
+        this.dispatchEvent({
+            type: 'change:route',
+            target: this,
+        });
+    };
+    /**
+     * Aborts viapoint and route requests
+     * @private
+     */
+    RoutingControl.prototype.abortRequests = function () {
+        var _this = this;
+        var _a;
+        // Abort Routing API requests
+        this.graphs.forEach(function (_a) {
+            var graph = _a[0];
+            if (_this.abortControllers[graph]) {
+                _this.abortControllers[graph].abort();
+            }
+            _this.abortControllers[graph] = new AbortController();
+        });
+        // Abort Stops API requests
+        (_a = this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY] =
+            new AbortController();
         this.loading = false;
-        return null;
-      });
-    }
-    return Promise.resolve(null);
-  }
-  onMapClick(e) {
-    const feats = e.target.getFeaturesAtPixel(e.pixel);
-    const viaPoint = feats.find((feat) => feat.getGeometry()?.getType() === GeomType.POINT && feat.get("viaPointIdx") !== void 0);
-    if (viaPoint) {
-      this.removeViaPoint(viaPoint.get("viaPointIdx"));
-      return;
-    }
-    this.addViaPoint(e.coordinate);
-  }
-  onModifyStart(evt) {
-    let segmentIndex = -1;
-    const route = evt.features.getArray().find((feat) => feat.getGeometry()?.getType() === GeomType.LINE_STRING);
-    if (route) {
-      const closestExtent = buffer(new Point(route.getGeometry().getClosestPoint(evt.mapBrowserEvent.coordinate)).getExtent(), 1e-3);
-      segmentIndex = this.segments.findIndex((segment) => segment.getGeometry().intersectsExtent(closestExtent));
-    }
-    const viaPoint = (evt.features.getArray().filter((feat) => feat.getGeometry()?.getType() === GeomType.POINT) || [])[0];
-    this.initialRouteDrag = {
-      viaPoint,
-      oldRoute: route && route.clone(),
-      segmentIndex
     };
-  }
-  onModifyEnd(evt) {
-    const coord = evt.mapBrowserEvent.coordinate;
-    const { oldRoute, viaPoint, segmentIndex } = this.initialRouteDrag;
-    if (viaPoint) {
-      return this.addViaPoint(coord, viaPoint.get("viaPointIdx"), 1);
-    }
-    if (!oldRoute) {
-      return this.addViaPoint(coord, 0, 1);
-    }
-    if (segmentIndex === -1) {
-      return Promise.reject(new Error("No segment found"));
-    }
-    return this.addViaPoint(coord, segmentIndex + 1);
-  }
-  createDefaultElement() {
-    this.element = document.createElement("button");
-    this.element.id = "ol-toggle-routing";
-    this.element.innerHTML = "Toggle Route Control";
-    this.element.onclick = () => this.active ? this.deactivate() : this.activate();
-    Object.assign(this.element.style, {
-      position: "absolute",
-      right: "10px",
-      top: "10px"
-    });
-  }
-  createModifyInteraction() {
-    this.modifyInteraction = new Modify({
-      source: this.routingLayer.olLayer.getSource(),
-      pixelTolerance: 4,
-      hitDetection: this.routingLayer.olLayer,
-      deleteCondition: (e) => {
-        const feats = e.target.getFeaturesAtPixel(e.pixel, {
-          hitTolerance: 5
+    /**
+     * Draws route on map using an array of coordinates:
+     *   If a single coordinate is passed a single point feature is added to map.
+     *   If two or more coordinates are passed a request to the RoutingAPI fetches
+     *       the route using the passed coordinates and the current mot.
+     * @private
+     */
+    RoutingControl.prototype.drawRoute = function () {
+        var _this = this;
+        /* Calls RoutingAPI to draw a route using the viaPoints array */
+        this.abortRequests();
+        this.routingLayer.olLayer.getSource().clear();
+        if (!this.viaPoints.length) {
+            return null;
+        }
+        if (this.viaPoints.length === 1) {
+            // Add point for first node
+            return this.drawViaPoint(this.viaPoints[0], 0, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]);
+        }
+        var formattedViaPoints = this.viaPoints.map(function (viaPoint) {
+            if (Array.isArray(viaPoint)) {
+                var projection = _this.map.getView().getProjection();
+                // viaPoint is a coordinate
+                // Coordinates need to be reversed as required by the backend RoutingAPI
+                var _a = (0, proj_1.toLonLat)(viaPoint, projection), lon = _a[0], lat = _a[1];
+                return _this.snapToClosestStation ? ["@".concat(lat), lon] : [lat, lon];
+            }
+            // viaPoint is a string to use as it is
+            return _this.useRawViaPoints ? viaPoint : "!".concat(viaPoint);
+        });
+        this.loading = true;
+        // Clear source
+        this.routingLayer.olLayer.getSource().clear();
+        // Create point features for the viaPoints
+        this.viaPoints.forEach(function (viaPoint, idx) {
+            return _this.drawViaPoint(viaPoint, idx, _this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]);
         });
-        const viaPoint = feats.find((feat) => feat.getGeometry()?.getType() === GeomType.POINT && feat.get("index"));
-        if (click(e) && viaPoint) {
-          this.removeViaPoint(viaPoint.get("index"));
-          return true;
+        return Promise.all(this.graphs.map(function (_a, index) {
+            var graph = _a[0];
+            var signal = _this.abortControllers[graph].signal;
+            return _this.api
+                .route(__assign({ graph: graph, via: "".concat(formattedViaPoints.join('|')), mot: "".concat(_this.mot), 'resolve-hops': false, elevation: false, 'coord-radius': 100.0, 'coord-punish': 1000.0 }, _this.routingApiParams), { signal: signal })
+                .then(function (featureCollection) {
+                _this.segments = _this.format.readFeatures(featureCollection);
+                if (_this.mot === 'foot') {
+                    // Extract unique values from viaPoint target value
+                    var uniqueVias = _this.segments.reduce(function (resultVias, currentFeat) {
+                        var segTrg = currentFeat.get('trg');
+                        return resultVias.find(function (via) { return via[0] === segTrg[0] && via[1] === segTrg[1]; })
+                            ? resultVias
+                            : __spreadArray(__spreadArray([], resultVias, true), [segTrg], false);
+                    }, []);
+                    // Create LineString features from segments with same unique value
+                    _this.segments = uniqueVias.map(function (via) {
+                        var viaSegments = _this.segments.filter(function (seg) {
+                            var segTrg = seg.get('trg');
+                            return segTrg[0] === via[0] && segTrg[1] === via[1];
+                        });
+                        var coords = getFlatCoordinatesFromSegments(viaSegments);
+                        return new ol_1.Feature({
+                            geometry: new geom_1.LineString(coords),
+                        });
+                    });
+                }
+                // Create the new route. This route will be modifiable by the Modifiy interaction.
+                var coords = getFlatCoordinatesFromSegments(_this.segments);
+                var routeFeature = new ol_1.Feature({
+                    geometry: new geom_1.LineString(coords),
+                });
+                routeFeature.set('graph', graph);
+                routeFeature.set('mot', _this.mot);
+                routeFeature.set('minResolution', _this.graphsResolutions[index][0]);
+                routeFeature.set('maxResolution', _this.graphsResolutions[index][1]);
+                _this.routingLayer.olLayer.getSource().addFeature(routeFeature);
+                _this.loading = false;
+            })
+                .catch(function (error) {
+                if (error.name === 'AbortError') {
+                    // Ignore abort error
+                    return;
+                }
+                _this.segments = [];
+                // Dispatch error event and execute error function
+                _this.dispatchEvent({
+                    type: 'error',
+                    target: _this,
+                });
+                _this.onRouteError(error, _this);
+                _this.loading = false;
+            });
+        }));
+    };
+    /**
+     * Draw a via point. This function can parse all the possibilitiies
+     *
+     * @private
+     */
+    RoutingControl.prototype.drawViaPoint = function (viaPoint, idx, abortController) {
+        var _a, _b;
+        var _this = this;
+        var pointFeature = new ol_1.Feature();
+        pointFeature.set('viaPointIdx', idx);
+        // The via point is a coordinate using the current map's projection
+        if (Array.isArray(viaPoint)) {
+            pointFeature.setGeometry(new geom_1.Point(viaPoint));
+            this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+            return Promise.resolve(pointFeature);
         }
-        return false;
-      }
-    });
-    this.modifyInteraction.on("modifystart", this.onModifyStart);
-    this.modifyInteraction.on("modifyend", this.onModifyEnd);
-    this.modifyInteraction.setActive(false);
-  }
-  addListeners() {
-    if (!this.modify) {
-      return;
-    }
-    this.removeListeners();
-    this.onMapClickKey = this.map.on("singleclick", this.onMapClick);
-  }
-  removeListeners() {
-    unByKey(this.onMapClickKey);
-  }
-  activate() {
-    super.activate();
-    if (this.map) {
-      this.format = new GeoJSON({
-        featureProjection: this.map.getView().getProjection()
-      });
-      this.graphsResolutions = RoutingControl.getGraphsResolutions(this.graphs, this.map);
-      this.map.removeInteraction(this.modifyInteraction);
-      this.routingLayer.attachToMap(this.map);
-      this.map.addInteraction(this.modifyInteraction);
-      this.modifyInteraction.setActive(this.modify);
-      this.addListeners();
-    } else {
-      this.format = new GeoJSON({ featureProjection: "EPSG:3857" });
-      this.graphsResolutions = this.graphs;
-    }
-  }
-  deactivate() {
-    if (this.map) {
-      this.routingLayer.detachFromMap(this.map);
-      this.map.removeInteraction(this.modifyInteraction);
-      this.removeListeners();
-      this.reset();
-    }
-    super.deactivate();
-  }
-}
-export default RoutingControl;
+        // Possibility to parse:
+        //
+        // !8596126 a station with id 8596126
+        // !8596126$4 a station with id 8596126
+        if (!this.useRawViaPoints || REGEX_VIA_POINT_STATION_ID.test(viaPoint)) {
+            var stationId = void 0;
+            var track_1;
+            if (this.useRawViaPoints) {
+                _a = REGEX_VIA_POINT_STATION_ID.exec(viaPoint), stationId = _a[1], track_1 = _a[3];
+            }
+            else {
+                _b = viaPoint.split('$'), stationId = _b[0], track_1 = _b[1];
+            }
+            return fetch("".concat(this.stopsApiUrl, "lookup/").concat(stationId, "?key=").concat(this.stopsApiKey), { signal: abortController.signal })
+                .then(function (res) { return res.json(); })
+                .then(function (stationData) {
+                var coordinates = stationData.features[0].geometry.coordinates;
+                _this.cacheStationData[viaPoint] = (0, proj_1.fromLonLat)(coordinates);
+                pointFeature.set('viaPointTrack', track_1);
+                pointFeature.setGeometry(new geom_1.Point((0, proj_1.fromLonLat)(coordinates)));
+                _this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+                return pointFeature;
+            })
+                .catch(function (error) {
+                if (error.name === 'AbortError') {
+                    // Ignore abort error
+                    return;
+                }
+                // Dispatch error event and execute error function
+                _this.dispatchEvent({
+                    type: 'error',
+                    target: _this,
+                });
+                _this.onRouteError(error, _this);
+                _this.loading = false;
+            });
+        }
+        // Only when this.useRawViaPoints is true.
+        // Possibility to parse:
+        //
+        // 47.37811,8.53935 a position 47.37811, 8.53935
+        if (this.useRawViaPoints && REGEX_VIA_POINT_COORD.test(viaPoint)) {
+            var _c = REGEX_VIA_POINT_COORD.exec(viaPoint), lat_1 = _c[0], lon_1 = _c[1];
+            var coordinates = (0, proj_1.fromLonLat)([parseFloat(lon_1), parseFloat(lat_1)], this.map.getView().getProjection());
+            pointFeature.setGeometry(new geom_1.Point(coordinates));
+            this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+            return Promise.resolve(pointFeature);
+        }
+        // Only when this.useRawViaPoints is true.
+        // It will parse the via point to find some name, id, track coordinates.
+        //
+        // Possibility to parse:
+        //
+        // @47.37811,8.53935 a station at position 47.37811, 8.53935
+        // @47.37811,8.53935$4 track 4 in a station at position 47.37811, 8.53935
+        // zürich hb@47.37811,8.53935$8 track 8 in station "Zürich HB" at position 47.37811, 8.53935
+        var _d = REGEX_VIA_POINT.exec(viaPoint), stationName = _d[1], lat = _d[3], lon = _d[4], track = _d[6];
+        if (lon && lat) {
+            var coordinates = (0, proj_1.fromLonLat)([parseFloat(lon), parseFloat(lat)], this.map.getView().getProjection());
+            pointFeature.set('viaPointTrack', track);
+            pointFeature.setGeometry(new geom_1.Point(coordinates));
+            this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+            return Promise.resolve(pointFeature);
+        }
+        if (stationName) {
+            return fetch("".concat(this.stopsApiUrl, "?key=").concat(this.stopsApiKey, "&q=").concat(stationName, "&limit=1"), { signal: abortController.signal })
+                .then(function (res) { return res.json(); })
+                .then(function (stationData) {
+                var coordinates = stationData.features[0].geometry.coordinates;
+                _this.cacheStationData[viaPoint] = (0, proj_1.fromLonLat)(coordinates);
+                pointFeature.set('viaPointTrack', track);
+                pointFeature.setGeometry(new geom_1.Point((0, proj_1.fromLonLat)(coordinates)));
+                _this.routingLayer.olLayer.getSource().addFeature(pointFeature);
+                return pointFeature;
+            })
+                .catch(function (error) {
+                // Dispatch error event and execute error function
+                _this.dispatchEvent({
+                    type: 'error',
+                    target: _this,
+                });
+                _this.onRouteError(error, _this);
+                _this.loading = false;
+                return null;
+            });
+        }
+        return Promise.resolve(null);
+    };
+    /**
+     * Used on click on map while control is active:
+     *   By default adds a viaPoint to the end of array.
+     *   If an existing viaPoint is clicked removes the clicked viaPoint.
+     * @private
+     */
+    RoutingControl.prototype.onMapClick = function (e) {
+        var feats = e.target.getFeaturesAtPixel(e.pixel);
+        var viaPoint = feats.find(function (feat) {
+            var _a;
+            return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeometryType_1.default.POINT &&
+                feat.get('viaPointIdx') !== undefined;
+        });
+        if (viaPoint) {
+            // Remove existing viaPoint on click and abort viaPoint add
+            this.removeViaPoint(viaPoint.get('viaPointIdx'));
+            return;
+        }
+        this.addViaPoint(e.coordinate);
+    };
+    /**
+     * Used on start of the modify interaction. Stores relevant data
+     * in this.initialRouteDrag object
+     * @private
+     */
+    RoutingControl.prototype.onModifyStart = function (evt) {
+        // When modify start, we search the index of the segment that is modifying.
+        var segmentIndex = -1;
+        var route = evt.features
+            .getArray()
+            .find(function (feat) { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeometryType_1.default.LINE_STRING; });
+        // Find the segment index that is being modified
+        if (route) {
+            // We use a buff extent to fix floating issues , see https://github.com/openlayers/openlayers/issues/7130#issuecomment-535856422
+            var closestExtent_1 = (0, extent_1.buffer)(new geom_1.Point(route.getGeometry().getClosestPoint(evt.mapBrowserEvent.coordinate)).getExtent(), 0.001);
+            segmentIndex = this.segments.findIndex(function (segment) {
+                return segment.getGeometry().intersectsExtent(closestExtent_1);
+            });
+        }
+        // Find the viaPoint that is being modified
+        var viaPoint = (evt.features
+            .getArray()
+            .filter(function (feat) { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeometryType_1.default.POINT; }) ||
+            [])[0];
+        // Write object with modify info
+        /** @ignore */
+        this.initialRouteDrag = {
+            viaPoint: viaPoint,
+            oldRoute: route && route.clone(),
+            segmentIndex: segmentIndex,
+        };
+    };
+    /**
+     * Used on end of the modify interaction. Resolves feature modification:
+     *   Line drag creates new viaPoint at the final coordinate of drag.
+     *   Point drag replaces old viaPoint.
+     * @private
+     */
+    RoutingControl.prototype.onModifyEnd = function (evt) {
+        var coord = evt.mapBrowserEvent.coordinate;
+        var _a = this.initialRouteDrag, oldRoute = _a.oldRoute, viaPoint = _a.viaPoint, segmentIndex = _a.segmentIndex;
+        // If viaPoint is being relocated overwrite the old viaPoint
+        if (viaPoint) {
+            return this.addViaPoint(coord, viaPoint.get('viaPointIdx'), 1);
+        }
+        // In case there is no route overwrite first coordinate
+        if (!oldRoute) {
+            return this.addViaPoint(coord, 0, 1);
+        }
+        // We can't add a via point because we haven't found which segment has been modified.
+        if (segmentIndex === -1) {
+            return Promise.reject(new Error('No segment found'));
+        }
+        // Insert new viaPoint at the  modified segment index + 1
+        return this.addViaPoint(coord, segmentIndex + 1);
+    };
+    /**
+     * Define a default element.
+     *
+     * @private
+     */
+    RoutingControl.prototype.createDefaultElement = function () {
+        var _this = this;
+        /** @ignore */
+        this.element = document.createElement('button');
+        this.element.id = 'ol-toggle-routing';
+        this.element.innerHTML = 'Toggle Route Control';
+        this.element.onclick = function () {
+            return _this.active ? _this.deactivate() : _this.activate();
+        };
+        Object.assign(this.element.style, {
+            position: 'absolute',
+            right: '10px',
+            top: '10px',
+        });
+    };
+    /**
+     * Create the interaction used to modify vertexes of features.
+     * @private
+     */
+    RoutingControl.prototype.createModifyInteraction = function () {
+        var _this = this;
+        /**
+         * @type {ol.interaction.Modify}
+         * @private
+         */
+        // Define and add modify interaction
+        this.modifyInteraction = new interaction_1.Modify({
+            source: this.routingLayer.olLayer.getSource(),
+            pixelTolerance: 4,
+            hitDetection: this.routingLayer.olLayer,
+            deleteCondition: function (e) {
+                var feats = e.target.getFeaturesAtPixel(e.pixel, {
+                    hitTolerance: 5,
+                });
+                var viaPoint = feats.find(function (feat) {
+                    var _a;
+                    return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeometryType_1.default.POINT &&
+                        feat.get('index');
+                });
+                if ((0, condition_1.click)(e) && viaPoint) {
+                    // Remove node & viaPoint if an existing viaPoint was clicked
+                    _this.removeViaPoint(viaPoint.get('index'));
+                    return true;
+                }
+                return false;
+            },
+        });
+        this.modifyInteraction.on('modifystart', this.onModifyStart);
+        this.modifyInteraction.on('modifyend', this.onModifyEnd);
+        this.modifyInteraction.setActive(false);
+    };
+    /**
+     * Add click listener to map.
+     * @private
+     */
+    RoutingControl.prototype.addListeners = function () {
+        if (!this.modify) {
+            return;
+        }
+        this.removeListeners();
+        /** @ignore */
+        this.onMapClickKey = this.map.on('singleclick', this.onMapClick);
+    };
+    /**
+     * Remove click listener from map.
+     * @private
+     */
+    RoutingControl.prototype.removeListeners = function () {
+        (0, Observable_1.unByKey)(this.onMapClickKey);
+    };
+    RoutingControl.prototype.activate = function () {
+        _super.prototype.activate.call(this);
+        if (this.map) {
+            /** @ignore */
+            this.format = new format_1.GeoJSON({
+                featureProjection: this.map.getView().getProjection(),
+            });
+            /** @ignore */
+            this.graphsResolutions = RoutingControl.getGraphsResolutions(this.graphs, this.map);
+            // Clean the modifyInteraction if present
+            this.map.removeInteraction(this.modifyInteraction);
+            // Add modify interaction, RoutingLayer and listeners
+            this.routingLayer.attachToMap(this.map);
+            this.map.addInteraction(this.modifyInteraction);
+            this.modifyInteraction.setActive(this.modify);
+            this.addListeners();
+        }
+        else {
+            // fall back to some default values if map is not available
+            this.format = new format_1.GeoJSON({ featureProjection: 'EPSG:3857' });
+            this.graphsResolutions = this.graphs;
+        }
+    };
+    RoutingControl.prototype.deactivate = function () {
+        if (this.map) {
+            // Remove modify interaction, RoutingLayer, listeners and viaPoints
+            this.routingLayer.detachFromMap(this.map);
+            this.map.removeInteraction(this.modifyInteraction);
+            this.removeListeners();
+            this.reset();
+        }
+        _super.prototype.deactivate.call(this);
+    };
+    return RoutingControl;
+}(Control_1.default));
+exports.default = RoutingControl;