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

package/common/controls/StopFinderControlCommon.d.ts

@@ -2,12 +2,12 @@ import { Feature, FeatureCollection } from 'geojson';
 import { StopsAPI } from '../../api';
 import { StopsAPIOptions } from '../../api/StopsAPI';
 import { StopsParameters } from '../../types';
-export type StopFinderControlCommonOptions = StopsAPIOptions & {
-    element: HTMLElement;
-    placeholder?: string;
+export type StopFinderControlCommonOptions = {
     apiParams: StopsParameters;
+    element: HTMLElement;
     onSuggestionClick?: (suggestion: Feature, evt: MouseEvent) => void;
-};
+    placeholder?: string;
+} & StopsAPIOptions;
 /**
  * A class representing a stop finder control to display on map.
  * This class only draw the html elements.
@@ -16,14 +16,14 @@ export type StopFinderControlCommonOptions = StopsAPIOptions & {
  * @private
  */
 declare class StopFinderControlCommon {
-    apiParams: StopsParameters;
-    placeholder: string;
-    api: StopsAPI;
     abortController?: AbortController;
-    suggestionsElt?: HTMLElement;
-    inputElt?: HTMLInputElement;
+    api: StopsAPI;
+    apiParams: StopsParameters;
     clearElt?: HTMLDivElement;
+    inputElt?: HTMLInputElement;
     options?: StopFinderControlCommonOptions;
+    placeholder: string;
+    suggestionsElt?: HTMLElement;
     /**
      * Constructor.
      *
@@ -35,12 +35,12 @@ declare class StopFinderControlCommon {
      * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
      */
     constructor(options: StopFinderControlCommonOptions);
-    render(featureCollection?: FeatureCollection): void;
-    createElement({ element }: StopFinderControlCommonOptions): void;
     /**
      * Clear the search field and close the control.
      */
     clear(): void;
+    createElement({ element }: StopFinderControlCommonOptions): void;
+    render(featureCollection?: FeatureCollection): void;
     /**
      * Launch a search.
      *

package/common/controls/StopFinderControlCommon.js

@@ -18,7 +18,7 @@ class StopFinderControlCommon {
      * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
      */
     constructor(options) {
-        const { apiParams, apiKey, url, placeholder } = options || {};
+        const { apiKey, apiParams, placeholder, url } = options || {};
         this.apiParams = Object.assign({ limit: 20 }, (apiParams || {}));
         this.placeholder = placeholder || 'Search for a stop...';
         const apiOptions = { apiKey };
@@ -30,26 +30,16 @@ class StopFinderControlCommon {
         this.createElement(options);
         this.options = options;
     }
-    render(featureCollection) {
-        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
-        if (!this.suggestionsElt) {
+    /**
+     * Clear the search field and close the control.
+     */
+    clear() {
+        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
             return;
         }
-        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
+        this.inputElt.value = '';
         this.suggestionsElt.innerHTML = '';
-        suggestions.forEach((suggestion) => {
-            var _a, _b;
-            const suggElt = document.createElement('div');
-            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
-            suggElt.onclick = (evt) => {
-                var _a, _b;
-                (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onSuggestionClick) === null || _b === void 0 ? void 0 : _b.call(_a, suggestion, evt);
-            };
-            Object.assign(suggElt.style, {
-                padding: '5px 12px',
-            });
-            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
-        });
+        this.clearElt.style.display = 'none';
     }
     createElement({ element }) {
         // Create input element
@@ -61,7 +51,7 @@ class StopFinderControlCommon {
             var _a;
             (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
             this.abortController = new AbortController();
-            // @ts-ignore
+            // @ts-expect-error
             this.search(evt.target.value, this.abortController);
         };
         Object.assign(this.inputElt.style, {
@@ -72,33 +62,43 @@ class StopFinderControlCommon {
         this.suggestionsElt = document.createElement('div');
         Object.assign(this.suggestionsElt.style, {
             backgroundColor: 'white',
-            overflowY: 'auto',
             cursor: 'pointer',
+            overflowY: 'auto',
         });
         element.appendChild(this.suggestionsElt);
         this.clearElt = document.createElement('div');
         Object.assign(this.clearElt.style, {
+            cursor: 'pointer',
             display: 'none',
+            fontSize: '200%',
+            padding: '0 10px',
             position: 'absolute',
             right: '0',
-            padding: '0 10px',
-            fontSize: '200%',
-            cursor: 'pointer',
         });
         this.clearElt.innerHTML = '×';
         this.clearElt.onclick = () => this.clear();
         element.appendChild(this.clearElt);
     }
-    /**
-     * Clear the search field and close the control.
-     */
-    clear() {
-        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
+    render(featureCollection) {
+        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
+        if (!this.suggestionsElt) {
             return;
         }
-        this.inputElt.value = '';
+        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
         this.suggestionsElt.innerHTML = '';
-        this.clearElt.style.display = 'none';
+        suggestions.forEach((suggestion) => {
+            var _a, _b;
+            const suggElt = document.createElement('div');
+            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
+            suggElt.onclick = (evt) => {
+                var _a, _b;
+                (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onSuggestionClick) === null || _b === void 0 ? void 0 : _b.call(_a, suggestion, evt);
+            };
+            Object.assign(suggElt.style, {
+                padding: '5px 12px',
+            });
+            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
+        });
     }
     /**
      * Launch a search.

package/common/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./utils";
 export * from "./styles";
+export * from "./utils";

package/common/index.js

@@ -1,2 +1,2 @@
-export * from './utils';
 export * from './styles';
+export * from './utils';

package/common/mixins/RealtimeLayerMixin.d.ts

@@ -1,63 +1,65 @@
-import GeoJSON from 'ol/format/GeoJSON';
-import { EventsKey } from 'ol/events';
 import { Coordinate } from 'ol/coordinate';
+import { EventsKey } from 'ol/events';
+import GeoJSON from 'ol/format/GeoJSON';
 import { Options } from 'ol/layer/Layer';
 import { RealtimeAPI } from '../../api';
-import { AnyCanvas, AnyMap, AnyRealtimeLayer, LayerGetFeatureInfoOptions, RealtimeGeneralizationLevel, RealtimeMode, RealtimeMot, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOptions, RealtimeTenant, RealtimeTrainId, ViewState, AnyLayer, LayerGetFeatureInfoResponse, RealtimeTrajectory, AnyLayerable } from '../../types';
 import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
+import { AnyCanvas, AnyLayer, AnyLayerable, AnyMap, AnyRealtimeLayer, LayerGetFeatureInfoOptions, LayerGetFeatureInfoResponse, RealtimeGeneralizationLevel, RealtimeMode, RealtimeMot, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOptions, RealtimeTenant, RealtimeTrainId, RealtimeTrajectory, ViewState } from '../../types';
 import { FilterFunction, SortFunction } from '../typedefs';
-export type RealtimeLayerMixinOptions = Options & {
-    debug?: boolean;
-    mode?: RealtimeMode;
+export type RealtimeLayerMixinOptions = {
     api?: RealtimeAPI;
-    tenant?: RealtimeTenant;
-    minZoomInterpolation?: number;
+    apiKey?: string;
+    bbox?: (number | string)[];
+    bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
+    buffer?: number[];
+    canvas?: HTMLCanvasElement;
+    debug?: boolean;
+    filter?: FilterFunction;
+    generalizationLevelByZoom?: RealtimeGeneralizationLevel[];
+    getGeneralizationLevelByZoom?: (zoom: number, generalizationLevelByZoom: RealtimeGeneralizationLevel[]) => RealtimeGeneralizationLevel;
+    getMotsByZoom?: (zoom: number, motsByZoom: RealtimeMot[][]) => RealtimeMot[];
+    getRenderTimeIntervalByZoom?: (zoom: number, renderTimeIntervalByZoom: number[]) => number;
+    hoverVehicleId?: RealtimeTrainId;
     isUpdateBboxOnMoveEnd?: boolean;
+    live?: boolean;
+    minZoomInterpolation?: number;
+    mode?: RealtimeMode;
     motsByZoom?: RealtimeMot[][];
-    generalizationLevelByZoom?: RealtimeGeneralizationLevel[];
-    renderTimeIntervalByZoom?: number[];
-    style?: RealtimeStyleFunction;
-    speed?: number;
+    onStart?: (realtimeLayer: AnyRealtimeLayer) => void;
+    onStop?: (realtimeLayer: AnyRealtimeLayer) => void;
+    pingIntervalMs?: number;
     pixelRatio?: number;
-    hoverVehicleId?: RealtimeTrainId;
+    prefix?: string;
+    renderTimeIntervalByZoom?: number[];
     selectedVehicleId?: RealtimeTrainId;
-    filter?: FilterFunction;
     sort?: SortFunction;
-    time?: number;
-    live?: boolean;
-    canvas?: HTMLCanvasElement;
+    speed?: number;
+    style?: RealtimeStyleFunction;
     styleOptions?: RealtimeStyleOptions;
-    useRequestAnimationFrame?: boolean;
+    tenant?: RealtimeTenant;
+    time?: number;
+    url?: string;
     useDebounce?: boolean;
+    useRequestAnimationFrame?: boolean;
     useThrottle?: boolean;
-    getMotsByZoom?: (zoom: number, motsByZoom: RealtimeMot[][]) => RealtimeMot[];
-    getGeneralizationLevelByZoom?: (zoom: number, generalizationLevelByZoom: RealtimeGeneralizationLevel[]) => RealtimeGeneralizationLevel;
-    getRenderTimeIntervalByZoom?: (zoom: number, renderTimeIntervalByZoom: number[]) => number;
-    onStart?: (realtimeLayer: AnyRealtimeLayer) => void;
-    onStop?: (realtimeLayer: AnyRealtimeLayer) => void;
-    url?: string;
-    apiKey?: string;
-    prefix?: string;
-    bbox?: (number | string)[];
-    buffer?: number[];
-    pingIntervalMs?: number;
-    bboxParameters?: {
-        [index: string]: string | number | boolean | string[] | boolean[] | number[];
-    };
-};
+} & Options;
 /**
  * RealtimeLayerInterface.
  * @private
  */
 export declare 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(): void;
+    getTrajectoryInfos(id: string, mode: RealtimeMode): void;
     /**
-     * Stop the clock.
+     * Render the trajectories
      */
-    stop(): void;
+    renderTrajectories(): void;
     /**
      * Set the Realtime api's bbox.
      *
@@ -66,17 +68,13 @@ export declare class RealtimeLayerInterface {
      */
     setBbox(extent: [number, number, number, number], zoom: number): void;
     /**
-     * Render the trajectories
+     * Start the clock.
      */
-    renderTrajectories(): void;
+    start(): void;
     /**
-     * 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: string, mode: RealtimeMode): void;
+    stop(): void;
 }
 /**
  * Mixin for RealtimeLayerInterface.
@@ -89,103 +87,71 @@ declare function RealtimeLayerMixin<T extends AnyLayerable>(Base: T): {
     new (options: RealtimeLayerMixinOptions): {
         [x: string]: any;
         [x: symbol]: any;
-        debug: boolean;
-        trajectories?: {
-            [key: RealtimeTrainId]: RealtimeTrajectory;
-        };
-        canvas?: AnyCanvas;
-        mode: RealtimeMode;
         api: RealtimeAPI;
-        tenant: RealtimeTenant;
-        bboxParameters?: {
-            [index: string]: string | number | boolean | string[] | boolean[] | number[];
-        };
-        time?: Date;
-        live?: boolean;
-        speed?: number;
+        bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
+        canvas?: AnyCanvas;
+        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
+        debug: boolean;
         filter?: FilterFunction;
-        sort?: SortFunction;
-        style?: RealtimeStyleFunction;
-        styleOptions?: RealtimeStyleOptions;
-        pixelRatio?: number;
-        minZoomInterpolation: number;
-        isUpdateBboxOnMoveEnd: boolean;
+        format: GeoJSON;
+        generalizationLevel?: RealtimeGeneralizationLevel;
+        generalizationLevelByZoom: RealtimeGeneralizationLevel[];
+        getGeneralizationLevelByZoom: (zoom: number) => RealtimeGeneralizationLevel;
+        getMotsByZoom: (zoom: number) => RealtimeMot[];
+        getRenderTimeIntervalByZoom: (zoom: number) => number;
         hoverVehicleId?: RealtimeTrainId;
-        selectedVehicleId?: RealtimeTrainId;
-        renderState?: RealtimeRenderState;
-        useRequestAnimationFrame?: boolean;
-        useDebounce?: boolean;
-        useThrottle?: boolean;
+        isUpdateBboxOnMoveEnd: boolean;
+        live?: boolean;
+        minZoomInterpolation: number;
+        mode: RealtimeMode;
         mots?: RealtimeMot[];
         motsByZoom: RealtimeMot[][];
-        generalizationLevel?: RealtimeGeneralizationLevel;
-        generalizationLevelByZoom: RealtimeGeneralizationLevel[];
+        onStart?: (realtimeLayer: AnyLayer) => void;
+        onStop?: (realtimeLayer: AnyLayer) => void;
+        pixelRatio?: number;
+        renderState?: RealtimeRenderState;
         renderTimeIntervalByZoom: number[];
-        format: GeoJSON;
         requestId?: number;
-        updateTimeInterval?: number;
-        updateTimeDelay?: number;
-        visibilityRef: EventsKey;
         selectedVehicle: RealtimeTrajectory;
-        getMotsByZoom: (zoom: number) => RealtimeMot[];
-        getGeneralizationLevelByZoom: (zoom: number) => RealtimeGeneralizationLevel;
-        getRenderTimeIntervalByZoom: (zoom: number) => number;
+        selectedVehicleId?: RealtimeTrainId;
+        sort?: SortFunction;
+        speed?: number;
+        style?: RealtimeStyleFunction;
+        styleOptions?: RealtimeStyleOptions;
+        tenant: RealtimeTenant;
         throttleRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
-        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
-        onStart?: (realtimeLayer: AnyLayer) => void;
-        onStop?: (realtimeLayer: AnyLayer) => void;
+        time?: Date;
+        trajectories?: Record<RealtimeTrainId, RealtimeTrajectory>;
+        updateTimeDelay?: number;
+        updateTimeInterval?: number;
+        useDebounce?: boolean;
+        useRequestAnimationFrame?: boolean;
+        useThrottle?: boolean;
+        visibilityRef: EventsKey;
         /**
-         * Define layer's properties.
-         *
+         * Add a trajectory.
+         * @param {RealtimeTrajectory} trajectory The trajectory to add.
          * @private
          */
-        defineProperties(options: RealtimeLayerMixinOptions): void;
+        addTrajectory(trajectory: RealtimeTrajectory): void;
         attachToMap(map: AnyMap): void;
-        detachFromMap(): void;
-        start(): void;
-        /**
-         * Start the clock.
-         * @private
-         */
-        startUpdateTime(): void;
-        stop(): void;
-        /**
-         * Stop the clock.
-         * @private
-         */
-        stopUpdateTime(): void;
         /**
-         * Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
+         * Define layer's properties.
          *
-         * @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: ViewState, noInterpolate?: boolean): boolean;
+        defineProperties(options: RealtimeLayerMixinOptions): void;
+        detachFromMap(): void;
         /**
-         * Render the trajectories requesting an animation frame and cancelling the previous one.
-         * This function must be overrided by children to provide the correct parameters.
+         * Request feature information for a given coordinate.
          *
-         * @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
+         * @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.
          */
-        renderTrajectories(viewState: ViewState | undefined, noInterpolate: boolean | undefined): void;
-        setBbox(extent: [number, number, number, number], zoom: number): void;
+        getFeatureInfoAtCoordinate(coordinate: Coordinate, options: LayerGetFeatureInfoOptions): Promise<LayerGetFeatureInfoResponse>;
         /**
          * Get the duration before the next update depending on zoom level.
          *
@@ -193,32 +159,46 @@ declare function RealtimeLayerMixin<T extends AnyLayerable>(Base: T): {
          * @param {number} zoom
          */
         getRefreshTimeInMs(zoom?: number | undefined): number;
+        /**
+         * Request the stopSequence and the fullTrajectory informations for a vehicle.
+         *
+         * @param {string} id The vehicle identifier (the  train_id property).
+         * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
+         */
+        getTrajectoryInfos(id: RealtimeTrainId): Promise<{
+            fullTrajectory: WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
+            stopSequence: WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
+        }>;
         /**
          * Get vehicle.
          * @param {function} filterFc A function use to filter results.
          * @return {Array<Object>} Array of vehicle.
          */
         getVehicle(filterFc: FilterFunction): RealtimeTrajectory[];
+        highlightVehicle(id: RealtimeTrainId): void;
         /**
-         * Request feature information for a given coordinate.
+         * Callback on websocket's deleted_vehicles channel events.
+         * It removes the trajectory from the list.
          *
-         * @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.
+         * @private
+         * @override
          */
-        getFeatureInfoAtCoordinate(coordinate: Coordinate, options: LayerGetFeatureInfoOptions): Promise<LayerGetFeatureInfoResponse>;
+        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrainId>): void;
+        onDocumentVisibilityChange(): void;
         /**
-         * Request the stopSequence and the fullTrajectory informations for a vehicle.
+         * Callback on websocket's trajectory channel events.
+         * It adds a trajectory to the list.
          *
-         * @param {string} id The vehicle identifier (the  train_id property).
-         * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
+         * @private
          */
-        getTrajectoryInfos(id: RealtimeTrainId): Promise<{
-            stopSequence: WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
-            fullTrajectory: WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
-        }>;
+        onTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrajectory>): void;
+        /**
+         * On zoomend we adjust the time interval of the update of vehicles positions.
+         *
+         * @param evt Event that triggered the function.
+         * @private
+         */
+        onZoomEnd(): void;
         /**
          * Remove all trajectories that are in the past.
          */
@@ -236,38 +216,52 @@ declare function RealtimeLayerMixin<T extends AnyLayerable>(Base: T): {
          * @private
          */
         purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+        removeTrajectory(trajectoryOrId: RealtimeTrainId | RealtimeTrajectory): void;
         /**
-         * Add a trajectory.
-         * @param {RealtimeTrajectory} trajectory The trajectory to add.
+         * 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
          */
-        addTrajectory(trajectory: RealtimeTrajectory): void;
-        removeTrajectory(trajectoryOrId: RealtimeTrajectory | RealtimeTrainId): void;
+        renderTrajectories(viewState: undefined | ViewState, noInterpolate: boolean | undefined): void;
         /**
-         * On zoomend we adjust the time interval of the update of vehicles positions.
+         * Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
          *
-         * @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(): void;
-        onDocumentVisibilityChange(): void;
+        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
+        selectVehicle(id: RealtimeTrainId): void;
+        setBbox(extent: [number, number, number, number], zoom: number): void;
+        start(): void;
         /**
-         * Callback on websocket's trajectory channel events.
-         * It adds a trajectory to the list.
-         *
+         * Start the clock.
          * @private
          */
-        onTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrajectory>): void;
+        startUpdateTime(): void;
+        stop(): void;
         /**
-         * Callback on websocket's deleted_vehicles channel events.
-         * It removes the trajectory from the list.
-         *
+         * Stop the clock.
          * @private
-         * @override
          */
-        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrainId>): void;
-        highlightVehicle(id: RealtimeTrainId): void;
-        selectVehicle(id: RealtimeTrainId): void;
+        stopUpdateTime(): void;
     };
 } & T;
 export default RealtimeLayerMixin;