mobility-toolbox-js 3.0.0-beta.3 → 3.0.0-beta.32

package/ol/layers/RealtimeLayer.d.ts

@@ -0,0 +1,283 @@
+import { Map, MapEvent } from 'ol';
+import Feature, { FeatureLike } from 'ol/Feature';
+import GeoJSON from 'ol/format/GeoJSON';
+import { Vector as VectorLayer } from 'ol/layer';
+import Layer from 'ol/layer/Layer';
+import { ObjectEvent } from 'ol/Object';
+import Source from 'ol/source/Source';
+import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
+import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
+import { RealtimeFullTrajectory, RealtimeTrainId, RealtimeTrajectory, ViewState } from '../../types';
+import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
+export type RealtimeLayerOptions = RealtimeLayerMixinOptions & {
+    allowRenderWhenAnimating?: boolean;
+    fullTrajectoryStyle?: (feature: FeatureLike, resolution: number, options: any) => void;
+};
+declare const RealtimeLayer_base: {
+    new (options: RealtimeLayerMixinOptions): {
+        [x: string]: any;
+        [x: symbol]: any;
+        api: import("..").RealtimeAPI;
+        bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
+        canvas?: import("../../types").AnyCanvas;
+        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
+        debug: boolean;
+        filter?: import("../../common/typedefs").FilterFunction;
+        format: GeoJSON;
+        generalizationLevel?: import("../../types").RealtimeGeneralizationLevel;
+        generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
+        getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
+        getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
+        getRenderTimeIntervalByZoom: (zoom: number) => number;
+        hoverVehicleId?: RealtimeTrainId;
+        isUpdateBboxOnMoveEnd: boolean;
+        live?: boolean;
+        minZoomInterpolation: number;
+        mode: import("../../types").RealtimeMode;
+        mots?: import("../../types").RealtimeMot[];
+        motsByZoom: import("../../types").RealtimeMot[][];
+        onStart?: ((realtimeLayer: import("../../types").AnyLayer) => void) | undefined;
+        onStop?: ((realtimeLayer: import("../../types").AnyLayer) => void) | undefined;
+        pixelRatio?: number;
+        renderState?: import("../../types").RealtimeRenderState;
+        renderTimeIntervalByZoom: number[];
+        requestId?: number;
+        selectedVehicle: RealtimeTrajectory;
+        selectedVehicleId?: RealtimeTrainId;
+        sort?: import("../../common/typedefs").SortFunction;
+        speed?: number;
+        style?: import("../../types").RealtimeStyleFunction;
+        styleOptions?: import("../../types").RealtimeStyleOptions;
+        tenant: import("../../types").RealtimeTenant;
+        throttleRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
+        time?: Date;
+        trajectories?: Record<RealtimeTrainId, RealtimeTrajectory>;
+        updateTimeDelay?: number;
+        updateTimeInterval?: number;
+        useDebounce?: boolean;
+        useRequestAnimationFrame?: boolean;
+        useThrottle?: boolean;
+        visibilityRef: import("ol/events").EventsKey;
+        addTrajectory(trajectory: RealtimeTrajectory): void;
+        attachToMap(map: import("../../types").AnyMap): void;
+        defineProperties(options: RealtimeLayerMixinOptions): void;
+        detachFromMap(): void;
+        getFeatureInfoAtCoordinate(coordinate: import("ol/coordinate").Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<import("../../types").LayerGetFeatureInfoResponse>;
+        getRefreshTimeInMs(zoom?: number | undefined): number;
+        getTrajectoryInfos(id: RealtimeTrainId): Promise<{
+            fullTrajectory: WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | WebSocketAPIMessageEventData<RealtimeFullTrajectory>;
+            stopSequence: WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | WebSocketAPIMessageEventData<RealtimeFullTrajectory>;
+        }>;
+        getVehicle(filterFc: import("../../common/typedefs").FilterFunction): RealtimeTrajectory[];
+        highlightVehicle(id: RealtimeTrainId): void;
+        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrainId>): void;
+        onDocumentVisibilityChange(): void;
+        onTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrajectory>): void;
+        onZoomEnd(): void;
+        purgeOutOfDateTrajectories(): void;
+        purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+        removeTrajectory(trajectoryOrId: RealtimeTrainId | RealtimeTrajectory): void;
+        renderTrajectories(viewState: undefined | ViewState, noInterpolate: boolean | undefined): void;
+        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
+        selectVehicle(id: RealtimeTrainId): void;
+        setBbox(extent: [number, number, number, number], zoom: number): void;
+        start(): void;
+        startUpdateTime(): void;
+        stop(): void;
+        stopUpdateTime(): void;
+    };
+} & {
+    new (...args: any[]): {
+        olEventsKeys: import("ol/events").EventsKey[];
+        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions;
+        attachToMap(map: Map): void;
+        detachFromMap(): void;
+        flat(): any[];
+        onChildrenChange(oldValue: Layer[]): void;
+        setMapInternal: ((map: Map) => void) & ((map: import("ol/Map").default | null) => void);
+        children: Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        get copyrights(): string;
+        set copyrights(newCopyrights: string | string[]);
+        disabled: boolean;
+        readonly group: string;
+        hitTolerance: number;
+        readonly key: string;
+        readonly map: Map;
+        readonly name: string;
+        olLayer: Layer;
+        parent: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        visible: boolean;
+        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        un: import("ol/layer/Layer").LayerOnSignature<void>;
+        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
+        getSource: () => Source | null;
+        getRenderSource: () => Source | null;
+        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<Array<import("ol/Feature").FeatureLike>>;
+        getData: (pixel: import("ol/pixel").Pixel) => Uint8ClampedArray | Uint8Array | Float32Array | DataView | null;
+        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
+        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => Array<string>;
+        unrender: () => void;
+        getDeclutter: () => string;
+        renderDeclutter: (frameState: import("ol/Map").FrameState, layerState: import("ol/layer/Layer").State) => void;
+        renderDeferred: (frameState: import("ol/Map").FrameState) => void;
+        getMapInternal: () => import("ol/Map").default | null;
+        setMap: (map: import("ol/Map").default | null) => void;
+        setSource: (source: Source | null) => void;
+        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
+        hasRenderer: () => boolean;
+        getBackground: () => import("ol/layer/Base").BackgroundColor | false;
+        getClassName: () => string;
+        getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
+        getLayersArray: (array?: import("ol/layer/Layer").default<import("ol/source/Source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/layer/Layer").default>;
+        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => Array<import("ol/layer/Layer").State>;
+        getExtent: () => import("ol/extent").Extent | undefined;
+        getMaxResolution: () => number;
+        getMinResolution: () => number;
+        getMinZoom: () => number;
+        getMaxZoom: () => number;
+        getOpacity: () => number;
+        getSourceState: () => import("ol/source/Source").State;
+        getVisible: () => boolean;
+        getZIndex: () => number | undefined;
+        setBackground: (background?: import("ol/layer/Base").BackgroundColor | undefined) => void;
+        setExtent: (extent: import("ol/extent").Extent | undefined) => void;
+        setMaxResolution: (maxResolution: number) => void;
+        setMinResolution: (minResolution: number) => void;
+        setMaxZoom: (maxZoom: number) => void;
+        setMinZoom: (minZoom: number) => void;
+        setOpacity: (opacity: number) => void;
+        setVisible: (visible: boolean) => void;
+        setZIndex: (zindex: number) => void;
+        get: (key: string) => any;
+        getKeys: () => Array<string>;
+        getProperties: () => {
+            [x: string]: any;
+        };
+        getPropertiesInternal: () => {
+            [x: string]: any;
+        } | null;
+        hasProperties: () => boolean;
+        notify: (key: string, oldValue: any) => void;
+        addChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        removeChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        set: (key: string, value: any, silent?: boolean | undefined) => void;
+        setProperties: (values: {
+            [x: string]: any;
+        }, silent?: boolean | undefined) => void;
+        unset: (key: string, silent?: boolean | undefined) => void;
+        changed: () => void;
+        getRevision: () => number;
+        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        dispatchEvent: (event: import("ol/events/Event").default | string) => boolean | undefined;
+        getListeners: (type: string) => Array<import("ol/events").Listener> | undefined;
+        hasListener: (type?: string | undefined) => boolean;
+        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        dispose: () => void;
+    };
+} & typeof Layer;
+/**
+ * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new RealtimeLayer({
+ *   apiKey: "yourApiKey"
+ *   // allowRenderWhenAnimating: false,
+ *   // url: "wss://api.geops.io/tracker-ws/v1/",
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {ol/layer/Layer~Layer}
+ *
+ * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
+ * @public
+ */
+declare class RealtimeLayer extends RealtimeLayer_base {
+    /** @private */
+    allowRenderWhenAnimating?: boolean;
+    vectorLayer: VectorLayer<Feature>;
+    /**
+     * Constructor.
+     *
+     * @param {RealtimeLayerOptions} options
+     * @param {boolean} [options.allowRenderWhenAnimating=false] Allow rendering of the layer when the map is animating.
+     * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
+     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
+     *
+     */
+    constructor(options: RealtimeLayerOptions);
+    /** @private */
+    attachToMap(map: Map): void;
+    /**
+     * Create a copy of the RealtimeLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RealtimeLayer} A RealtimeLayer
+     */
+    clone(newOptions: RealtimeLayerOptions): RealtimeLayer;
+    /**
+     * @private
+     */
+    createRenderer(): RealtimeLayerRenderer;
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     * @private
+     */
+    /**
+     * Destroy the container of the tracker.
+     * @private
+     */
+    detachFromMap(): void;
+    /**
+     * Return the delay in ms before the next rendering.
+     * @private
+     */
+    getRefreshTimeInMs(): number;
+    highlight(feature: Feature): void;
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory(id: RealtimeTrainId): Promise<Feature[] | undefined>;
+    /**
+     * Function called on moveend event only when the zoom has changed.
+     *
+     * @param {ol/MapEvent~MapEvent} evt Moveend event.
+     * @private
+     * @override
+     */
+    onMoveEnd(evt: MapEvent | ObjectEvent): void;
+    onZoomEnd(): void;
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+    renderTrajectories(noInterpolate: boolean): void;
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     * @override
+     */
+    renderTrajectoriesInternal(viewState: ViewState, noInterpolate: boolean): boolean;
+    select(feature: Feature): void;
+    /**
+     * Send the current bbox to the websocket
+     *
+     * @private
+     */
+    setBbox(extent?: [number, number, number, number], zoom?: number): void;
+}
+export default RealtimeLayer;

package/ol/layers/RealtimeLayer.js

@@ -1,17 +1,17 @@
+import debounce from 'lodash.debounce';
 import GeoJSON from 'ol/format/GeoJSON';
 import { Vector as VectorLayer } from 'ol/layer';
-import Source from 'ol/source/Source';
-import { Vector as VectorSource } from 'ol/source';
-import debounce from 'lodash.debounce';
 import Layer from 'ol/layer/Layer';
+import { Vector as VectorSource } from 'ol/source';
+import Source from 'ol/source/Source';
 import RealtimeLayerMixin from '../../common/mixins/RealtimeLayerMixin';
-import { fullTrajectoryStyle } from '../styles';
 import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
+import { fullTrajectoryStyle } from '../styles';
 /** @private */
 const format = new GeoJSON();
 /**
- * Responsible for loading and display data from the geOps Realtime API.
+ * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
  * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
@@ -30,7 +30,7 @@ const format = new GeoJSON();
  * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
  * @public
  */
-// @ts-ignore
+// @ts-expect-error
 class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
     /**
      * Constructor.
@@ -52,45 +52,42 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
         // We store the layer used to highlight the full Trajectory
         /** @private */
         this.vectorLayer = new VectorLayer({
-            updateWhileAnimating: this.allowRenderWhenAnimating,
-            updateWhileInteracting: true,
             source: new VectorSource({ features: [] }),
             style: (feature, resolution) => {
                 return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.styleOptions);
             },
+            updateWhileAnimating: this.allowRenderWhenAnimating,
+            updateWhileInteracting: true,
         });
         // 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,
+            zoom: undefined,
         };
         /** @private */
         this.onZoomEndDebounced = debounce(this.onZoomEnd, 100);
         /** @private */
         this.onMoveEndDebounced = debounce(this.onMoveEnd, 100);
     }
-    /**
-     * @private
-     */
-    createRenderer() {
-        return new RealtimeLayerRenderer(this);
-    }
     /** @private */
     attachToMap(map) {
         super.attachToMap(map);
         if (this.map) {
             // If the layer is visible we start  the rendering clock
-            if (this.visible) {
+            if (this.getVisible()) {
                 this.start();
             }
+            // @ts-expect-error  - bad ts check RealtimeLayer is a BaseLayer
             const index = this.map.getLayers().getArray().indexOf(this);
             this.map.getLayers().insertAt(index, this.vectorLayer);
-            this.olListenersKeys.push(...this.map.on(['moveend', 'change:target'], (evt) => {
+            this.olEventsKeys.push(...this.map.on(['moveend', 'change:target'], 
+            // @ts-expect-error  - bad ol definitions
+            (evt) => {
                 const view = (evt.map || evt.target).getView();
-                if (view.getAnimating() || view.getInteracting()) {
+                if (!view || (view === null || view === void 0 ? void 0 : view.getAnimating()) || (view === null || view === void 0 ? void 0 : view.getInteracting())) {
                     return;
                 }
                 const zoom = view.getZoom();
@@ -102,7 +99,7 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
                 this.currentZoom = zoom;
                 this.onMoveEndDebounced(evt);
             }), this.on('change:visible', (evt) => {
-                if (evt.target.visible) {
+                if (evt.target.getVisible()) {
                     this.start();
                 }
                 else {
@@ -117,13 +114,18 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
         }
     }
     /**
-     * Destroy the container of the tracker.
+     * 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));
+    }
+    /**
      * @private
      */
-    detachFromMap() {
-        var _a;
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
-        super.detachFromMap();
+    createRenderer() {
+        return new RealtimeLayerRenderer(this);
     }
     /**
      * Render the trajectories using current map's size, resolution and rotation.
@@ -131,61 +133,25 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @overrides
      * @private
      */
-    // @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.
+     * Destroy the container of the tracker.
      * @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) {
-            /** @private */
-            this.renderedViewState = Object.assign({}, viewState);
-            if (this.getRenderer().container) {
-                this.getRenderer().container.style.transform = '';
-            }
-        }
-        return isRendered;
+    detachFromMap() {
+        var _a;
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
+        super.detachFromMap();
     }
     /**
      * Return the delay in ms before the next rendering.
      * @private
      */
     getRefreshTimeInMs() {
-        return super.getRefreshTimeInMs(this.map.getView().getZoom());
+        var _a;
+        return super.getRefreshTimeInMs(((_a = this.map.getView()) === null || _a === void 0 ? void 0 : _a.getZoom()) || 0);
+    }
+    highlight(feature) {
+        this.highlightVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
     }
     /**
      * On move end we update the websocket with the new bbox.
@@ -193,12 +159,36 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @private
      * @override
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onMoveEnd(evt) {
-        if (!this.isUpdateBboxOnMoveEnd || !this.visible) {
-            return;
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory(id) {
+        var _a, _b, _c, _d;
+        if (!id) {
+            (_b = (_a = this.vectorLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear(true);
+            return Promise.resolve([]);
         }
-        this.setBbox();
+        return this.api
+            .getFullTrajectory(id, this.mode, this.getGeneralizationLevelByZoom(Math.floor(((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0)))
+            .then((data) => {
+            var _a, _b, _c, _d, _e;
+            const fullTrajectory = data.content;
+            if (!((_a = fullTrajectory === null || fullTrajectory === void 0 ? void 0 : fullTrajectory.features) === null || _a === void 0 ? void 0 : _a.length)) {
+                return [];
+            }
+            const features = format.readFeatures(fullTrajectory);
+            (_c = (_b = this.vectorLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.clear(true);
+            if (features.length) {
+                (_e = (_d = this.vectorLayer) === null || _d === void 0 ? void 0 : _d.getSource()) === null || _e === void 0 ? void 0 : _e.addFeatures(features);
+            }
+            return features;
+        })
+            .catch(() => {
+            var _a, _b;
+            (_b = (_a = this.vectorLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear(true);
+            return [];
+        });
     }
     /**
      * Function called on moveend event only when the zoom has changed.
@@ -207,22 +197,37 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @private
      * @override
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onMoveEnd(evt) {
+        if (!this.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+            return;
+        }
+        this.setBbox();
+    }
     // eslint-disable-next-line no-unused-vars
     onZoomEnd() {
         super.onZoomEnd();
-        if (!this.isUpdateBboxOnMoveEnd || !this.visible) {
+        if (!this.isUpdateBboxOnMoveEnd || !this.getVisible()) {
             return;
         }
         if (this.selectedVehicleId) {
             this.highlightTrajectory(this.selectedVehicleId);
         }
     }
-    highlight(feature) {
-        this.highlightVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
-    }
-    select(feature) {
-        this.selectVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
-        this.highlightTrajectory(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    purgeTrajectory(trajectory, extent, zoom) {
+        var _a;
+        const center = (_a = this.map.getView()) === null || _a === void 0 ? void 0 : _a.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() || 0);
     }
     // /**
     //  * Update the cursor style when hovering a vehicle.
@@ -254,19 +259,61 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
     //   super.onFeatureClick(features, layer, coordinate);
     //   this.highlightTrajectory(this.selectedVehicleId);
     // }
+    // @ts-expect-error
+    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 === null || view === void 0 ? void 0 : view.getCenter())) {
+            return;
+        }
+        super.renderTrajectories({
+            center: view.getCenter(),
+            extent: view.calculateExtent(),
+            pixelRatio: this.pixelRatio,
+            resolution: view.getResolution(),
+            rotation: view.getRotation(),
+            size: this.map.getSize(),
+            zoom: view.getZoom(),
+        }, noInterpolate);
+    }
     /**
-     * Remove the trajectory form the list if necessary.
-     *
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
      * @private
+     * @override
      */
-    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.
+    renderTrajectoriesInternal(viewState, noInterpolate) {
+        var _a;
+        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView())) {
             return false;
         }
-        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+        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) {
+            /** @private */
+            this.renderedViewState = Object.assign({}, viewState);
+            // @ts-expect-error  - we are in the same class
+            const { container } = this.getRenderer();
+            if (container) {
+                container.style.transform = '';
+            }
+        }
+        return isRendered;
+    }
+    select(feature) {
+        this.selectVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
+        this.highlightTrajectory(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
     }
     /**
      * Send the current bbox to the websocket
@@ -274,45 +321,13 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @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;
-        if (!id) {
-            this.vectorLayer.getSource().clear(true);
-            return Promise.resolve([]);
+        var _a, _b, _c, _d;
+        const extentt = extent ||
+            ((_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.calculateExtent());
+        if (!extentt) {
+            return;
         }
-        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) => {
-            var _a;
-            const fullTrajectory = data.content;
-            if (!((_a = fullTrajectory === null || fullTrajectory === void 0 ? void 0 : fullTrajectory.features) === null || _a === void 0 ? void 0 : _a.length)) {
-                return [];
-            }
-            const features = format.readFeatures(fullTrajectory);
-            this.vectorLayer.getSource().clear(true);
-            if (features.length) {
-                this.vectorLayer.getSource().addFeatures(features);
-            }
-            return features;
-        })
-            .catch(() => {
-            this.vectorLayer.getSource().clear(true);
-            return [];
-        });
-    }
-    /**
-     * 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));
+        super.setBbox(extentt, zoom || ((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0);
     }
 }
 export default RealtimeLayer;