mobility-toolbox-js 3.0.0-beta.19 → 3.0.0-beta.20

package/common/mixins/RealtimeLayerMixin.js

@@ -2,30 +2,34 @@
 /* eslint-disable no-useless-constructor,@typescript-eslint/no-useless-constructor */
 /* eslint-disable no-unused-vars,@typescript-eslint/no-unused-vars */
 /* eslint-disable class-methods-use-this */
+import debounce from 'lodash.debounce';
+import throttle from 'lodash.throttle';
 /* eslint-disable max-classes-per-file */
 import { buffer, containsCoordinate, intersects } from 'ol/extent';
-import { unByKey } from 'ol/Observable';
 import GeoJSON from 'ol/format/GeoJSON';
-import debounce from 'lodash.debounce';
-import throttle from 'lodash.throttle';
+import { unByKey } from 'ol/Observable';
 import { fromLonLat } from 'ol/proj';
-import realtimeDefaultStyle from '../styles/realtimeDefaultStyle';
 import { RealtimeAPI, RealtimeModes } from '../../api';
-import renderTrajectories from '../utils/renderTrajectories';
+import realtimeDefaultStyle from '../styles/realtimeDefaultStyle';
 import * as realtimeConfig from '../utils/realtimeConfig';
+import renderTrajectories from '../utils/renderTrajectories';
 /**
  * RealtimeLayerInterface.
  * @private
  */
 export class RealtimeLayerInterface {
     /**
-     * Start the clock.
+     * Request the stopSequence and the fullTrajectory informations for a vehicle.
+     *
+     * @param {string} id The vehicle identifier (the  train_id property).
+     * @param {RealtimeMode} mode The mode to request. If not defined, the layer´s mode propetrty will be used.
+     * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
      */
-    start() { }
+    getTrajectoryInfos(id, mode) { }
     /**
-     * Stop the clock.
+     * Render the trajectories
      */
-    stop() { }
+    renderTrajectories() { }
     /**
      * Set the Realtime api's bbox.
      *
@@ -34,17 +38,13 @@ export class RealtimeLayerInterface {
      */
     setBbox(extent, zoom) { }
     /**
-     * Render the trajectories
+     * Start the clock.
      */
-    renderTrajectories() { }
+    start() { }
     /**
-     * Request the stopSequence and the fullTrajectory informations for a vehicle.
-     *
-     * @param {string} id The vehicle identifier (the  train_id property).
-     * @param {RealtimeMode} mode The mode to request. If not defined, the layer´s mode propetrty will be used.
-     * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
+     * Stop the clock.
      */
-    getTrajectoryInfos(id, mode) { }
+    stop() { }
 }
 /**
  * Mixin for RealtimeLayerInterface.
@@ -54,7 +54,7 @@ export class RealtimeLayerInterface {
  * @private
  */
 function RealtimeLayerMixin(Base) {
-    // @ts-ignore
+    // @ts-expect-error
     return class Mixin extends Base {
         constructor(options) {
             super(Object.assign({ hitTolerance: 10 }, options));
@@ -110,7 +110,7 @@ function RealtimeLayerMixin(Base) {
             this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
             // Define throttling and debounce render function
             this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, 50, { leading: false, trailing: true });
-            this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, 50, { leading: true, trailing: true, maxWait: 5000 });
+            this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, 50, { leading: true, maxWait: 5000, trailing: true });
             // Bind callbacks
             // this.onFeatureHover = this.onFeatureHover.bind(this);
             // this.onFeatureClick = this.onFeatureClick.bind(this);
@@ -122,6 +122,28 @@ function RealtimeLayerMixin(Base) {
             this.onDocumentVisibilityChange =
                 this.onDocumentVisibilityChange.bind(this);
         }
+        /**
+         * Add a trajectory.
+         * @param {RealtimeTrajectory} trajectory The trajectory to add.
+         * @private
+         */
+        addTrajectory(trajectory) {
+            if (!this.trajectories) {
+                this.trajectories = {};
+            }
+            const id = trajectory.properties.train_id;
+            if (id !== undefined) {
+                this.trajectories[id] = trajectory;
+            }
+            // @ts-expect-error  the parameter are set by subclasses
+            this.renderTrajectories();
+        }
+        attachToMap(map) {
+            super.attachToMap(map);
+            // To avoid browser hanging when the tab is not visible for a certain amount of time,
+            // We stop the rendering and the websocket when hide and start again when show.
+            document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
+        }
         /**
          * Define layer's properties.
          *
@@ -129,14 +151,20 @@ function RealtimeLayerMixin(Base) {
          */
         defineProperties(options) {
             (super.defineProperties || (() => { }))(options);
-            const { style, speed, pixelRatio, hoverVehicleId, selectedVehicleId, filter, sort, time, live, canvas, styleOptions, mode, bboxParameters, } = options;
+            const { bboxParameters, canvas, filter, hoverVehicleId, live, mode, pixelRatio, selectedVehicleId, sort, speed, style, styleOptions, time, } = options;
             let currCanvas = canvas;
             let currSpeed = speed || 1;
             let currTime = time || new Date();
             let currMode = mode || RealtimeModes.TOPOGRAPHIC;
             let currStyle = style || realtimeDefaultStyle;
             Object.defineProperties(this, {
-                isTrackerLayer: { value: true },
+                /**
+                 * Custom parameters to send on each BBOX request.
+                 */
+                bboxParameters: {
+                    value: bboxParameters,
+                    writable: true,
+                },
                 canvas: {
                     get: () => {
                         if (!currCanvas) {
@@ -148,6 +176,29 @@ function RealtimeLayerMixin(Base) {
                         currCanvas = cnvas;
                     },
                 },
+                /**
+                 * Function to filter which vehicles to display.
+                 */
+                filter: {
+                    value: filter,
+                    writable: true,
+                },
+                /**
+                 * Id of the hovered vehicle.
+                 */
+                hoverVehicleId: {
+                    value: hoverVehicleId,
+                    writable: true,
+                },
+                isTrackerLayer: { value: true },
+                /**
+                 * If true. The layer will always use Date.now() on the next tick to render the trajectories.
+                 * When true, setting the time property has no effect.
+                 */
+                live: {
+                    value: live === false ? live : true,
+                    writable: true,
+                },
                 /**
                  * Style function used to render a vehicle.
                  */
@@ -166,21 +217,26 @@ function RealtimeLayerMixin(Base) {
                     },
                 },
                 /**
-                 * Style function used to render a vehicle.
+                 * Id of the selected vehicle.
                  */
-                style: {
-                    get: () => currStyle,
-                    set: (newStyle) => {
-                        currStyle = newStyle;
-                        // @ts-ignore  function without parameters is defined in subclasses
-                        this.renderTrajectories();
-                    },
+                pixelRatio: {
+                    value: pixelRatio ||
+                        (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
+                    writable: true,
                 },
                 /**
-                 * Custom options to pass as last parameter of the style function.
+                 * Id of the selected vehicle.
                  */
-                styleOptions: {
-                    value: Object.assign(Object.assign({}, realtimeConfig), (styleOptions || {})),
+                selectedVehicleId: {
+                    value: selectedVehicleId,
+                    writable: true,
+                },
+                /**
+                 * Function to sort the vehicles to display.
+                 */
+                sort: {
+                    value: sort,
+                    writable: true,
                 },
                 /**
                  * Speed of the wheel of time.
@@ -194,33 +250,21 @@ function RealtimeLayerMixin(Base) {
                     },
                 },
                 /**
-                 * Custom parameters to send on each BBOX request.
-                 */
-                bboxParameters: {
-                    value: bboxParameters,
-                    writable: true,
-                },
-                /**
-                 * Function to filter which vehicles to display.
-                 */
-                filter: {
-                    value: filter,
-                    writable: true,
-                },
-                /**
-                 * Function to sort the vehicles to display.
+                 * Style function used to render a vehicle.
                  */
-                sort: {
-                    value: sort,
-                    writable: true,
+                style: {
+                    get: () => currStyle,
+                    set: (newStyle) => {
+                        currStyle = newStyle;
+                        // @ts-expect-error   function without parameters is defined in subclasses
+                        this.renderTrajectories();
+                    },
                 },
                 /**
-                 * If true. The layer will always use Date.now() on the next tick to render the trajectories.
-                 * When true, setting the time property has no effect.
+                 * Custom options to pass as last parameter of the style function.
                  */
-                live: {
-                    value: live === false ? live : true,
-                    writable: true,
+                styleOptions: {
+                    value: Object.assign(Object.assign({}, realtimeConfig), (styleOptions || {})),
                 },
                 /**
                  * Time used to display the trajectories. Can be a Date or a number in ms representing a Date.
@@ -229,8 +273,8 @@ function RealtimeLayerMixin(Base) {
                 time: {
                     get: () => currTime,
                     set: (newTime) => {
-                        currTime = newTime && newTime.getTime ? newTime : new Date(newTime);
-                        // @ts-ignore  function without parameters is defined in subclasses
+                        currTime = (newTime === null || newTime === void 0 ? void 0 : newTime.getTime) ? newTime : new Date(newTime);
+                        // @ts-expect-error   function without parameters is defined in subclasses
                         this.renderTrajectories();
                     },
                 },
@@ -242,25 +286,10 @@ function RealtimeLayerMixin(Base) {
                     writable: true,
                 },
                 /**
-                 * Id of the hovered vehicle.
-                 */
-                hoverVehicleId: {
-                    value: hoverVehicleId,
-                    writable: true,
-                },
-                /**
-                 * Id of the selected vehicle.
-                 */
-                selectedVehicleId: {
-                    value: selectedVehicleId,
-                    writable: true,
-                },
-                /**
-                 * Id of the selected vehicle.
+                 * If true, encapsulates the renderTrajectories calls in a debounce function.
                  */
-                pixelRatio: {
-                    value: pixelRatio ||
-                        (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
+                useDebounce: {
+                    value: options.useDebounce || false,
                     writable: true,
                 },
                 /**
@@ -277,13 +306,6 @@ function RealtimeLayerMixin(Base) {
                     value: options.useThrottle !== false,
                     writable: true,
                 },
-                /**
-                 * If true, encapsulates the renderTrajectories calls in a debounce function.
-                 */
-                useDebounce: {
-                    value: options.useDebounce || false,
-                    writable: true,
-                },
                 /**
                  * Debug properties.
                  */
@@ -297,12 +319,6 @@ function RealtimeLayerMixin(Base) {
                 // },
             });
         }
-        attachToMap(map) {
-            super.attachToMap(map);
-            // To avoid browser hanging when the tab is not visible for a certain amount of time,
-            // We stop the rendering and the websocket when hide and start again when show.
-            document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
-        }
         detachFromMap() {
             document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
             this.stop();
@@ -315,192 +331,45 @@ function RealtimeLayerMixin(Base) {
                 super.detachFromMap();
             }
         }
-        start() {
-            this.stop();
-            // Before starting to update trajectories, we remove trajectories that have
-            // a time_intervals in the past, it will
-            // avoid phantom train that are at the end of their route because we never
-            // received the deleted_vehicle event because we have changed the browser tab.
-            this.purgeOutOfDateTrajectories();
-            // @ts-ignore function without parameters must be define  in subclasses
-            this.renderTrajectories();
-            this.startUpdateTime();
-            this.api.open();
-            this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, undefined, this.isUpdateBboxOnMoveEnd);
-            this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, undefined, this.isUpdateBboxOnMoveEnd);
-            if (this.isUpdateBboxOnMoveEnd) {
-                // Update the bbox on each move end
-                // @ts-ignore function without parameters defined by subclasses
-                this.setBbox();
-            }
-            if (this.onStart) {
-                this.onStart(this);
-            }
-        }
         /**
-         * Start the clock.
-         * @private
+         * Request feature information for a given coordinate.
+         *
+         * @param {ol/coordinate~Coordinate} coordinate Coordinate.
+         * @param {Object} options Options See child classes to see which options are supported.
+         * @param {number} [options.resolution=1] The resolution of the map.
+         * @param {number} [options.nb=Infinity] The max number of vehicles to return.
+         * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
          */
-        startUpdateTime() {
-            this.stopUpdateTime();
-            this.updateTimeDelay = this.getRefreshTimeInMs() || 0;
-            this.updateTimeInterval = window.setInterval(() => {
-                // When live=true, we update the time with new Date();
-                if (this.live) {
-                    this.time = new Date();
+        getFeatureInfoAtCoordinate(coordinate, options) {
+            const { nb, resolution } = options;
+            const ext = buffer([...coordinate, ...coordinate], this.hitTolerance * resolution);
+            let trajectories = Object.values(this.trajectories || {});
+            if (this.sort) {
+                // @ts-expect-error good type must be defined
+                trajectories = trajectories.sort(this.sort);
+            }
+            const vehicles = [];
+            for (let i = 0; i < trajectories.length; i += 1) {
+                // @ts-expect-error  coordinate is added by the RealtimeLayer
+                const { coordinate: trajcoord } = trajectories[i].properties;
+                if (trajcoord && containsCoordinate(ext, trajcoord)) {
+                    vehicles.push(trajectories[i]);
                 }
-                else if (this.time && this.updateTimeDelay && this.speed) {
-                    this.time = new Date(this.time.getTime() + this.updateTimeDelay * this.speed);
+                if (vehicles.length === nb) {
+                    break;
                 }
-            }, this.updateTimeDelay);
-        }
-        stop() {
-            this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
-            this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
-            this.api.close();
-            if (this.onStop) {
-                this.onStop(this);
             }
+            return Promise.resolve({
+                coordinate,
+                features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
+                layer: this,
+            });
         }
         /**
-         * Stop the clock.
+         * Get the duration before the next update depending on zoom level.
+         *
          * @private
-         */
-        stopUpdateTime() {
-            if (this.updateTimeInterval) {
-                clearInterval(this.updateTimeInterval);
-                this.updateTimeInterval = undefined;
-            }
-        }
-        /**
-         * Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
-         *
-         * @param {object} viewState The view state of the map.
-         * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
-         * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
-         * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
-         * @param {number} [viewState.rotation = 0] Rotation of the map to render.
-         * @param {number} viewState.resolution Resolution of the map to render.
-         * @param {boolean} noInterpolate If true trajectories are not interpolated but
-         *   drawn at the last known coordinate. Use this for performance optimization
-         *   during map navigation.
-         * @private
-         */
-        renderTrajectoriesInternal(viewState, noInterpolate = false) {
-            var _a;
-            if (!this.map || !this.trajectories) {
-                return false;
-            }
-            const time = this.live ? Date.now() : (_a = this.time) === null || _a === void 0 ? void 0 : _a.getTime();
-            const trajectories = Object.values(this.trajectories);
-            // console.time('sort');
-            if (this.sort) {
-                // @ts-ignore
-                trajectories.sort(this.sort);
-            }
-            // console.timeEnd('sort');
-            if (!this.canvas || !this.style) {
-                return true;
-            }
-            // console.time('render');
-            this.renderState = renderTrajectories(this.canvas, trajectories, this.style, Object.assign(Object.assign({}, viewState), { pixelRatio: this.pixelRatio || 1, time }), Object.assign({ filter: this.filter, noInterpolate: (viewState.zoom || 0) < this.minZoomInterpolation
-                    ? true
-                    : noInterpolate, hoverVehicleId: this.hoverVehicleId, selectedVehicleId: this.selectedVehicleId }, this.styleOptions));
-            // console.timeEnd('render');
-            return true;
-        }
-        /**
-         * Render the trajectories requesting an animation frame and cancelling the previous one.
-         * This function must be overrided by children to provide the correct parameters.
-         *
-         * @param {object} viewState The view state of the map.
-         * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
-         * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
-         * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
-         * @param {number} [viewState.rotation = 0] Rotation of the map to render.
-         * @param {number} viewState.resolution Resolution of the map to render.
-         * @param {boolean} noInterpolate If true trajectories are not interpolated but
-         *   drawn at the last known coordinate. Use this for performance optimization
-         *   during map navigation.
-         * @private
-         */
-        renderTrajectories(viewState, noInterpolate) {
-            if (this.requestId) {
-                cancelAnimationFrame(this.requestId);
-                this.requestId = undefined;
-            }
-            if (!viewState) {
-                return;
-            }
-            if (!noInterpolate && this.useRequestAnimationFrame) {
-                this.requestId = requestAnimationFrame(() => {
-                    this.renderTrajectoriesInternal(viewState, noInterpolate);
-                });
-            }
-            else if (!noInterpolate && this.useDebounce) {
-                this.debounceRenderTrajectories(viewState, noInterpolate);
-            }
-            else if (!noInterpolate && this.useThrottle) {
-                this.throttleRenderTrajectories(viewState, noInterpolate);
-            }
-            else {
-                this.renderTrajectoriesInternal(viewState, noInterpolate);
-            }
-        }
-        setBbox(extent, zoom) {
-            // Clean trajectories before sending the new bbox
-            // Purge trajectories:
-            // - which are outside the extent
-            // - when it's bus and zoom level is too low for them
-            if (this.trajectories && extent && zoom) {
-                const keys = Object.keys(this.trajectories);
-                for (let i = keys.length - 1; i >= 0; i -= 1) {
-                    this.purgeTrajectory(this.trajectories[keys[i]], extent, zoom);
-                }
-            }
-            // The backend only supports non float value
-            const zoomFloor = Math.floor(zoom);
-            if (!extent || Number.isNaN(zoomFloor)) {
-                return;
-            }
-            // The extent does not need to be precise under meter, so we round floor/ceil the values.
-            const [minX, minY, maxX, maxY] = extent;
-            const bbox = [
-                Math.floor(minX),
-                Math.floor(minY),
-                Math.ceil(maxX),
-                Math.ceil(maxY),
-                zoomFloor,
-            ];
-            /* @private */
-            this.generalizationLevel = this.getGeneralizationLevelByZoom(zoomFloor);
-            if (this.generalizationLevel) {
-                bbox.push(`gen=${this.generalizationLevel}`);
-            }
-            /* @private */
-            this.mots = this.getMotsByZoom(zoomFloor);
-            if (this.mots) {
-                bbox.push(`mots=${this.mots}`);
-            }
-            if (this.tenant) {
-                bbox.push(`tenant=${this.tenant}`);
-            }
-            if (this.mode !== 'topographic') {
-                bbox.push(`channel_prefix=${this.mode}`);
-            }
-            if (this.bboxParameters) {
-                Object.entries(this.bboxParameters).forEach(([key, value]) => {
-                    bbox.push(`${key}=${value}`);
-                });
-            }
-            // Extent and zoom level are mandatory.
-            this.api.bbox = bbox;
-        }
-        /**
-         * Get the duration before the next update depending on zoom level.
-         *
-         * @private
-         * @param {number} zoom
+         * @param {number} zoom
          */
         getRefreshTimeInMs(zoom = 0) {
             var _a;
@@ -513,7 +382,7 @@ function RealtimeLayerMixin(Base) {
                 this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true });
             }
             else if (this.useDebounce) {
-                this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true, maxWait: 5000 });
+                this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, maxWait: 5000, trailing: true });
             }
             if ((_a = this.api) === null || _a === void 0 ? void 0 : _a.buffer) {
                 const [, size] = this.api.buffer;
@@ -521,51 +390,6 @@ function RealtimeLayerMixin(Base) {
             }
             return nextTick;
         }
-        /**
-         * Get vehicle.
-         * @param {function} filterFc A function use to filter results.
-         * @return {Array<Object>} Array of vehicle.
-         */
-        getVehicle(filterFc) {
-            return ((this.trajectories &&
-                // @ts-ignore
-                Object.values(this.trajectories).filter(filterFc)) ||
-                []);
-        }
-        /**
-         * Request feature information for a given coordinate.
-         *
-         * @param {ol/coordinate~Coordinate} coordinate Coordinate.
-         * @param {Object} options Options See child classes to see which options are supported.
-         * @param {number} [options.resolution=1] The resolution of the map.
-         * @param {number} [options.nb=Infinity] The max number of vehicles to return.
-         * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
-         */
-        getFeatureInfoAtCoordinate(coordinate, options) {
-            const { resolution, nb } = options;
-            const ext = buffer([...coordinate, ...coordinate], this.hitTolerance * resolution);
-            let trajectories = Object.values(this.trajectories || {});
-            if (this.sort) {
-                // @ts-ignore
-                trajectories = trajectories.sort(this.sort);
-            }
-            const vehicles = [];
-            for (let i = 0; i < trajectories.length; i += 1) {
-                // @ts-expect-error coordinate is added by the RealtimeLayer
-                const { coordinate: trajcoord } = trajectories[i].properties;
-                if (trajcoord && containsCoordinate(ext, trajcoord)) {
-                    vehicles.push(trajectories[i]);
-                }
-                if (vehicles.length === nb) {
-                    break;
-                }
-            }
-            return Promise.resolve({
-                layer: this,
-                features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
-                coordinate,
-            });
-        }
         /**
          * Request the stopSequence and the fullTrajectory informations for a vehicle.
          *
@@ -582,12 +406,108 @@ function RealtimeLayerMixin(Base) {
             ];
             return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
                 const response = {
-                    stopSequence,
                     fullTrajectory,
+                    stopSequence,
                 };
                 return response;
             });
         }
+        /**
+         * Get vehicle.
+         * @param {function} filterFc A function use to filter results.
+         * @return {Array<Object>} Array of vehicle.
+         */
+        getVehicle(filterFc) {
+            return ((this.trajectories &&
+                // @ts-expect-error good type must be defined
+                Object.values(this.trajectories).filter(filterFc)) ||
+                []);
+        }
+        highlightVehicle(id) {
+            if (this.hoverVehicleId !== id) {
+                /** @private */
+                this.hoverVehicleId = id;
+                // @ts-expect-error good type must be defined
+                this.renderTrajectories(true);
+            }
+        }
+        /**
+         * Callback on websocket's deleted_vehicles channel events.
+         * It removes the trajectory from the list.
+         *
+         * @private
+         * @override
+         */
+        onDeleteTrajectoryMessage(data) {
+            if (!data.content) {
+                return;
+            }
+            this.removeTrajectory(data.content);
+        }
+        onDocumentVisibilityChange() {
+            if (document.hidden) {
+                this.stop();
+                // Since we don't receive deleted_vehicles event when docuement
+                // is hidden. We have to clean all the trajectories for a fresh
+                // start when the document is visible again.
+                this.trajectories = {};
+            }
+            else {
+                if (this.getVisible() === false) {
+                    return;
+                }
+                this.start();
+            }
+        }
+        /**
+         * Callback on websocket's trajectory channel events.
+         * It adds a trajectory to the list.
+         *
+         * @private
+         */
+        onTrajectoryMessage(data) {
+            if (!data.content) {
+                return;
+            }
+            const trajectory = data.content;
+            const { geometry, properties: { raw_coordinates: rawCoordinates, time_since_update: timeSinceUpdate, train_id: id, }, } = trajectory;
+            // ignore old events [SBAHNM-97]
+            // @ts-expect-error can be undefined
+            if (timeSinceUpdate < 0) {
+                return;
+            }
+            // console.time(`onTrajectoryMessage${data.content.properties.train_id}`);
+            // @ts-expect-error    default value for extentand zoom are provided by subclasses
+            if (this.purgeTrajectory(trajectory)) {
+                return;
+            }
+            if (this.debug &&
+                this.mode === RealtimeModes.TOPOGRAPHIC &&
+                rawCoordinates) {
+                // @ts-expect-error
+                trajectory.properties.olGeometry = this.format.readGeometry({
+                    coordinates: fromLonLat(rawCoordinates, this.map.getView().getProjection()),
+                    type: 'Point',
+                });
+            }
+            else {
+                // @ts-expect-error
+                trajectory.properties.olGeometry = this.format.readGeometry(geometry);
+            }
+            // TODO Make sure the timeOffset is useful. May be we can remove it.
+            // @ts-expect-error
+            trajectory.properties.timeOffset = Date.now() - data.timestamp;
+            this.addTrajectory(trajectory);
+        }
+        /**
+         * On zoomend we adjust the time interval of the update of vehicles positions.
+         *
+         * @param evt Event that triggered the function.
+         * @private
+         */
+        onZoomEnd() {
+            this.startUpdateTime();
+        }
         /**
          * Remove all trajectories that are in the past.
          */
@@ -616,7 +536,7 @@ function RealtimeLayerMixin(Base) {
          * @private
          */
         purgeTrajectory(trajectory, extent, zoom) {
-            const { type, bounds } = trajectory.properties;
+            const { bounds, type } = trajectory.properties;
             if ((this.isUpdateBboxOnMoveEnd && !intersects(extent, bounds)) ||
                 (this.mots && !this.mots.includes(type))) {
                 this.removeTrajectory(trajectory);
@@ -624,22 +544,6 @@ function RealtimeLayerMixin(Base) {
             }
             return false;
         }
-        /**
-         * Add a trajectory.
-         * @param {RealtimeTrajectory} trajectory The trajectory to add.
-         * @private
-         */
-        addTrajectory(trajectory) {
-            if (!this.trajectories) {
-                this.trajectories = {};
-            }
-            const id = trajectory.properties.train_id;
-            if (id !== undefined) {
-                this.trajectories[id] = trajectory;
-            }
-            // @ts-ignore the parameter are set by subclasses
-            this.renderTrajectories();
-        }
         removeTrajectory(trajectoryOrId) {
             var _a;
             let id;
@@ -654,96 +558,192 @@ function RealtimeLayerMixin(Base) {
             }
         }
         /**
-         * On zoomend we adjust the time interval of the update of vehicles positions.
+         * Render the trajectories requesting an animation frame and cancelling the previous one.
+         * This function must be overrided by children to provide the correct parameters.
          *
-         * @param evt Event that triggered the function.
+         * @param {object} viewState The view state of the map.
+         * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
+         * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
+         * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
+         * @param {number} [viewState.rotation = 0] Rotation of the map to render.
+         * @param {number} viewState.resolution Resolution of the map to render.
+         * @param {boolean} noInterpolate If true trajectories are not interpolated but
+         *   drawn at the last known coordinate. Use this for performance optimization
+         *   during map navigation.
          * @private
          */
-        onZoomEnd() {
-            this.startUpdateTime();
-        }
-        onDocumentVisibilityChange() {
-            if (document.hidden) {
-                this.stop();
-                // Since we don't receive deleted_vehicles event when docuement
-                // is hidden. We have to clean all the trajectories for a fresh
-                // start when the document is visible again.
-                this.trajectories = {};
+        renderTrajectories(viewState, noInterpolate) {
+            if (this.requestId) {
+                cancelAnimationFrame(this.requestId);
+                this.requestId = undefined;
+            }
+            if (!viewState) {
+                return;
+            }
+            if (!noInterpolate && this.useRequestAnimationFrame) {
+                this.requestId = requestAnimationFrame(() => {
+                    this.renderTrajectoriesInternal(viewState, noInterpolate);
+                });
+            }
+            else if (!noInterpolate && this.useDebounce) {
+                this.debounceRenderTrajectories(viewState, noInterpolate);
+            }
+            else if (!noInterpolate && this.useThrottle) {
+                this.throttleRenderTrajectories(viewState, noInterpolate);
             }
             else {
-                if (this.visible === false) {
-                    return;
-                }
-                this.start();
+                this.renderTrajectoriesInternal(viewState, noInterpolate);
             }
         }
         /**
-         * Callback on websocket's trajectory channel events.
-         * It adds a trajectory to the list.
+         * Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
          *
+         * @param {object} viewState The view state of the map.
+         * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
+         * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
+         * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
+         * @param {number} [viewState.rotation = 0] Rotation of the map to render.
+         * @param {number} viewState.resolution Resolution of the map to render.
+         * @param {boolean} noInterpolate If true trajectories are not interpolated but
+         *   drawn at the last known coordinate. Use this for performance optimization
+         *   during map navigation.
          * @private
          */
-        onTrajectoryMessage(data) {
-            if (!data.content) {
-                return;
+        renderTrajectoriesInternal(viewState, noInterpolate = false) {
+            var _a;
+            if (!this.map || !this.trajectories) {
+                return false;
             }
-            const trajectory = data.content;
-            const { geometry, properties: { train_id: id, time_since_update: timeSinceUpdate, raw_coordinates: rawCoordinates, }, } = trajectory;
-            // ignore old events [SBAHNM-97]
-            // @ts-ignore
-            if (timeSinceUpdate < 0) {
-                return;
+            const time = this.live ? Date.now() : (_a = this.time) === null || _a === void 0 ? void 0 : _a.getTime();
+            const trajectories = Object.values(this.trajectories);
+            // console.time('sort');
+            if (this.sort) {
+                // @ts-expect-error type problem
+                trajectories.sort(this.sort);
             }
-            // console.time(`onTrajectoryMessage${data.content.properties.train_id}`);
-            // @ts-ignore   default value for extentand zoom are provided by subclasses
-            if (this.purgeTrajectory(trajectory)) {
+            // console.timeEnd('sort');
+            if (!this.canvas || !this.style) {
+                return true;
+            }
+            // console.time('render');
+            this.renderState = renderTrajectories(this.canvas, trajectories, this.style, Object.assign(Object.assign({}, viewState), { pixelRatio: this.pixelRatio || 1, time }), Object.assign({ filter: this.filter, hoverVehicleId: this.hoverVehicleId, noInterpolate: (viewState.zoom || 0) < this.minZoomInterpolation
+                    ? true
+                    : noInterpolate, selectedVehicleId: this.selectedVehicleId }, this.styleOptions));
+            // console.timeEnd('render');
+            return true;
+        }
+        selectVehicle(id) {
+            if (this.selectedVehicleId !== id) {
+                /** @private */
+                this.selectedVehicleId = id;
+                // @ts-expect-error
+                this.renderTrajectories(true);
+            }
+        }
+        setBbox(extent, zoom) {
+            // Clean trajectories before sending the new bbox
+            // Purge trajectories:
+            // - which are outside the extent
+            // - when it's bus and zoom level is too low for them
+            if (this.trajectories && extent && zoom) {
+                const keys = Object.keys(this.trajectories);
+                for (let i = keys.length - 1; i >= 0; i -= 1) {
+                    this.purgeTrajectory(this.trajectories[keys[i]], extent, zoom);
+                }
+            }
+            // The backend only supports non float value
+            const zoomFloor = Math.floor(zoom);
+            if (!extent || Number.isNaN(zoomFloor)) {
                 return;
             }
-            if (this.debug &&
-                this.mode === RealtimeModes.TOPOGRAPHIC &&
-                rawCoordinates) {
-                // @ts-ignore
-                trajectory.properties.olGeometry = this.format.readGeometry({
-                    type: 'Point',
-                    coordinates: fromLonLat(rawCoordinates, this.map.getView().getProjection()),
+            // The extent does not need to be precise under meter, so we round floor/ceil the values.
+            const [minX, minY, maxX, maxY] = extent;
+            const bbox = [
+                Math.floor(minX),
+                Math.floor(minY),
+                Math.ceil(maxX),
+                Math.ceil(maxY),
+                zoomFloor,
+            ];
+            /* @private */
+            this.generalizationLevel = this.getGeneralizationLevelByZoom(zoomFloor);
+            if (this.generalizationLevel) {
+                bbox.push(`gen=${this.generalizationLevel}`);
+            }
+            /* @private */
+            this.mots = this.getMotsByZoom(zoomFloor);
+            if (this.mots) {
+                bbox.push(`mots=${this.mots}`);
+            }
+            if (this.tenant) {
+                bbox.push(`tenant=${this.tenant}`);
+            }
+            if (this.mode !== 'topographic') {
+                bbox.push(`channel_prefix=${this.mode}`);
+            }
+            if (this.bboxParameters) {
+                Object.entries(this.bboxParameters).forEach(([key, value]) => {
+                    bbox.push(`${key}=${value}`);
                 });
             }
-            else {
-                // @ts-ignore
-                trajectory.properties.olGeometry = this.format.readGeometry(geometry);
+            // Extent and zoom level are mandatory.
+            this.api.bbox = bbox;
+        }
+        start() {
+            this.stop();
+            // Before starting to update trajectories, we remove trajectories that have
+            // a time_intervals in the past, it will
+            // avoid phantom train that are at the end of their route because we never
+            // received the deleted_vehicle event because we have changed the browser tab.
+            this.purgeOutOfDateTrajectories();
+            // @ts-expect-error  function without parameters must be define  in subclasses
+            this.renderTrajectories();
+            this.startUpdateTime();
+            this.api.open();
+            this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, undefined, this.isUpdateBboxOnMoveEnd);
+            this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, undefined, this.isUpdateBboxOnMoveEnd);
+            if (this.isUpdateBboxOnMoveEnd) {
+                // Update the bbox on each move end
+                // @ts-expect-error  function without parameters defined by subclasses
+                this.setBbox();
+            }
+            if (this.onStart) {
+                this.onStart(this);
             }
-            // TODO Make sure the timeOffset is useful. May be we can remove it.
-            // @ts-ignore
-            trajectory.properties.timeOffset = Date.now() - data.timestamp;
-            this.addTrajectory(trajectory);
         }
         /**
-         * Callback on websocket's deleted_vehicles channel events.
-         * It removes the trajectory from the list.
-         *
+         * Start the clock.
          * @private
-         * @override
          */
-        onDeleteTrajectoryMessage(data) {
-            if (!data.content) {
-                return;
-            }
-            this.removeTrajectory(data.content);
+        startUpdateTime() {
+            this.stopUpdateTime();
+            this.updateTimeDelay = this.getRefreshTimeInMs() || 0;
+            this.updateTimeInterval = window.setInterval(() => {
+                // When live=true, we update the time with new Date();
+                if (this.live) {
+                    this.time = new Date();
+                }
+                else if (this.time && this.updateTimeDelay && this.speed) {
+                    this.time = new Date(this.time.getTime() + this.updateTimeDelay * this.speed);
+                }
+            }, this.updateTimeDelay);
         }
-        highlightVehicle(id) {
-            if (this.hoverVehicleId !== id) {
-                /** @private */
-                this.hoverVehicleId = id;
-                // @ts-ignore
-                this.renderTrajectories(true);
+        stop() {
+            this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
+            this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
+            this.api.close();
+            if (this.onStop) {
+                this.onStop(this);
             }
         }
-        selectVehicle(id) {
-            if (this.selectedVehicleId !== id) {
-                /** @private */
-                this.selectedVehicleId = id;
-                // @ts-ignore
-                this.renderTrajectories(true);
+        /**
+         * Stop the clock.
+         * @private
+         */
+        stopUpdateTime() {
+            if (this.updateTimeInterval) {
+                clearInterval(this.updateTimeInterval);
+                this.updateTimeInterval = undefined;
             }
         }
     };