mobility-toolbox-js 2.3.10 → 2.4.0

package/ol/layers/RealtimeLayer.d.ts

@@ -0,0 +1,202 @@
+import GeoJSON from 'ol/format/GeoJSON';
+import Feature, { FeatureLike } from 'ol/Feature';
+import { MapEvent } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { ObjectEvent } from 'ol/Object';
+import Layer from './Layer';
+import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
+import { AnyMap, LayerGetFeatureInfoResponse, RealtimeFullTrajectory, RealtimeTrainId, ViewState } from '../../types';
+import { RealtimeTrajectory } from '../../api/typedefs';
+import { WebSocketAPIMessageEventData } from '../../common/api/WebSocketAPI';
+export type OlRealtimeLayerOptions = RealtimeLayerMixinOptions & {
+    fullTrajectoryStyle?: (feature: FeatureLike, resolution: number, options: any) => void;
+    allowRenderWhenAnimating?: boolean;
+};
+declare const RealtimeLayer_base: {
+    new (options: RealtimeLayerMixinOptions): {
+        [x: string]: any;
+        debug: boolean;
+        trajectories?: {
+            [key: string]: GeoJSONFeature;
+        } | undefined;
+        canvas?: import("../../types").AnyCanvas | undefined;
+        mode: import("../../types").RealtimeMode;
+        api: import("..").RealtimeAPI;
+        tenant: string;
+        bboxParameters?: {
+            [index: string]: string | number | boolean | string[] | number[] | boolean[];
+        } | undefined;
+        time?: Date | undefined;
+        live?: boolean | undefined;
+        speed?: number | undefined;
+        filter?: Function | undefined;
+        sort?: Function | undefined;
+        style?: import("../../types").RealtimeStyleFunction | undefined;
+        styleOptions?: import("../../types").RealtimeStyleOptions | undefined;
+        pixelRatio?: number | undefined;
+        minZoomInterpolation: number;
+        isUpdateBboxOnMoveEnd: boolean;
+        hoverVehicleId?: string | undefined;
+        selectedVehicleId?: string | undefined;
+        renderState?: import("../../types").RealtimeRenderState | undefined;
+        useRequestAnimationFrame?: boolean | undefined;
+        useDebounce?: boolean | undefined;
+        useThrottle?: boolean | undefined;
+        mots?: import("../../types").RealtimeMot[] | undefined;
+        motsByZoom: import("../../types").RealtimeMot[][];
+        generalizationLevel?: import("../../types").RealtimeGeneralizationLevel | undefined;
+        /** @private */
+        generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
+        renderTimeIntervalByZoom: number[];
+        format: GeoJSON<typeof Feature>;
+        requestId?: number | undefined;
+        updateTimeInterval?: number | undefined;
+        updateTimeDelay?: number | undefined;
+        visibilityRef: import("ol/events").EventsKey;
+        selectedVehicle: GeoJSONFeature;
+        getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
+        getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
+        getRenderTimeIntervalByZoom: (zoom: number) => number;
+        throttleRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean | undefined) => void;
+        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean | undefined) => void;
+        onStart?: ((realtimeLayer: any) => void) | undefined;
+        onStop?: ((realtimeLayer: any) => void) | undefined;
+        defineProperties(options: RealtimeLayerMixinOptions): void;
+        attachToMap(map: any): void;
+        detachFromMap(): void;
+        start(): void;
+        startUpdateTime(): void;
+        stop(): void;
+        stopUpdateTime(): void;
+        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
+        renderTrajectories(viewState: ViewState | undefined, noInterpolate: boolean | undefined): void;
+        setBbox(extent: [number, number, number, number], zoom: number): void;
+        getRefreshTimeInMs(zoom?: number | undefined): number;
+        getVehicle(filterFc: Function): GeoJSONFeature[];
+        getFeatureInfoAtCoordinate(coordinate: Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<LayerGetFeatureInfoResponse>;
+        getTrajectoryInfos(id: string): Promise<{
+            stopSequence: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            fullTrajectory: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+        }>;
+        purgeOutOfDateTrajectories(): void;
+        purgeTrajectory(trajectory: GeoJSONFeature, extent: [number, number, number, number], zoom: number): boolean;
+        addTrajectory(trajectory: GeoJSONFeature): void;
+        removeTrajectory(trajectoryOrId: any): void;
+        onZoomEnd(): void;
+        onDocumentVisibilityChange(): void;
+        onTrajectoryMessage(data: WebSocketAPIMessageEventData<GeoJSONFeature>): void;
+        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<string>): void;
+        onFeatureHover(features: Feature<import("ol/geom").Geometry>[], layer: import("../../types").AnyRealtimeLayer, coordinate: Coordinate): void;
+        onFeatureClick(features: Feature<import("ol/geom").Geometry>[], layer: import("../../types").AnyRealtimeLayer, coordinate: Coordinate): void;
+    };
+} & typeof Layer;
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {UserInteractionsLayerInterface}
+ * @implements {RealtimeLayerInterface}
+ */
+declare class RealtimeLayer extends RealtimeLayer_base {
+    allowRenderWhenAnimating?: boolean;
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @private
+     */
+    constructor(options: OlRealtimeLayerOptions);
+    attachToMap(map: AnyMap): void;
+    /**
+     * Destroy the container of the tracker.
+     */
+    detachFromMap(): void;
+    /**
+     * Detect in the canvas if there is data to query at a specific coordinate.
+     * @param {ol/coordinate~Coordinate}  coordinate The coordinate to test
+     * @returns
+     */
+    hasFeatureInfoAtCoordinate(coordinate: Coordinate): boolean;
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     */
+    renderTrajectories(noInterpolate: boolean): void;
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     * @override
+     */
+    renderTrajectoriesInternal(viewState: ViewState, noInterpolate: boolean): boolean;
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    getRefreshTimeInMs(): number;
+    getFeatureInfoAtCoordinate(coordinate: Coordinate, options?: {}): Promise<LayerGetFeatureInfoResponse>;
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    onMoveEnd(evt: MapEvent | ObjectEvent): void;
+    /**
+     * Function called on moveend event only when the zoom has changed.
+     *
+     * @param {ol/MapEvent~MapEvent} evt Moveend event.
+     * @private
+     * @override
+     */
+    onZoomEnd(): void;
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureHover(features: Feature[], layer: RealtimeLayer, coordinate: Coordinate): void;
+    /**
+     * Display the complete trajectory of the vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureClick(features: Feature[], layer: RealtimeLayer, coordinate: Coordinate): void;
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+    /**
+     * Send the current bbox to the websocket
+     *
+     * @private
+     */
+    setBbox(extent?: [number, number, number, number], zoom?: number): void;
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory(id: RealtimeTrainId): Promise<Feature[] | undefined>;
+    /**
+     * Create a copy of the RealtimeLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RealtimeLayer} A RealtimeLayer
+     */
+    clone(newOptions: OlRealtimeLayerOptions): RealtimeLayer;
+}
+export default RealtimeLayer;
+//# sourceMappingURL=RealtimeLayer.d.ts.map

package/ol/layers/RealtimeLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RealtimeLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/RealtimeLayer.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAKxC,OAAO,OAAO,EAAE,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAc,EACZ,yBAAyB,EAC1B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,2BAA2B,EAC3B,sBAAsB,EACtB,eAAe,EACf,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAK7E,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAAG;IAC/D,mBAAmB,CAAC,EAAE,CACpB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,GAAG,KACT,IAAI,CAAC;IACV,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2HE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAzHnB;;;;;;;;;;;;;;;;;GAiBG;AAEH,cAAM,aAAc,SAAQ,kBAAY;IACtC,wBAAwB,CAAC,EAAE,OAAO,CAAS;IAE3C;;;;;OAKG;gBACS,OAAO,EAAE,sBAAsB;IAwG3C,WAAW,CAAC,GAAG,EAAE,MAAM;IA4BvB;;OAEG;IACH,aAAa;IAKb;;;;OAIG;IACH,0BAA0B,CAAC,UAAU,EAAE,UAAU;IAgBjD;;;;OAIG;IAEH,kBAAkB,CAAC,aAAa,EAAE,OAAO;IA2BzC;;;;OAIG;IACH,0BAA0B,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO;IA2BvE;;OAEG;IACH,kBAAkB;IAIlB,0BAA0B,CACxB,UAAU,EAAE,UAAU,EACtB,OAAO,KAAK,GACX,OAAO,CAAC,2BAA2B,CAAC;IAgBvC;;;;;OAKG;IAEH,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW;IAQrC;;;;;;OAMG;IAEH,SAAS;IAYT;;;;;OAKG;IACH,cAAc,CACZ,QAAQ,EAAE,OAAO,EAAE,EACnB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU;IAQxB;;;;;OAKG;IACH,cAAc,CACZ,QAAQ,EAAE,OAAO,EAAE,EACnB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU;IAWxB;;;;OAIG;IACH,eAAe,CACb,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACxC,IAAI,EAAE,MAAM;IAed;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM;IAOhE;;;OAGG;IACH,mBAAmB,CAAC,EAAE,EAAE,eAAe,GAAG,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC;IA0BxE;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,sBAAsB;CAGzC;AAED,eAAe,aAAa,CAAC"}

package/ol/layers/RealtimeLayer.js

@@ -0,0 +1,332 @@
+import GeoJSON from 'ol/format/GeoJSON';
+import { Layer as OLLayer, Group, Vector as VectorLayer } from 'ol/layer';
+import Source from 'ol/source/Source';
+import { composeCssTransform } from 'ol/transform';
+import { Vector as VectorSource } from 'ol/source';
+import debounce from 'lodash.debounce';
+import Layer from './Layer';
+import mixin from '../../common/mixins/RealtimeLayerMixin';
+import { fullTrajectoryStyle } from '../styles';
+/** @private */
+const format = new GeoJSON();
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {UserInteractionsLayerInterface}
+ * @implements {RealtimeLayerInterface}
+ */
+// @ts-ignore
+class RealtimeLayer extends mixin(Layer) {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @private
+     */
+    constructor(options) {
+        // We use a group to be able to add custom vector layer in extended class.
+        // For example TrajservLayer use a vectorLayer to display the complete trajectory.
+        super(Object.assign({}, options));
+        this.allowRenderWhenAnimating = false;
+        this.allowRenderWhenAnimating = !!options.allowRenderWhenAnimating;
+        /** @private */
+        this.olLayer =
+            options.olLayer ||
+                new Group({
+                    layers: [
+                        new VectorLayer({
+                            updateWhileAnimating: true,
+                            updateWhileInteracting: true,
+                            source: new VectorSource({ features: [] }),
+                            style: (feature, resolution) => {
+                                return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.styleOptions);
+                            },
+                        }),
+                        new OLLayer({
+                            source: new Source({}),
+                            render: (frameState) => {
+                                var _a, _b, _c;
+                                if (!this.container) {
+                                    this.container = document.createElement('div');
+                                    this.container.style.position = 'absolute';
+                                    this.container.style.width = '100%';
+                                    this.container.style.height = '100%';
+                                    this.transformContainer = document.createElement('div');
+                                    this.transformContainer.style.position = 'absolute';
+                                    this.transformContainer.style.width = '100%';
+                                    this.transformContainer.style.height = '100%';
+                                    this.container.appendChild(this.transformContainer);
+                                    if (this.canvas) {
+                                        this.canvas.style.position =
+                                            'absolute';
+                                        this.canvas.style.top = '0';
+                                        this.canvas.style.left = '0';
+                                        this.canvas.style.transformOrigin =
+                                            'top left';
+                                        this.transformContainer.appendChild(this.canvas);
+                                    }
+                                }
+                                if (this.renderedViewState) {
+                                    const { center, resolution, rotation } = frameState.viewState;
+                                    const { center: renderedCenter, resolution: renderedResolution, rotation: renderedRotation, } = this.renderedViewState;
+                                    if (renderedResolution / resolution >= 3) {
+                                        // Avoid having really big points when zooming fast.
+                                        const context = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+                                        context === null || context === void 0 ? void 0 : context.clearRect(0, 0, (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.width, (_c = this.canvas) === null || _c === void 0 ? void 0 : _c.height);
+                                    }
+                                    else {
+                                        const pixelCenterRendered = this.map.getPixelFromCoordinate(renderedCenter);
+                                        const pixelCenter = this.map.getPixelFromCoordinate(center);
+                                        this.transformContainer.style.transform = composeCssTransform(pixelCenterRendered[0] - pixelCenter[0], pixelCenterRendered[1] - pixelCenter[1], renderedResolution / resolution, renderedResolution / resolution, rotation - renderedRotation, 0, 0);
+                                    }
+                                }
+                                return this.container;
+                            },
+                        }),
+                    ],
+                });
+        // We store the layer used to highlight the full Trajectory
+        this.vectorLayer = this.olLayer.getLayers().item(0);
+        // Options the last render run did happen. If something changes
+        // we have to render again
+        /** @private */
+        this.renderState = {
+            center: [0, 0],
+            zoom: undefined,
+            rotation: 0,
+        };
+        this.onZoomEndDebounced = debounce(this.onZoomEnd, 100);
+        this.onMoveEndDebounced = debounce(this.onMoveEnd, 100);
+    }
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (this.map) {
+            this.olListenersKeys.push(...this.map.on(['moveend', 'change:target'], (evt) => {
+                const view = (evt.map || evt.target).getView();
+                if (view.getAnimating() || view.getInteracting()) {
+                    return;
+                }
+                const zoom = view.getZoom();
+                // Update the interval between render updates
+                if (this.currentZoom !== zoom) {
+                    this.onZoomEndDebounced(evt);
+                }
+                this.currentZoom = zoom;
+                this.onMoveEndDebounced(evt);
+            }));
+        }
+    }
+    /**
+     * Destroy the container of the tracker.
+     */
+    detachFromMap() {
+        super.detachFromMap();
+        this.container = null;
+    }
+    /**
+     * Detect in the canvas if there is data to query at a specific coordinate.
+     * @param {ol/coordinate~Coordinate}  coordinate The coordinate to test
+     * @returns
+     */
+    hasFeatureInfoAtCoordinate(coordinate) {
+        if (this.map && this.canvas) {
+            const context = this.canvas.getContext('2d', {
+                willReadFrequently: true,
+            });
+            const pixel = this.map.getPixelFromCoordinate(coordinate);
+            return !!(context === null || context === void 0 ? void 0 : context.getImageData(pixel[0] * (this.pixelRatio || 1), pixel[1] * (this.pixelRatio || 1), 1, 1).data[3]);
+        }
+        return false;
+    }
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     */
+    // @ts-ignore
+    renderTrajectories(noInterpolate) {
+        if (!this.map) {
+            return;
+        }
+        const view = this.map.getView();
+        // it could happen that the view is set but without center yet,
+        // so the calcualteExtent will trigger an error.
+        if (!view.getCenter()) {
+            return;
+        }
+        super.renderTrajectories({
+            size: this.map.getSize(),
+            center: view.getCenter(),
+            extent: view.calculateExtent(),
+            resolution: view.getResolution(),
+            rotation: view.getRotation(),
+            zoom: view.getZoom(),
+            pixelRatio: this.pixelRatio,
+        }, noInterpolate);
+    }
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     * @override
+     */
+    renderTrajectoriesInternal(viewState, noInterpolate) {
+        if (!this.map) {
+            return false;
+        }
+        let isRendered = false;
+        const blockRendering = this.allowRenderWhenAnimating
+            ? false
+            : this.map.getView().getAnimating() ||
+                this.map.getView().getInteracting();
+        // Don't render the map when the map is animating or interacting.
+        isRendered = blockRendering
+            ? false
+            : super.renderTrajectoriesInternal(viewState, noInterpolate);
+        // We update the current render state.
+        if (isRendered) {
+            this.renderedViewState = Object.assign({}, viewState);
+            if (this.transformContainer) {
+                this.transformContainer.style.transform = '';
+            }
+        }
+        return isRendered;
+    }
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    getRefreshTimeInMs() {
+        return super.getRefreshTimeInMs(this.map.getView().getZoom());
+    }
+    getFeatureInfoAtCoordinate(coordinate, options = {}) {
+        if (!this.map || !this.map.getView()) {
+            return Promise.resolve({
+                layer: this,
+                features: [],
+                coordinate,
+            });
+        }
+        const resolution = this.map.getView().getResolution();
+        return super.getFeatureInfoAtCoordinate(coordinate, Object.assign({ resolution }, options));
+    }
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onMoveEnd(evt) {
+        if (!this.isUpdateBboxOnMoveEnd || !this.visible) {
+            return;
+        }
+        this.setBbox();
+    }
+    /**
+     * Function called on moveend event only when the zoom has changed.
+     *
+     * @param {ol/MapEvent~MapEvent} evt Moveend event.
+     * @private
+     * @override
+     */
+    // eslint-disable-next-line no-unused-vars
+    onZoomEnd() {
+        super.onZoomEnd();
+        if (!this.isUpdateBboxOnMoveEnd || !this.visible) {
+            return;
+        }
+        if (this.userClickInteractions && this.selectedVehicleId) {
+            this.highlightTrajectory(this.selectedVehicleId);
+        }
+    }
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureHover(features, layer, coordinate) {
+        super.onFeatureHover(features, layer, coordinate);
+        this.map.getTargetElement().style.cursor = features.length
+            ? 'pointer'
+            : 'auto';
+    }
+    /**
+     * Display the complete trajectory of the vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureClick(features, layer, coordinate) {
+        super.onFeatureClick(features, layer, coordinate);
+        if (!features.length && this.vectorLayer) {
+            this.vectorLayer.getSource().clear();
+        }
+        if (this.selectedVehicleId) {
+            this.highlightTrajectory(this.selectedVehicleId);
+        }
+    }
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    purgeTrajectory(trajectory, extent, zoom) {
+        const center = this.map.getView().getCenter();
+        if (!extent && !center) {
+            // In that case the view is not zoomed yet so we can't calculate the extent of the map,
+            // it will trigger a js error on calculateExtent function.
+            return false;
+        }
+        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+    }
+    /**
+     * Send the current bbox to the websocket
+     *
+     * @private
+     */
+    setBbox(extent, zoom) {
+        super.setBbox(extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+    }
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory(id) {
+        var _a, _b;
+        return this.api
+            .getFullTrajectory(id, this.mode, this.getGeneralizationLevelByZoom(Math.floor(((_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.getZoom()) || 0)))
+            .then((data) => {
+            const fullTrajectory = data.content;
+            this.vectorLayer.getSource().clear();
+            if (!fullTrajectory ||
+                !fullTrajectory.features ||
+                !fullTrajectory.features.length) {
+                return undefined;
+            }
+            const features = format.readFeatures(fullTrajectory);
+            this.vectorLayer.getSource().addFeatures(features);
+            return features;
+        });
+    }
+    /**
+     * Create a copy of the RealtimeLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RealtimeLayer} A RealtimeLayer
+     */
+    clone(newOptions) {
+        return new RealtimeLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}
+export default RealtimeLayer;

package/ol/layers/RoutingLayer.d.ts

@@ -0,0 +1,35 @@
+import { Vector as VectorSource } from 'ol/source';
+import { Vector } from 'ol/layer';
+import type { StyleLike } from 'ol/style/Style';
+import { Geometry } from 'ol/geom';
+import Feature from 'ol/Feature';
+import Layer from './Layer';
+import type { OlLayerOptions } from './Layer';
+export type OlRoutingLayerOptions = OlLayerOptions & {
+    olLayer?: Vector<VectorSource<Feature<Geometry>>>;
+    style?: StyleLike;
+};
+/**
+ * A class use to display vector data.
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+declare class RoutingLayer extends Layer {
+    olLayer?: Vector<VectorSource<Feature<Geometry>>>;
+    options: OlRoutingLayerOptions;
+    /**
+     * Constructor.
+     * @param {Object} [options]
+     * @param {ol/style/Style~StyleLike} [options.style] Style to be used for routes, uses (ol/StyleLike) [https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike] instances
+     */
+    constructor(options: OlRoutingLayerOptions);
+    /**
+     * Create a copy of the RoutingLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RoutingLayer} A RoutingLayer
+     */
+    clone(newOptions: OlRoutingLayerOptions): RoutingLayer;
+}
+export default RoutingLayer;
+//# sourceMappingURL=RoutingLayer.d.ts.map

package/ol/layers/RoutingLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutingLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/RoutingLayer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAAG;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AA8DF;;;;;GAKG;AACH,cAAM,YAAa,SAAQ,KAAK;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,OAAO,EAAE,qBAAqB,CAAM;IAEpC;;;;OAIG;gBACS,OAAO,EAAE,qBAAqB;IAW1C;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,qBAAqB;CAGxC;AAED,eAAe,YAAY,CAAC"}

package/ol/layers/RoutingLayer.js

@@ -0,0 +1,85 @@
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { Vector as VectorSource } from 'ol/source';
+import { Vector } from 'ol/layer';
+import Layer from './Layer';
+/** @private */
+const circleStyle = new Circle({
+    radius: 6,
+    fill: new Fill({
+        color: [255, 0, 0, 1],
+    }),
+    stroke: new Stroke({
+        color: [0, 0, 0, 1],
+        width: 1,
+    }),
+});
+/** @private */
+const blackBorder = new Style({
+    stroke: new Stroke({
+        color: [0, 0, 0, 1],
+        width: 5,
+    }),
+});
+/** @private */
+const redLine = new Style({
+    image: circleStyle,
+    stroke: new Stroke({
+        color: [255, 0, 0, 1],
+        width: 3,
+    }),
+});
+/** @private */
+const dashedRedLine = new Style({
+    image: circleStyle,
+    stroke: new Stroke({
+        color: [255, 0, 0, 1],
+        width: 3,
+        lineDash: [1, 10],
+    }),
+});
+/** @private */
+const defaultStyleFunction = (feature, resolution) => {
+    const minResolution = feature.get('minResolution');
+    const maxResolution = feature.get('maxResolution');
+    const inRange = resolution <= minResolution && resolution > maxResolution;
+    if (minResolution && maxResolution && !inRange) {
+        return [];
+    }
+    const mot = feature.get('mot');
+    if (mot !== 'foot') {
+        return [blackBorder, redLine];
+    }
+    return [dashedRedLine];
+};
+/**
+ * A class use to display vector data.
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class RoutingLayer extends Layer {
+    /**
+     * Constructor.
+     * @param {Object} [options]
+     * @param {ol/style/Style~StyleLike} [options.style] Style to be used for routes, uses (ol/StyleLike) [https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike] instances
+     */
+    constructor(options) {
+        super(options);
+        this.options = {};
+        this.olLayer =
+            options.olLayer ||
+                new Vector({
+                    source: new VectorSource(),
+                    style: options.style || defaultStyleFunction,
+                });
+    }
+    /**
+     * Create a copy of the RoutingLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RoutingLayer} A RoutingLayer
+     */
+    clone(newOptions) {
+        return new RoutingLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}
+export default RoutingLayer;