mobility-toolbox-js 2.0.0-beta.6 → 2.0.0-beta.62

package/ol/controls/RoutingControl.js

@@ -0,0 +1,632 @@
+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 BaseEvent from 'ol/events/Event';
+import { RoutingAPI } from '../../api';
+import ControlCommon from '../../common/controls/ControlCommon';
+import RoutingLayer from '../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 */
+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
+        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);
+        }
+    });
+    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}
+ */
+class RoutingControl extends ControlCommon {
+    constructor(options = {}) {
+        super(options);
+        this.viaPoints = [];
+        this.loading = false;
+        this.graphs = [];
+        this.modify = true;
+        this.useRawViaPoints = false;
+        this.snapToClosestStation = false;
+        this.cacheStationData = {};
+        this.abortControllers = {};
+        this.segments = [];
+        this.format = new GeoJSON({ featureProjection: 'EPSG:3857' });
+        this.initialRouteDrag = {};
+        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);
+                },
+            },
+            modify: {
+                get: () => this.get('modify'),
+                set: (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.apiKey = options.apiKey;
+        /** @ignore */
+        this.stopsApiKey = options.stopsApiKey || this.apiKey;
+        /** @ignore */
+        this.stopsApiUrl = options.stopsApiUrl || 'https://api.geops.io/stops/v1/';
+        /** @ignore */
+        this.api = new RoutingAPI(Object.assign({}, options));
+        /** @ignore */
+        this.routingLayer =
+            options.routingLayer ||
+                new RoutingLayer({
+                    name: 'routing-layer',
+                    style: options.style,
+                });
+        /** @ignore */
+        this.onRouteError =
+            options.onRouteError ||
+                ((error) => {
+                    this.dispatchEvent(new BaseEvent('change:route'));
+                    this.reset();
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+        /** @ignore */
+        this.onMapClick = this.onMapClick.bind(this);
+        /** @ignore */
+        this.onModifyEnd = this.onModifyEnd.bind(this);
+        /** @ignore */
+        this.onModifyStart = this.onModifyStart.bind(this);
+        /** @ignore */
+        this.createModifyInteraction();
+    }
+    /**
+     * Calculate at which resolutions corresponds each generalizations.
+     *
+     * @private
+     */
+    static getGraphsResolutions(graphs, map) {
+        const view = map.getView();
+        return graphs.map(([, minZoom, maxZoom]) => [
+            view.getResolutionForZoom(minZoom),
+            view.getResolutionForZoom(maxZoom || minZoom + 1),
+        ]);
+    }
+    /**
+     * 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.
+     */
+    addViaPoint(coordinatesOrString, index = -1, overwrite = 0) {
+        /* Add/Insert/Overwrite viapoint and redraw route */
+        this.viaPoints.splice(index === -1 ? this.viaPoints.length : index, overwrite, coordinatesOrString);
+        this.drawRoute();
+        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.
+     */
+    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
+     */
+    setViaPoints(coordinateArray) {
+        this.viaPoints = [...coordinateArray];
+        this.drawRoute();
+        this.dispatchEvent(new BaseEvent('change:route'));
+    }
+    /**
+     * Removes all viaPoints, clears the source and triggers a change event
+     */
+    reset() {
+        var _a, _b, _c;
+        // Clear viaPoints and source
+        this.abortRequests();
+        this.viaPoints = [];
+        (_c = (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.clear();
+        this.dispatchEvent(new BaseEvent('change:route'));
+    }
+    /**
+     * Aborts viapoint and route requests
+     * @private
+     */
+    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;
+    }
+    /**
+     * 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
+     */
+    drawRoute() {
+        var _a, _b, _c, _d, _e, _f;
+        /* Calls RoutingAPI to draw a route using the viaPoints array */
+        this.abortRequests();
+        (_c = (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.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]);
+        }
+        const formattedViaPoints = this.viaPoints.map((viaPoint) => {
+            var _a;
+            if (Array.isArray(viaPoint)) {
+                const projection = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView().getProjection();
+                // viaPoint is a coordinate
+                // Coordinates need to be reversed as required by the backend RoutingAPI
+                const [lon, lat] = toLonLat(viaPoint, projection);
+                return this.snapToClosestStation ? [`@${lat}`, lon] : [lat, lon];
+            }
+            // viaPoint is a string to use as it is
+            return this.useRawViaPoints ? viaPoint : `!${viaPoint}`;
+        });
+        this.loading = true;
+        // Clear source
+        (_f = (_e = (_d = this.routingLayer) === null || _d === void 0 ? void 0 : _d.olLayer) === null || _e === void 0 ? void 0 : _e.getSource()) === null || _f === void 0 ? void 0 : _f.clear();
+        // Create point features for the viaPoints
+        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 })
+                .then((featureCollection) => {
+                var _a, _b, _c, _d;
+                this.segments = this.format.readFeatures(featureCollection);
+                if (this.mot === 'foot') {
+                    // Extract unique values from viaPoint target value
+                    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];
+                    }, []);
+                    // Create LineString features from segments with same unique value
+                    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 coords = getFlatCoordinatesFromSegments(viaSegments);
+                        return new Feature({
+                            geometry: new LineString(coords),
+                        });
+                    });
+                }
+                // Create the new route. This route will be modifiable by the Modifiy interaction.
+                const coords = getFlatCoordinatesFromSegments(this.segments);
+                const routeFeature = new Feature({
+                    geometry: new LineString(coords),
+                });
+                routeFeature.set('graph', graph);
+                routeFeature.set('mot', this.mot);
+                if (this.graphsResolutions &&
+                    ((_a = this.graphsResolutions[index]) === null || _a === void 0 ? void 0 : _a.length) >= 2) {
+                    routeFeature.set('minResolution', this.graphsResolutions[index][0]);
+                    routeFeature.set('maxResolution', this.graphsResolutions[index][1]);
+                }
+                (_d = (_c = (_b = this.routingLayer) === null || _b === void 0 ? void 0 : _b.olLayer) === null || _c === void 0 ? void 0 : _c.getSource()) === null || _d === void 0 ? void 0 : _d.addFeature(routeFeature);
+                this.loading = false;
+            })
+                .catch((error) => {
+                if (error.name === 'AbortError') {
+                    // Ignore abort error
+                    return;
+                }
+                this.segments = [];
+                // Dispatch error event and execute error function
+                this.dispatchEvent(new BaseEvent('error'));
+                this.onRouteError(error, this);
+                this.loading = false;
+            });
+        }));
+    }
+    /**
+     * Draw a via point. This function can parse all the possibilitiies
+     *
+     * @private
+     */
+    drawViaPoint(viaPoint, idx, abortController) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const pointFeature = new Feature();
+        pointFeature.set('viaPointIdx', idx);
+        // The via point is a coordinate using the current map's projection
+        if (Array.isArray(viaPoint)) {
+            pointFeature.setGeometry(new Point(viaPoint));
+            (_c = (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.addFeature(pointFeature);
+            return Promise.resolve(pointFeature);
+        }
+        // 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)) {
+            let stationId;
+            let track;
+            if (this.useRawViaPoints) {
+                [, stationId, , track] =
+                    REGEX_VIA_POINT_STATION_ID.exec(viaPoint) || [];
+            }
+            else {
+                [stationId, track] = viaPoint.split('$');
+            }
+            return fetch(`${this.stopsApiUrl}lookup/${stationId}?key=${this.stopsApiKey}`, { signal: abortController.signal })
+                .then((res) => res.json())
+                .then((stationData) => {
+                var _a, _b, _c;
+                const { coordinates } = stationData.features[0].geometry;
+                this.cacheStationData[viaPoint] = fromLonLat(coordinates);
+                pointFeature.set('viaPointTrack', track);
+                pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
+                (_c = (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.addFeature(pointFeature);
+                return pointFeature;
+            })
+                .catch((error) => {
+                if (error.name === 'AbortError') {
+                    // Ignore abort error
+                    return;
+                }
+                // Dispatch error event and execute error function
+                this.dispatchEvent(new BaseEvent('error'));
+                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)) {
+            const [lat, lon] = REGEX_VIA_POINT_COORD.exec(viaPoint) || [];
+            const coordinates = fromLonLat([parseFloat(lon), parseFloat(lat)], (_d = this.map) === null || _d === void 0 ? void 0 : _d.getView().getProjection());
+            pointFeature.setGeometry(new Point(coordinates));
+            (_g = (_f = (_e = this.routingLayer) === null || _e === void 0 ? void 0 : _e.olLayer) === null || _f === void 0 ? void 0 : _f.getSource()) === null || _g === void 0 ? void 0 : _g.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
+        const [, stationName, , lat, lon, , track] = REGEX_VIA_POINT.exec(viaPoint) || [];
+        if (lon && lat) {
+            const coordinates = fromLonLat([parseFloat(lon), parseFloat(lat)], (_h = this.map) === null || _h === void 0 ? void 0 : _h.getView().getProjection());
+            pointFeature.set('viaPointTrack', track);
+            pointFeature.setGeometry(new Point(coordinates));
+            (_l = (_k = (_j = this.routingLayer) === null || _j === void 0 ? void 0 : _j.olLayer) === null || _k === void 0 ? void 0 : _k.getSource()) === null || _l === void 0 ? void 0 : _l.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) => {
+                var _a, _b, _c;
+                const { coordinates } = stationData.features[0].geometry;
+                this.cacheStationData[viaPoint] = fromLonLat(coordinates);
+                pointFeature.set('viaPointTrack', track);
+                pointFeature.setGeometry(new Point(fromLonLat(coordinates)));
+                (_c = (_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.addFeature(pointFeature);
+                return pointFeature;
+            })
+                .catch((error) => {
+                // Dispatch error event and execute error function
+                this.dispatchEvent(new BaseEvent('error'));
+                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
+     */
+    onMapClick(evt) {
+        const feats = evt.target.getFeaturesAtPixel(evt.pixel);
+        const viaPoint = feats.find((feat) => {
+            var _a;
+            return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeomType.POINT &&
+                feat.get('viaPointIdx') !== undefined;
+        });
+        if (viaPoint) {
+            // Remove existing viaPoint on click and abort viaPoint add
+            this.removeViaPoint(viaPoint.get('viaPointIdx'));
+            return;
+        }
+        this.addViaPoint(evt.coordinate);
+    }
+    /**
+     * Used on start of the modify interaction. Stores relevant data
+     * in this.initialRouteDrag object
+     * @private
+     */
+    onModifyStart(evt) {
+        var _a;
+        // When modify start, we search the index of the segment that is modifying.
+        let segmentIndex = -1;
+        const route = evt.features
+            .getArray()
+            .find((feat) => { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeomType.LINE_STRING; });
+        // Find the segment index that is being modified
+        if (route && 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
+            (_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); });
+        }
+        // Find the viaPoint that is being modified
+        const viaPoint = (evt.features
+            .getArray()
+            .filter((feat) => { var _a; return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeomType.POINT; }) ||
+            [])[0];
+        // Write object with modify info
+        /** @ignore */
+        this.initialRouteDrag = {
+            viaPoint,
+            oldRoute: route && route.clone(),
+            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
+     */
+    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'));
+        }
+        // Insert new viaPoint at the  modified segment index + 1
+        return this.addViaPoint(coord, (segmentIndex || 0) + 1);
+    }
+    /**
+     * Define a default element.
+     *
+     * @private
+     */
+    createDefaultElement() {
+        /** @ignore */
+        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, _b, _c;
+        /**
+         * @type {ol.interaction.Modify}
+         * @private
+         */
+        // Define and add modify interaction
+        this.modifyInteraction = new Modify({
+            source: ((_b = (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.olLayer) === null || _b === void 0 ? void 0 : _b.getSource()) || undefined,
+            pixelTolerance: 4,
+            hitDetection: (_c = this.routingLayer) === null || _c === void 0 ? void 0 : _c.olLayer,
+            deleteCondition: (e) => {
+                const feats = e.target.getFeaturesAtPixel(e.pixel, {
+                    hitTolerance: 5,
+                });
+                const viaPoint = feats.find((feat) => {
+                    var _a;
+                    return ((_a = feat.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === GeomType.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
+     */
+    addListeners() {
+        var _a;
+        if (!this.modify) {
+            return;
+        }
+        this.removeListeners();
+        /** @ignore */
+        this.onMapClickKey = (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('singleclick', this.onMapClick);
+    }
+    /**
+     * Remove click listener from map.
+     * @private
+     */
+    removeListeners() {
+        if (this.onMapClickKey) {
+            unByKey(this.onMapClickKey);
+        }
+    }
+    activate() {
+        var _a, _b;
+        super.activate();
+        if (this.map) {
+            /** @ignore */
+            this.format = new GeoJSON({
+                featureProjection: this.map.getView().getProjection(),
+            });
+            /** @ignore */
+            this.graphsResolutions = RoutingControl.getGraphsResolutions(this.graphs, this.map);
+            // Clean the modifyInteraction if present
+            if (this.modifyInteraction) {
+                this.map.removeInteraction(this.modifyInteraction);
+            }
+            // Add modify interaction, RoutingLayer and listeners
+            (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.attachToMap(this.map);
+            if (this.modifyInteraction) {
+                this.map.addInteraction(this.modifyInteraction);
+            }
+            (_b = this.modifyInteraction) === null || _b === void 0 ? void 0 : _b.setActive(this.modify);
+            this.addListeners();
+        }
+    }
+    deactivate() {
+        var _a;
+        if (this.map) {
+            // Remove modify interaction, RoutingLayer, listeners and viaPoints
+            (_a = this.routingLayer) === null || _a === void 0 ? void 0 : _a.detachFromMap();
+            if (this.modifyInteraction) {
+                this.map.removeInteraction(this.modifyInteraction);
+            }
+            this.removeListeners();
+            this.reset();
+        }
+    }
+    render() { }
+}
+export default RoutingControl;

package/ol/controls/StopFinderControl.d.ts

@@ -0,0 +1,30 @@
+import { Feature } from 'geojson';
+import StopFinderControlCommon from '../../common/controls/StopFinderControlCommon';
+/**
+ * Search stations.
+ *
+ * @example
+ * import { Map } from 'ol';
+ * import { StopFinderControl } from 'mobility-toolbox-js/ol';
+ *
+ * const map = new Map({
+ *   target: 'map',
+ * });
+ *
+ * const control = new StopFinderControl({
+ *   apiKey: [yourApiKey]
+ * });
+ *
+ * control.attachToMap(map);
+ *
+ *
+ * @see <a href="/example/ol-search">Openlayers search example</a>
+ */
+declare class StopFinderControl extends StopFinderControlCommon {
+    /**
+     * @private
+     */
+    onSuggestionClick(suggestion: Feature): void;
+}
+export default StopFinderControl;
+//# sourceMappingURL=StopFinderControl.d.ts.map

package/ol/controls/StopFinderControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StopFinderControl.d.ts","sourceRoot":"","sources":["../../../src/ol/controls/StopFinderControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAS,MAAM,SAAS,CAAC;AAEzC,OAAO,uBAAuB,MAAM,+CAA+C,CAAC;AAEpF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,cAAM,iBAAkB,SAAQ,uBAAuB;IACrD;;OAEG;IACH,iBAAiB,CAAC,UAAU,EAAE,OAAO;CAItC;AAED,eAAe,iBAAiB,CAAC"}