mobility-toolbox-js 3.0.0-beta.9 → 3.0.0

package/ol/controls/RoutingControl.js

@@ -1,15 +1,15 @@
 import { Feature } from 'ol';
+import Control from 'ol/control/Control';
+import { click } from 'ol/events/condition';
+import BaseEvent from 'ol/events/Event';
+import { buffer } from 'ol/extent';
+import { GeoJSON } from 'ol/format';
 import { LineString, Point } from 'ol/geom';
 import { Modify } from 'ol/interaction';
+import VectorLayer from 'ol/layer/Vector';
 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 BaseEvent from 'ol/events/Event';
-import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import Control from 'ol/control/Control';
 import { RoutingAPI } from '../../api';
 // Examples for a single hop:
 // basel sbb a station named "basel sbb"
@@ -18,27 +18,22 @@ import { RoutingAPI } from '../../api';
 // @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 */
 const 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 */
 const 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 */
 const REGEX_VIA_POINT_STATION_ID = /^!([^$]*)(\$?([a-zA-Z0-9]{0,2}))$/;
-/** @private */
 const STOP_FETCH_ABORT_CONTROLLER_KEY = 'stop-fetch';
-/** @private */
 const getFlatCoordinatesFromSegments = (segmentArray) => {
     const coords = [];
     segmentArray.forEach((seg) => {
         var _a;
-        // @ts-ignore
+        // @ts-expect-error missing type
         const coordArr = (_a = seg.getGeometry()) === null || _a === void 0 ? void 0 : _a.getCoordinates();
         if (coordArr === null || coordArr === void 0 ? void 0 : coordArr.length) {
             coords.push(...coordArr);
@@ -47,7 +42,8 @@ const getFlatCoordinatesFromSegments = (segmentArray) => {
     return coords;
 };
 /**
- * Display a route of a specified mean of transport.
+ * This OpenLayers control allows the user to add and modifiy via points to
+ * a map and request a route from the [geOps Routing API](https://developer.geops.io/apis/routing/).
  *
  * @example
  * import { Map } from 'ol';
@@ -59,96 +55,68 @@ const getFlatCoordinatesFromSegments = (segmentArray) => {
  *
  * const control = new RoutingControl();
  *
- * control.attachToMap(map)
+ * map.addControl(control);
  *
- * @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 {VectorLayer} 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}
+ * @extends {ol/control/Control~Control}
+ *
  * @public
  */
 class RoutingControl extends Control {
-    get active() {
-        return this.get('active');
-    }
-    set active(newValue) {
-        this.set('active', newValue);
-    }
-    get loading() {
-        return this.get('loading');
-    }
-    set loading(newValue) {
-        this.set('loading', newValue);
-    }
-    get modify() {
-        return this.get('modify');
-    }
-    set modify(newValue) {
-        this.set('modify', newValue);
-    }
-    get mot() {
-        return this.get('mot');
-    }
-    set mot(newValue) {
-        this.set('mot', newValue);
-    }
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {string} options.apiKey Access key for [geOps APIs](https://developer.geops.io/).
+     * @param {Object} options.apiParams Request parameters. See [geOps Routing API documentation](https://developer.geops.io/apis/routing/).
+     * @param {Array.<Array<graph="osm", minZoom=0, maxZoom=99>>} [options.graphs=[['osm', 0, 99]]] - 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]]".
+     * @param {string} [options.mot="bus"] Mean of transport to be used for routing.
+     * @param {function} options.onRouteError Callback on request errors.
+     * @param {VectorLayer} [options.routingLayer=new VectorLayer()] Vector layer for adding route features.
+     * @param {boolean} [options.snapToClosestStation=false] If true, the routing will snap the coordinate to the closest station. Default to false.
+     * @param {StyleLike} options.style Style of the default vector layer.
+     * @param {boolean} [options.useRawViaPoints=fale] Experimental property. If 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.
+     * @param {string} [options.url='https://api.geops.io/routing/v1/'] [geOps Realtime API](https://developer.geops.io/apis/realtime/) url.
+     * @public
+     */
     constructor(options = {}) {
         super(options);
-        this.viaPoints = [];
-        this.graphs = [];
-        this.useRawViaPoints = false;
-        this.snapToClosestStation = false;
-        this.cacheStationData = {};
         this.abortControllers = {};
-        this.segments = [];
+        this.cacheStationData = {};
         this.format = new GeoJSON({ featureProjection: 'EPSG:3857' });
+        this.graphs = [];
         this.initialRouteDrag = {};
+        this.segments = [];
+        this.snapToClosestStation = false;
+        this.useRawViaPoints = false;
+        this.viaPoints = [];
         if (!this.element) {
             this.createDefaultElement();
         }
         /** True if the control is requesting the backend. */
         this.loading = false;
-        /** @private */
         this.active = options.active || true;
-        /** @private */
         this.graphs = options.graphs || [['osm', 0, 99]];
-        /** @private */
         this.mot = options.mot || 'bus';
-        /** @private */
         this.modify = options.modify !== false;
-        /** @private */
-        this.routingApiParams = options.routingApiParams;
-        /** @private */
+        this.apiParams = options.apiParams;
         this.useRawViaPoints = options.useRawViaPoints || false;
-        /** @private */
         this.snapToClosestStation = options.snapToClosestStation || false;
-        /** @private */
         this.apiKey = options.apiKey;
-        /** @private */
         this.stopsApiKey = options.stopsApiKey || this.apiKey;
-        /** @private */
         this.stopsApiUrl = options.stopsApiUrl || 'https://api.geops.io/stops/v1/';
-        /** @private */
         this.api = new RoutingAPI(Object.assign({}, options));
-        /** @private */
         this.routingLayer =
             options.routingLayer ||
                 new VectorLayer({
                     source: new VectorSource(),
                     style: options.style,
                 });
-        /** @private */
         this.onRouteError =
             options.onRouteError ||
                 ((error) => {
@@ -157,13 +125,9 @@ class RoutingControl extends Control {
                     // eslint-disable-next-line no-console
                     console.error(error);
                 });
-        /** @private */
         this.onMapClick = this.onMapClick.bind(this);
-        /** @private */
         this.onModifyEnd = this.onModifyEnd.bind(this);
-        /** @private */
         this.onModifyStart = this.onModifyStart.bind(this);
-        /** @private */
         this.createModifyInteraction();
         this.on('propertychange', (evt) => {
             if (evt.key === 'active') {
@@ -189,17 +153,57 @@ class RoutingControl extends Control {
         ]);
     }
     /**
-     * Activet7deactivate the control when activ eproperty changes
+     * Aborts viapoint and route requests
      * @private
      */
-    onActiveChange() {
-        if (this.get('active')) {
-            this.activate();
+    abortRequests() {
+        var _a;
+        // Abort Routing API requests
+        this.graphs.forEach((graph) => {
+            const graphName = graph[0];
+            if (this.abortControllers[graphName]) {
+                this.abortControllers[graphName].abort();
+            }
+            this.abortControllers[graphName] = 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;
+    }
+    activate() {
+        var _a;
+        const map = this.getMap();
+        if (map) {
+            this.format = new GeoJSON({
+                featureProjection: map.getView().getProjection(),
+            });
+            this.graphsResolutions = RoutingControl.getGraphsResolutions(this.graphs, map);
+            // Clean the modifyInteraction if present
+            if (this.modifyInteraction) {
+                map.removeInteraction(this.modifyInteraction);
+            }
+            // Add modify interaction, RoutingLayer and listeners
+            // this.routingLayer?.attachToMap(this.getMap());
+            if (this.modifyInteraction) {
+                map.addInteraction(this.modifyInteraction);
+            }
+            (_a = this.modifyInteraction) === null || _a === void 0 ? void 0 : _a.setActive(this.modify);
+            this.addListeners();
         }
-        else {
-            this.deactivate();
+    }
+    /**
+     * Add click listener to map.
+     * @private
+     */
+    addListeners() {
+        var _a;
+        if (!this.modify) {
+            return;
         }
-        this.render();
+        this.removeListeners();
+        this.onMapClickKey = (_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.on('singleclick', this.onMapClick);
     }
     /**
      * Adds/Replaces a viaPoint to the viaPoints array and redraws route:
@@ -207,7 +211,7 @@ class RoutingControl extends Control {
      *   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 {string | Coordinate} coordinatesOrString Array of coordinates or a string representing a station
      * @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.
      * @public
@@ -219,60 +223,65 @@ class RoutingControl extends Control {
         this.dispatchEvent(new BaseEvent('change:route'));
     }
     /**
-     * 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.
-     * @public
-     */
-    removeViaPoint(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(new BaseEvent('change:route'));
-    }
-    /**
-     * Replaces the current viaPoints with a new coordinate array.
-     * @param {Array<Array<number>>} coordinateArray Array of nested coordinates
-     * @public
-     */
-    setViaPoints(coordinateArray) {
-        this.viaPoints = [...coordinateArray];
-        this.drawRoute();
-        this.dispatchEvent(new BaseEvent('change:route'));
-    }
-    /**
-     * Removes all viaPoints, clears the source and triggers a change event
-     * @public
+     * Define a default element.
+     *
+     * @private
      */
-    reset() {
-        var _a, _b;
-        // Clear viaPoints and source
-        this.abortRequests();
-        this.viaPoints = [];
-        (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
-        this.dispatchEvent(new BaseEvent('change:route'));
+    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',
+        });
     }
     /**
-     * Aborts viapoint and route requests
+     * Create the interaction used to modify vertexes of features.
      * @private
      */
-    abortRequests() {
+    createModifyInteraction() {
         var _a;
-        // Abort Routing API requests
-        this.graphs.forEach((graph) => {
-            const graphName = graph[0];
-            if (this.abortControllers[graphName]) {
-                this.abortControllers[graphName].abort();
-            }
-            this.abortControllers[graphName] = new AbortController();
+        /**
+         * @type {ol.interaction.Modify}
+         * @private
+         */
+        // Define and add modify interaction
+        this.modifyInteraction = new Modify({
+            // hitDetection: this.routingLayer, // TODO: wait for ol, fixed in https://github.com/openlayers/openlayers/pull/16393
+            deleteCondition: (e) => {
+                var _a;
+                const feats = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.getFeaturesAtPixel(e.pixel, {
+                    hitTolerance: 5,
+                })) || [];
+                const viaPoint = feats.find((feat) => { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === 'Point' && feat.get('index'); });
+                if (click(e) && viaPoint) {
+                    // Remove node & viaPoint if an existing viaPoint was clicked
+                    this.removeViaPoint(viaPoint.get('index'));
+                    return true;
+                }
+                return false;
+            },
+            pixelTolerance: 6,
+            source: ((_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) || undefined,
         });
-        // 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;
+        this.modifyInteraction.on('modifystart', this.onModifyStart);
+        this.modifyInteraction.on('modifyend', this.onModifyEnd);
+        this.modifyInteraction.setActive(false);
+    }
+    deactivate() {
+        const map = this.getMap();
+        if (map) {
+            // Remove modify interaction, RoutingLayer, listeners and viaPoints
+            // this.routingLayer?.detachFromMap();
+            if (this.modifyInteraction) {
+                map.removeInteraction(this.modifyInteraction);
+            }
+            this.removeListeners();
+            this.reset();
+        }
     }
     /**
      * Draws route on map using an array of coordinates:
@@ -285,7 +294,7 @@ class RoutingControl extends Control {
         var _a, _b;
         /* Calls RoutingAPI to draw a route using the viaPoints array */
         this.abortRequests();
-        (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear(true);
+        (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
         if (!this.viaPoints.length) {
             return null;
         }
@@ -307,16 +316,18 @@ class RoutingControl extends Control {
         });
         this.loading = true;
         // Create point features for the viaPoints
-        this.viaPoints.forEach((viaPoint, idx) => this.drawViaPoint(viaPoint, idx, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]));
+        this.viaPoints.forEach((viaPoint, idx) => {
+            this.drawViaPoint(viaPoint, idx, this.abortControllers[STOP_FETCH_ABORT_CONTROLLER_KEY]);
+        });
         return Promise.all(this.graphs.map(([graph], index) => {
             const { signal } = this.abortControllers[graph];
             if (!this.api) {
                 return Promise.resolve([]);
             }
             return this.api
-                .route(Object.assign({ graph, via: `${formattedViaPoints.join('|')}`, mot: this.mot, 
-                // @ts-ignore missing property in swagger
-                'resolve-hops': false, elevation: false, 'coord-radius': 100.0, 'coord-punish': 1000.0 }, (this.routingApiParams || {})), { signal })
+                .route(Object.assign({ 'coord-punish': 1000.0, 'coord-radius': 100.0, 
+                // @ts-expect-error  missing property in swagger
+                elevation: false, graph, mot: this.mot, 'resolve-hops': false, via: `${formattedViaPoints.join('|')}` }, (this.apiParams || {})), { signal })
                 .then((featureCollection) => {
                 var _a, _b, _c;
                 this.segments = this.format.readFeatures(featureCollection);
@@ -356,8 +367,7 @@ class RoutingControl extends Control {
                 this.loading = false;
             })
                 .catch((error) => {
-                var _a, _b;
-                if (/AbortError/.test(error.message)) {
+                if (/AbortError/.test(error.name)) {
                     // Ignore abort error
                     return;
                 }
@@ -365,7 +375,6 @@ class RoutingControl extends Control {
                 // Dispatch error event and execute error function
                 this.dispatchEvent(new BaseEvent('error'));
                 this.onRouteError(error, this);
-                (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
                 this.loading = false;
             });
         }));
@@ -402,15 +411,19 @@ class RoutingControl extends Control {
             return fetch(`${this.stopsApiUrl}lookup/${stationId}?key=${this.stopsApiKey}`, { signal: abortController.signal })
                 .then((res) => res.json())
                 .then((stationData) => {
-                var _a, _b;
-                const { coordinates } = stationData.features[0].geometry;
+                var _a, _b, _c, _d;
+                const { coordinates } = ((_b = (_a = stationData === null || stationData === void 0 ? void 0 : stationData.features) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.geometry) || {};
+                if (!coordinates) {
+                    console.log('No coordinates found for station ' + stationId, stationData);
+                }
                 this.cacheStationData[viaPoint] = fromLonLat(coordinates);
                 pointFeature.set('viaPointTrack', track);
                 pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
-                (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.addFeature(pointFeature);
+                (_d = (_c = this.routingLayer) === null || _c === void 0 ? void 0 : _c.getSource()) === null || _d === void 0 ? void 0 : _d.addFeature(pointFeature);
                 return pointFeature;
             })
                 .catch((error) => {
+                var _a, _b;
                 if (/AbortError/.test(error.message)) {
                     // Ignore abort error
                     return;
@@ -418,6 +431,7 @@ class RoutingControl extends Control {
                 // Dispatch error event and execute error function
                 this.dispatchEvent(new BaseEvent('error'));
                 this.onRouteError(error, this);
+                (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
                 this.loading = false;
             });
         }
@@ -474,6 +488,19 @@ class RoutingControl extends Control {
         }
         return Promise.resolve(null);
     }
+    /**
+     * Activet7deactivate the control when activ eproperty changes
+     * @private
+     */
+    onActiveChange() {
+        if (this.get('active')) {
+            this.activate();
+        }
+        else {
+            this.deactivate();
+        }
+        this.render();
+    }
     /**
      * Used on click on map while control is active:
      *   By default adds a viaPoint to the end of array.
@@ -482,8 +509,8 @@ class RoutingControl extends Control {
      */
     onMapClick(evt) {
         const feats = evt.target.getFeaturesAtPixel(evt.pixel, {
-            layerFilter: (layer) => layer === this.routingLayer,
             hitTolerance: 5,
+            layerFilter: (layer) => layer === this.routingLayer,
         });
         const viaPoint = feats.find((feat) => {
             var _a;
@@ -497,6 +524,30 @@ class RoutingControl extends Control {
         }
         this.addViaPoint(evt.coordinate);
     }
+    /**
+     * 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
+     */
+    onModifyEnd(evt) {
+        const coord = evt.mapBrowserEvent.coordinate;
+        const { oldRoute, segmentIndex, viaPoint } = this.initialRouteDrag || {};
+        // 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 || 0) + 1);
+    }
     /**
      * Used on start of the modify interaction. Stores relevant data
      * in this.initialRouteDrag object
@@ -510,10 +561,10 @@ class RoutingControl extends Control {
             .getArray()
             .find((feat) => { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === 'LineString'; });
         // Find the segment index that is being modified
-        if (route && route.getGeometry() && evt.mapBrowserEvent.coordinate) {
+        if ((route === null || route === void 0 ? void 0 : route.getGeometry()) && evt.mapBrowserEvent.coordinate) {
             // We use a buff extent to fix floating issues , see https://github.com/openlayers/openlayers/issues/7130#issuecomment-535856422
             const closestExtent = buffer(new Point(
-            // @ts-ignore
+            // @ts-expect-error bad def
             (_a = route.getGeometry()) === null || _a === void 0 ? void 0 : _a.getClosestPoint(evt.mapBrowserEvent.coordinate)).getExtent(), 0.001);
             segmentIndex = this.segments.findIndex((segment) => { var _a; return (_a = segment.getGeometry()) === null || _a === void 0 ? void 0 : _a.intersectsExtent(closestExtent); });
         }
@@ -523,108 +574,47 @@ class RoutingControl extends Control {
             .filter((feat) => { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === 'Point'; }) ||
             [])[0];
         // Write object with modify info
-        /** @private */
         this.initialRouteDrag = {
-            viaPoint,
-            oldRoute: route && route.clone(),
+            oldRoute: route === null || route === void 0 ? void 0 : route.clone(),
             segmentIndex,
+            viaPoint,
         };
     }
     /**
-     * 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.
+     * Remove click listener from map.
      * @private
      */
-    onModifyEnd(evt) {
-        const coord = evt.mapBrowserEvent.coordinate;
-        const { oldRoute, viaPoint, segmentIndex } = this.initialRouteDrag || {};
-        // 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'));
+    removeListeners() {
+        if (this.onMapClickKey) {
+            unByKey(this.onMapClickKey);
         }
-        // Insert new viaPoint at the  modified segment index + 1
-        return this.addViaPoint(coord, (segmentIndex || 0) + 1);
-    }
-    /**
-     * Define a default element.
-     *
-     * @private
-     */
-    createDefaultElement() {
-        /** @private */
-        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',
-        });
-    }
-    /**
-     * Create the interaction used to modify vertexes of features.
-     * @private
-     */
-    createModifyInteraction() {
-        var _a;
-        /**
-         * @type {ol.interaction.Modify}
-         * @private
-         */
-        // Define and add modify interaction
-        this.modifyInteraction = new Modify({
-            source: ((_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) || undefined,
-            pixelTolerance: 6,
-            // hitDetection: this.routingLayer, // Create a bug, the first point is always selected even if the mous eis far away
-            deleteCondition: (e) => {
-                var _a;
-                const feats = (_a = e.target) === null || _a === void 0 ? void 0 : _a.getFeaturesAtPixel(e.pixel, {
-                    hitTolerance: 5,
-                } || []);
-                const viaPoint = feats.find((feat) => { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === 'Point' && feat.get('index'); });
-                if (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
+     * 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.
+     * @public
      */
-    addListeners() {
-        var _a;
-        if (!this.modify) {
-            return;
+    removeViaPoint(index = (this.viaPoints || []).length - 1) {
+        /* Remove viapoint and redraw route */
+        if (this.viaPoints.length && this.viaPoints[index]) {
+            this.viaPoints.splice(index, 1);
         }
-        this.removeListeners();
-        /** @private */
-        this.onMapClickKey = (_a = this.getMap()) === null || _a === void 0 ? void 0 : _a.on('singleclick', this.onMapClick);
+        this.drawRoute();
+        this.dispatchEvent(new BaseEvent('change:route'));
     }
+    render() { }
     /**
-     * Remove click listener from map.
-     * @private
+     * Removes all viaPoints, clears the source and triggers a change event
+     * @public
      */
-    removeListeners() {
-        if (this.onMapClickKey) {
-            unByKey(this.onMapClickKey);
-        }
+    reset() {
+        var _a, _b;
+        // Clear viaPoints and source
+        this.abortRequests();
+        this.viaPoints = [];
+        (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
+        this.dispatchEvent(new BaseEvent('change:route'));
     }
     setMap(map) {
         super.setMap(map);
@@ -635,43 +625,39 @@ class RoutingControl extends Control {
             this.active = false;
         }
     }
-    activate() {
-        var _a;
-        const map = this.getMap();
-        if (map) {
-            /** @private */
-            this.format = new GeoJSON({
-                featureProjection: map.getView().getProjection(),
-            });
-            /** @private */
-            this.graphsResolutions = RoutingControl.getGraphsResolutions(this.graphs, map);
-            // Clean the modifyInteraction if present
-            if (this.modifyInteraction) {
-                map.removeInteraction(this.modifyInteraction);
-            }
-            // Add modify interaction, RoutingLayer and listeners
-            // @ts-ignore
-            // this.routingLayer?.attachToMap(this.getMap());
-            if (this.modifyInteraction) {
-                map.addInteraction(this.modifyInteraction);
-            }
-            (_a = this.modifyInteraction) === null || _a === void 0 ? void 0 : _a.setActive(this.modify);
-            this.addListeners();
-        }
+    /**
+     * Replaces the current viaPoints with a new coordinate array.
+     * @param {Array<Array<number>>} coordinateArray Array of nested coordinates
+     * @public
+     */
+    setViaPoints(coordinateArray) {
+        this.viaPoints = [...coordinateArray];
+        this.drawRoute();
+        this.dispatchEvent(new BaseEvent('change:route'));
     }
-    deactivate() {
-        const map = this.getMap();
-        if (map) {
-            // Remove modify interaction, RoutingLayer, listeners and viaPoints
-            // @ts-ignore
-            // this.routingLayer?.detachFromMap();
-            if (this.modifyInteraction) {
-                map.removeInteraction(this.modifyInteraction);
-            }
-            this.removeListeners();
-            this.reset();
-        }
+    get active() {
+        return this.get('active');
+    }
+    set active(newValue) {
+        this.set('active', newValue);
+    }
+    get loading() {
+        return this.get('loading');
+    }
+    set loading(newValue) {
+        this.set('loading', newValue);
+    }
+    get modify() {
+        return this.get('modify');
+    }
+    set modify(newValue) {
+        this.set('modify', newValue);
+    }
+    get mot() {
+        return this.get('mot');
+    }
+    set mot(newValue) {
+        this.set('mot', newValue);
     }
-    render() { }
 }
 export default RoutingControl;