mobility-toolbox-js 2.0.0-beta.34 → 2.0.0-beta.37

package/common/mixins/RealtimeLayerMixin.js

@@ -1,60 +1,22 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RealtimeLayerInterface = void 0;
 /* eslint-disable no-empty-function,@typescript-eslint/no-empty-function */
 /* 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 */
 /* eslint-disable max-classes-per-file */
-var extent_1 = require("ol/extent");
-var Observable_1 = require("ol/Observable");
-var GeoJSON_1 = require("ol/format/GeoJSON");
-var lodash_debounce_1 = require("lodash.debounce");
-var lodash_throttle_1 = require("lodash.throttle");
-var proj_1 = require("ol/proj");
-var realtimeDefaultStyle_1 = require("../styles/realtimeDefaultStyle");
-var api_1 = require("../../api");
-var renderTrajectories_1 = require("../utils/renderTrajectories");
-var trackerConfig = require("../utils/trackerConfig");
+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 { fromLonLat } from 'ol/proj';
+import realtimeDefaultStyle from '../styles/realtimeDefaultStyle';
+import { RealtimeAPI, RealtimeModes } from '../../api';
+import renderTrajectories from '../utils/renderTrajectories';
+import * as trackerConfig from '../utils/trackerConfig';
 /**
  * RealtimeLayerInterface.
  */
-var RealtimeLayerInterface = /** @class */ (function () {
+export class RealtimeLayerInterface {
     /*
      * Constructor
   
@@ -66,40 +28,38 @@ var RealtimeLayerInterface = /** @class */ (function () {
      * @param {number} [options.minZoomInterpolation=8] Minimal zoom when trains positions start to be interpolated.
      * @param {number} [options.minZoomNonTrain=9] Minimal zoom when non trains vehicles are allowed to be displayed.
      */
-    function RealtimeLayerInterface(options) {
-        if (options === void 0) { options = {}; }
-    }
+    constructor(options = {}) { }
     /**
      * Initialize the layer subscribing to the Realtime api.
      *
      * @param {ol/Map~Map} map
      */
-    RealtimeLayerInterface.prototype.attachToMap = function (map) { };
+    attachToMap(map) { }
     /**
      * Terminate the layer unsubscribing to the Realtime api.
      */
-    RealtimeLayerInterface.prototype.detachFromMap = function () { };
+    detachFromMap() { }
     /**
      * Start the clock.
      */
-    RealtimeLayerInterface.prototype.start = function () { };
+    start() { }
     /**
      * Stop the clock.
      */
-    RealtimeLayerInterface.prototype.stop = function () { };
+    stop() { }
     /**
      * Set the Realtime api's bbox.
      *
      * @param {Array<number>} extent  Extent to request, [minX, minY, maxX, maxY, zoom].
      * @param {number} zoom  Zoom level to request. Must be an integer.
      */
-    RealtimeLayerInterface.prototype.setBbox = function (extent, zoom) { };
+    setBbox(extent, zoom) { }
     /**
      * Set the Realtime api's mode.
      *
      * @param {RealtimeMode} mode  Realtime mode
      */
-    RealtimeLayerInterface.prototype.setMode = function (mode) { };
+    setMode(mode) { }
     /**
      * Request the stopSequence and the fullTrajectory informations for a vehicle.
      *
@@ -107,10 +67,8 @@ var RealtimeLayerInterface = /** @class */ (function () {
      * @param {RealtimeMode} mode The mode to request. If not defined, the layer´s mode propetrty will be used.
      * @return {Promise<{stopSequence: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
      */
-    RealtimeLayerInterface.prototype.getTrajectoryInfos = function (id, mode) { };
-    return RealtimeLayerInterface;
-}());
-exports.RealtimeLayerInterface = RealtimeLayerInterface;
+    getTrajectoryInfos(id, mode) { }
+}
 /**
  * Mixin for RealtimeLayerInterface.
  *
@@ -118,588 +76,575 @@ exports.RealtimeLayerInterface = RealtimeLayerInterface;
  * @return {Class}  A class that implements {RealtimeLayerInterface} class and extends Base;
  * @private
  */
-var RealtimeLayerMixin = function (Base) {
-    return /** @class */ (function (_super) {
-        __extends(class_1, _super);
-        function class_1(options) {
-            if (options === void 0) { options = {}; }
-            var _this = _super.call(this, __assign({ hitTolerance: 10 }, options)) || this;
-            _this.debug = options.debug;
-            _this.mode = options.mode || api_1.RealtimeModes.TOPOGRAPHIC;
-            _this.api = options.api || new api_1.RealtimeAPI(options);
-            _this.tenant = options.tenant || ''; // sbb,sbh or sbm
-            _this.minZoomNonTrain = options.minZoomNonTrain || 9; // Min zoom level from which non trains are allowed to be displayed. Min value is 9 (as configured by the server
-            _this.minZoomInterpolation = options.minZoomInterpolation || 8; // Min zoom level from which trains positions are not interpolated.
-            _this.format = new GeoJSON_1.default();
-            _this.generalizationLevelByZoom = options.generalizationLevelByZoom || [
-                5, 5, 5, 5, 5, 5, 5, 5, 10, 30, 30, 100, 100, 100,
-            ];
-            _this.getGeneralizationLevelByZoom = function (zoom) {
-                return ((options.getGeneralizationLevelByZoom &&
-                    options.getGeneralizationLevelByZoom(zoom, _this.generalizationLevelByZoom)) ||
-                    _this.generalizationLevelByZoom[zoom]);
-            };
-            _this.renderTimeIntervalByZoom = options.renderTimeIntervalByZoom || [
-                100000, 50000, 40000, 30000, 20000, 15000, 10000, 5000, 2000, 1000, 400,
-                300, 250, 180, 90, 60, 50, 50, 50, 50, 50,
-            ];
-            _this.getRenderTimeIntervalByZoom = function (zoom) {
-                return ((options.getRenderTimeIntervalByZoom &&
-                    options.getRenderTimeIntervalByZoom(zoom, _this.renderTimeIntervalByZoom)) ||
-                    _this.renderTimeIntervalByZoom[zoom]);
-            };
-            // This property will call api.setBbox on each movend event
-            _this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
-            // Define throttling and debounce render function
-            _this.throttleRenderTrajectories = (0, lodash_throttle_1.default)(_this.renderTrajectoriesInternal, 50, { leading: false, trailing: true });
-            _this.debounceRenderTrajectories = (0, lodash_debounce_1.default)(_this.renderTrajectoriesInternal, 50, { leading: true, trailing: true, maxWait: 5000 });
-            // Bind callbacks
-            _this.onFeatureHover = _this.onFeatureHover.bind(_this);
-            _this.onFeatureClick = _this.onFeatureClick.bind(_this);
-            _this.renderTrajectoriesInternal =
-                _this.renderTrajectoriesInternal.bind(_this);
-            _this.onTrajectoryMessage = _this.onTrajectoryMessage.bind(_this);
-            _this.onDeleteTrajectoryMessage =
-                _this.onDeleteTrajectoryMessage.bind(_this);
-            _this.onDocumentVisibilityChange =
-                _this.onDocumentVisibilityChange.bind(_this);
-            return _this;
-        }
-        /**
-         * Define layer's properties.
-         *
-         * @ignore
-         */
-        class_1.prototype.defineProperties = function (options) {
-            var _this = this;
-            var style = options.style, speed = options.speed, pixelRatio = options.pixelRatio, hoverVehicleId = options.hoverVehicleId, selectedVehicleId = options.selectedVehicleId, filter = options.filter, sort = options.sort, time = options.time, live = options.live, canvas = options.canvas, styleOptions = options.styleOptions;
-            var currSpeed = speed || 1;
-            var currTime = time || new Date();
-            _super.prototype.defineProperties.call(this, options);
-            Object.defineProperties(this, {
-                isTrackerLayer: { value: true },
-                canvas: {
-                    value: canvas || document.createElement('canvas'),
-                },
-                /**
-                 * Style function used to render a vehicle.
-                 */
-                style: {
-                    value: style || realtimeDefaultStyle_1.default,
-                },
-                /**
-                 * Custom options to pass as last parameter of the style function.
-                 */
-                styleOptions: {
-                    value: __assign(__assign({}, trackerConfig), (styleOptions || {})),
-                },
-                /**
-                 * Speed of the wheel of time.
-                 * If live property is true. The speed is ignored.
-                 */
-                speed: {
-                    get: function () { return currSpeed; },
-                    set: function (newSpeed) {
-                        currSpeed = newSpeed;
-                        _this.start();
-                    },
-                },
-                /**
-                 * Function to filter which vehicles to display.
-                 */
-                filter: {
-                    value: filter,
-                    writable: true,
-                },
-                /**
-                 * Function to sort the vehicles to display.
-                 */
-                sort: {
-                    value: sort,
-                    writable: 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,
-                },
-                /**
-                 * Time used to display the trajectories. Can be a Date or a number in ms representing a Date.
-                 * If live property is true. The setter does nothing.
-                 */
-                time: {
-                    get: function () { return currTime; },
-                    set: function (newTime) {
-                        currTime = newTime && newTime.getTime ? newTime : new Date(newTime);
-                        _this.renderTrajectories();
-                    },
-                },
-                /**
-                 * Keep track of which trajectories are stored.
-                 */
-                trajectories: {
-                    value: {},
-                    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.
-                 */
-                pixelRatio: {
-                    value: pixelRatio ||
-                        (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
-                    writable: true,
-                },
-                /**
-                 * If true, encapsulates the renderTrajectories calls in a requestAnimationFrame.
-                 */
-                useRequestAnimationFrame: {
-                    value: options.useRequestAnimationFrame || false,
-                    writable: true,
-                },
-                /**
-                 * If true, encapsulates the renderTrajectories calls in a throttle function. Default to true.
-                 */
-                useThrottle: {
-                    value: options.useThrottle !== false,
-                    writable: true,
+const RealtimeLayerMixin = (Base) => class extends Base {
+    constructor(options = {}) {
+        super(Object.assign({ hitTolerance: 10 }, options));
+        this.debug = options.debug;
+        this.mode = options.mode || RealtimeModes.TOPOGRAPHIC;
+        this.api = options.api || new RealtimeAPI(options);
+        this.tenant = options.tenant || ''; // sbb,sbh or sbm
+        this.minZoomNonTrain = options.minZoomNonTrain || 9; // Min zoom level from which non trains are allowed to be displayed. Min value is 9 (as configured by the server
+        this.minZoomInterpolation = options.minZoomInterpolation || 8; // Min zoom level from which trains positions are not interpolated.
+        this.format = new GeoJSON();
+        this.generalizationLevelByZoom = options.generalizationLevelByZoom || [
+            5, 5, 5, 5, 5, 5, 5, 5, 10, 30, 30, 100, 100, 100,
+        ];
+        this.getGeneralizationLevelByZoom = (zoom) => {
+            return ((options.getGeneralizationLevelByZoom &&
+                options.getGeneralizationLevelByZoom(zoom, this.generalizationLevelByZoom)) ||
+                this.generalizationLevelByZoom[zoom]);
+        };
+        this.renderTimeIntervalByZoom = options.renderTimeIntervalByZoom || [
+            100000, 50000, 40000, 30000, 20000, 15000, 10000, 5000, 2000, 1000, 400,
+            300, 250, 180, 90, 60, 50, 50, 50, 50, 50,
+        ];
+        this.getRenderTimeIntervalByZoom = (zoom) => {
+            return ((options.getRenderTimeIntervalByZoom &&
+                options.getRenderTimeIntervalByZoom(zoom, this.renderTimeIntervalByZoom)) ||
+                this.renderTimeIntervalByZoom[zoom]);
+        };
+        // This property will call api.setBbox on each movend event
+        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 });
+        // Bind callbacks
+        this.onFeatureHover = this.onFeatureHover.bind(this);
+        this.onFeatureClick = this.onFeatureClick.bind(this);
+        this.renderTrajectoriesInternal =
+            this.renderTrajectoriesInternal.bind(this);
+        this.onTrajectoryMessage = this.onTrajectoryMessage.bind(this);
+        this.onDeleteTrajectoryMessage =
+            this.onDeleteTrajectoryMessage.bind(this);
+        this.onDocumentVisibilityChange =
+            this.onDocumentVisibilityChange.bind(this);
+    }
+    /**
+     * Define layer's properties.
+     *
+     * @ignore
+     */
+    defineProperties(options) {
+        const { style, speed, pixelRatio, hoverVehicleId, selectedVehicleId, filter, sort, time, live, canvas, styleOptions, } = options;
+        let currSpeed = speed || 1;
+        let currTime = time || new Date();
+        super.defineProperties(options);
+        Object.defineProperties(this, {
+            isTrackerLayer: { value: true },
+            canvas: {
+                value: canvas || document.createElement('canvas'),
+            },
+            /**
+             * Style function used to render a vehicle.
+             */
+            style: {
+                value: style || realtimeDefaultStyle,
+            },
+            /**
+             * Custom options to pass as last parameter of the style function.
+             */
+            styleOptions: {
+                value: Object.assign(Object.assign({}, trackerConfig), (styleOptions || {})),
+            },
+            /**
+             * Speed of the wheel of time.
+             * If live property is true. The speed is ignored.
+             */
+            speed: {
+                get: () => currSpeed,
+                set: (newSpeed) => {
+                    currSpeed = newSpeed;
+                    this.start();
                 },
-                /**
-                 * If true, encapsulates the renderTrajectories calls in a debounce function.
-                 */
-                useDebounce: {
-                    value: options.useDebounce || false,
-                    writable: true,
+            },
+            /**
+             * Function to filter which vehicles to display.
+             */
+            filter: {
+                value: filter,
+                writable: true,
+            },
+            /**
+             * Function to sort the vehicles to display.
+             */
+            sort: {
+                value: sort,
+                writable: 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,
+            },
+            /**
+             * Time used to display the trajectories. Can be a Date or a number in ms representing a Date.
+             * If live property is true. The setter does nothing.
+             */
+            time: {
+                get: () => currTime,
+                set: (newTime) => {
+                    currTime = newTime && newTime.getTime ? newTime : new Date(newTime);
+                    this.renderTrajectories();
                 },
-                /**
-                 * Debug properties.
-                 */
-                // Not used anymore, but could be useful for debugging.
-                // showVehicleTraj: {
-                //   value:
-                //     options.showVehicleTraj !== undefined
-                //       ? options.showVehicleTraj
-                //       : true,
-                //   writable: true,
-                // },
-            });
-        };
-        class_1.prototype.attachToMap = function (map) {
-            var _this = this;
-            _super.prototype.attachToMap.call(this, map);
-            // If the layer is visible we start  the rendering clock
-            if (this.visible) {
+            },
+            /**
+             * Keep track of which trajectories are stored.
+             */
+            trajectories: {
+                value: {},
+                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.
+             */
+            pixelRatio: {
+                value: pixelRatio ||
+                    (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
+                writable: true,
+            },
+            /**
+             * If true, encapsulates the renderTrajectories calls in a requestAnimationFrame.
+             */
+            useRequestAnimationFrame: {
+                value: options.useRequestAnimationFrame || false,
+                writable: true,
+            },
+            /**
+             * If true, encapsulates the renderTrajectories calls in a throttle function. Default to true.
+             */
+            useThrottle: {
+                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.
+             */
+            // Not used anymore, but could be useful for debugging.
+            // showVehicleTraj: {
+            //   value:
+            //     options.showVehicleTraj !== undefined
+            //       ? options.showVehicleTraj
+            //       : true,
+            //   writable: true,
+            // },
+        });
+    }
+    attachToMap(map) {
+        super.attachToMap(map);
+        // If the layer is visible we start  the rendering clock
+        if (this.visible) {
+            this.start();
+        }
+        // On change of visibility we start/stop the rendering clock
+        this.visibilityRef = this.on('change:visible', (evt) => {
+            if (evt.target.visible) {
                 this.start();
             }
-            // On change of visibility we start/stop the rendering clock
-            this.visibilityRef = this.on('change:visible', function (evt) {
-                if (evt.target.visible) {
-                    _this.start();
-                }
-                else {
-                    _this.stop();
-                }
-            });
-            // 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);
-        };
-        class_1.prototype.detachFromMap = function () {
-            document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
-            this.stop();
-            (0, Observable_1.unByKey)(this.visibilityRef);
-            var context = this.canvas.getContext('2d');
-            context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-            _super.prototype.detachFromMap.call(this);
-        };
-        class_1.prototype.start = function () {
-            this.stop();
-            this.renderTrajectories();
-            this.startUpdateTime();
-            this.api.open();
-            this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
-            this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
-            if (this.isUpdateBboxOnMoveEnd) {
-                // Update the bbox on each move end
-                this.setBbox();
-            }
-        };
-        /**
-         * Start the clock.
-         * @private
-         */
-        class_1.prototype.startUpdateTime = function () {
-            var _this = this;
-            this.stopUpdateTime();
-            this.updateTimeDelay = this.getRefreshTimeInMs();
-            this.updateTimeInterval = setInterval(function () {
-                // When live=true, we update the time with new Date();
-                _this.time = _this.live
-                    ? new Date()
-                    : _this.time.getTime() + _this.updateTimeDelay * _this.speed;
-            }, this.updateTimeDelay);
-        };
-        class_1.prototype.stop = function () {
-            this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
-            this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
-            this.api.close();
-        };
-        /**
-         * Stop the clock.
-         * @private
-         */
-        class_1.prototype.stopUpdateTime = function () {
-            if (this.updateTimeInterval) {
-                clearInterval(this.updateTimeInterval);
-            }
-        };
-        /**
-         * 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
-         */
-        class_1.prototype.renderTrajectoriesInternal = function (viewState, noInterpolate) {
-            if (!this.map) {
-                return false;
-            }
-            var time = this.live ? Date.now() : this.time;
-            var trajectories = Object.values(this.trajectories);
-            // console.time('sort');
-            if (this.sort) {
-                trajectories.sort(this.sort);
-            }
-            // console.timeEnd('sort');
-            // console.time('render');
-            this.renderState = (0, renderTrajectories_1.default)(this.canvas, trajectories, this.style, __assign(__assign({}, viewState), { pixelRatio: this.pixelRatio, time: time }), __assign({ noInterpolate: viewState.zoom < 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
-         */
-        class_1.prototype.renderTrajectories = function (viewState, noInterpolate) {
-            var _this = this;
-            if (this.requestId) {
-                cancelAnimationFrame(this.requestId);
-                this.requestId = null;
-            }
-            if (!noInterpolate && this.useRequestAnimationFrame) {
-                this.requestId = requestAnimationFrame(function () {
-                    _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);
-            }
-        };
-        class_1.prototype.setBbox = function (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
-            var keys = Object.keys(this.trajectories);
-            for (var i = keys.length - 1; i >= 0; i -= 1) {
-                this.purgeTrajectory(this.trajectories[keys[i]], extent, zoom);
-            }
-            var bbox = __spreadArray([], extent, true);
-            if (this.isUpdateBboxOnMoveEnd) {
-                bbox.push(zoom);
-                if (this.tenant) {
-                    bbox.push("tenant=".concat(this.tenant));
-                }
-                /* @ignore */
-                this.generalizationLevel = this.getGeneralizationLevelByZoom(zoom);
-                if (this.generalizationLevel) {
-                    bbox.push("gen=".concat(this.generalizationLevel));
-                }
-            }
-            this.api.bbox = bbox;
-        };
-        class_1.prototype.setMode = function (mode) {
-            if (this.mode === mode) {
-                return;
-            }
-            this.mode = mode;
-            this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
-            this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
-        };
-        /**
-         * Get the duration before the next update depending on zoom level.
-         *
-         * @private
-         * @param {number} zoom
-         */
-        class_1.prototype.getRefreshTimeInMs = function (zoom) {
-            var _a;
-            var roundedZoom = Math.round(zoom);
-            var timeStep = this.getRenderTimeIntervalByZoom(roundedZoom) || 25;
-            var nextTick = Math.max(25, timeStep / this.speed);
-            var nextThrottleTick = Math.min(nextTick, 500);
-            // TODO: see if this should go elsewhere.
-            if (this.useThrottle) {
-                this.throttleRenderTrajectories = (0, lodash_throttle_1.default)(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true });
-            }
-            else if (this.useDebounce) {
-                this.debounceRenderTrajectories = (0, lodash_debounce_1.default)(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true, maxWait: 5000 });
-            }
-            if ((_a = this.api) === null || _a === void 0 ? void 0 : _a.buffer) {
-                var _b = this.api.buffer, size = _b[1];
-                this.api.buffer = [nextThrottleTick, size];
-            }
-            return nextTick;
-        };
-        /**
-         * Get vehicle.
-         * @param {function} filterFc A function use to filter results.
-         * @return {Array<Object>} Array of vehicle.
-         */
-        class_1.prototype.getVehicle = function (filterFc) {
-            return 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.
-         */
-        class_1.prototype.getFeatureInfoAtCoordinate = function (coordinate, options) {
-            var _this = this;
-            if (options === void 0) { options = {}; }
-            var resolution = options.resolution, nb = options.nb;
-            var ext = (0, extent_1.buffer)(__spreadArray(__spreadArray([], coordinate, true), coordinate, true), this.hitTolerance * resolution);
-            var trajectories = Object.values(this.trajectories);
-            if (this.sort) {
-                trajectories = trajectories.sort(this.sort);
-            }
-            var vehicles = [];
-            for (var i = 0; i < trajectories.length; i += 1) {
-                if (trajectories[i].properties.coordinate &&
-                    (0, extent_1.containsCoordinate)(ext, trajectories[i].properties.coordinate)) {
-                    vehicles.push(trajectories[i]);
-                }
-                if (vehicles.length === nb) {
-                    break;
-                }
-            }
-            return Promise.resolve({
-                layer: this,
-                features: vehicles.map(function (vehicle) { return _this.format.readFeature(vehicle); }),
-                coordinate: coordinate,
-            });
-        };
-        /**
-         * Request the stopSequence and the fullTrajectory informations for a vehicle.
-         *
-         * @param {string} id The vehicle identifier (the  train_id property).
-         * @return {Promise<{stopSequence: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
-         */
-        class_1.prototype.getTrajectoryInfos = function (id) {
-            // When a vehicle is selected, we request the complete stop sequence and the complete full trajectory.
-            // Then we combine them in one response and send them to inherited layers.
-            var promises = [
-                this.api.getStopSequence(id, this.mode),
-                this.api.getFullTrajectory(id, this.mode, this.generalizationLevel),
-            ];
-            return Promise.all(promises).then(function (_a) {
-                var stopSequence = _a[0], fullTrajectory = _a[1];
-                var response = {
-                    stopSequence: stopSequence,
-                    fullTrajectory: fullTrajectory,
-                };
-                return response;
-            });
-        };
-        /**
-         * Determine if the trajectory is useless and should be removed from the list or not.
-         * By default, this function exclude vehicles:
-         *  - that have their trajectory outside the current extent and
-         *  - that are not a train and zoom level is lower than layer's minZoomNonTrain property.
-         *
-         * @param {RealtimeTrajectory} trajectory
-         * @param {Array<number>} extent
-         * @param {number} zoom
-         * @return {boolean} if the trajectory must be displayed or not.
-         * @ignore
-         */
-        class_1.prototype.purgeTrajectory = function (trajectory, extent, zoom) {
-            var _a = trajectory.properties, type = _a.type, bounds = _a.bounds, id = _a.train_id;
-            if (!(0, extent_1.intersects)(extent, bounds) ||
-                (type !== 'rail' && zoom < (this.minZoomNonTrain || 9))) {
-                this.removeTrajectory(id);
-                return true;
-            }
-            return false;
-        };
-        /**
-         * Add a trajectory.
-         * @param {RealtimeTrajectory} trajectory The trajectory to add.
-         * @private
-         */
-        class_1.prototype.addTrajectory = function (trajectory) {
-            if (this.filter && !this.filter(trajectory)) {
-                return;
-            }
-            this.trajectories[trajectory.properties.train_id] = trajectory;
-            this.renderTrajectories();
-        };
-        class_1.prototype.removeTrajectory = function (id) {
-            delete this.trajectories[id];
-        };
-        /**
-         * On zoomend we adjust the time interval of the update of vehicles positions.
-         *
-         * @param evt Event that triggered the function.
-         * @private
-         */
-        // eslint-disable-next-line no-unused-vars
-        class_1.prototype.onZoomEnd = function (evt) {
-            this.startUpdateTime();
-        };
-        class_1.prototype.onDocumentVisibilityChange = function () {
-            if (!this.visible) {
-                return;
-            }
-            if (document.hidden) {
                 this.stop();
             }
-            else {
-                this.start();
-            }
-        };
-        /**
-         * Callback on websocket's trajectory channel events.
-         * It adds a trajectory to the list.
-         *
-         * @private
-         */
-        class_1.prototype.onTrajectoryMessage = function (data) {
-            if (!data.content) {
-                return;
-            }
-            var trajectory = data.content;
-            var geometry = trajectory.geometry, _a = trajectory.properties, id = _a.train_id, timeSinceUpdate = _a.time_since_update, rawCoordinates = _a.raw_coordinates;
-            // ignore old events [SBAHNM-97]
-            if (timeSinceUpdate < 0) {
-                return;
-            }
-            // console.time(`onTrajectoryMessage${data.content.properties.train_id}`);
-            if (this.purgeTrajectory(trajectory)) {
-                return;
-            }
-            if (this.debug &&
-                this.mode === api_1.RealtimeModes.TOPOGRAPHIC &&
-                rawCoordinates) {
-                trajectory.properties.olGeometry = {
-                    type: 'Point',
-                    coordinates: (0, proj_1.fromLonLat)(rawCoordinates, this.map.getView().getProjection()),
-                };
-            }
-            else {
-                trajectory.properties.olGeometry = this.format.readGeometry(geometry);
-            }
-            // TODO Make sure the timeOffset is useful. May be we can remove it.
-            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.
-         *
-         * @private
-         * @override
-         */
-        class_1.prototype.onDeleteTrajectoryMessage = function (data) {
-            if (!data.content) {
-                return;
-            }
-            this.removeTrajectory(data.content);
-        };
-        /**
-         * Callback when user moves the mouse/pointer over the map.
-         * It sets the layer's hoverVehicleId property with the current hovered vehicle's id.
-         *
-         * @private
-         * @override
-         */
-        class_1.prototype.onFeatureHover = function (features, layer, coordinate) {
-            var feature = features[0];
-            var id = null;
-            if (feature) {
-                id = feature.get('train_id');
+        });
+        // 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();
+        unByKey(this.visibilityRef);
+        const context = this.canvas.getContext('2d');
+        context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        super.detachFromMap();
+    }
+    start() {
+        this.stop();
+        this.renderTrajectories();
+        this.startUpdateTime();
+        this.api.open();
+        this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+        this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+        if (this.isUpdateBboxOnMoveEnd) {
+            // Update the bbox on each move end
+            this.setBbox();
+        }
+    }
+    /**
+     * Start the clock.
+     * @private
+     */
+    startUpdateTime() {
+        this.stopUpdateTime();
+        this.updateTimeDelay = this.getRefreshTimeInMs();
+        this.updateTimeInterval = setInterval(() => {
+            // When live=true, we update the time with new Date();
+            this.time = this.live
+                ? new Date()
+                : this.time.getTime() + this.updateTimeDelay * this.speed;
+        }, this.updateTimeDelay);
+    }
+    stop() {
+        this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
+        this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
+        this.api.close();
+    }
+    /**
+     * Stop the clock.
+     * @private
+     */
+    stopUpdateTime() {
+        if (this.updateTimeInterval) {
+            clearInterval(this.updateTimeInterval);
+        }
+    }
+    /**
+     * 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) {
+        if (!this.map) {
+            return false;
+        }
+        const time = this.live ? Date.now() : this.time;
+        const trajectories = Object.values(this.trajectories);
+        // console.time('sort');
+        if (this.sort) {
+            trajectories.sort(this.sort);
+        }
+        // console.timeEnd('sort');
+        // console.time('render');
+        this.renderState = renderTrajectories(this.canvas, trajectories, this.style, Object.assign(Object.assign({}, viewState), { pixelRatio: this.pixelRatio, time }), Object.assign({ noInterpolate: viewState.zoom < 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 = null;
+        }
+        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
+        const keys = Object.keys(this.trajectories);
+        for (let i = keys.length - 1; i >= 0; i -= 1) {
+            this.purgeTrajectory(this.trajectories[keys[i]], extent, zoom);
+        }
+        const bbox = [...extent];
+        if (this.isUpdateBboxOnMoveEnd) {
+            bbox.push(zoom);
+            if (this.tenant) {
+                bbox.push(`tenant=${this.tenant}`);
             }
-            if (this.hoverVehicleId !== id) {
-                /** @ignore */
-                this.hoverVehicleId = id;
-                this.renderTrajectories(true);
+            /* @ignore */
+            this.generalizationLevel = this.getGeneralizationLevelByZoom(zoom);
+            if (this.generalizationLevel) {
+                bbox.push(`gen=${this.generalizationLevel}`);
             }
-        };
-        /**
-         * Callback when user clicks on the map.
-         * It sets the layer's selectedVehicleId property with the current selected vehicle's id.
-         *
-         * @private
-         * @override
-         */
-        class_1.prototype.onFeatureClick = function (features, layer, coordinate) {
-            var feature = features[0];
-            var id = null;
-            if (feature) {
-                id = feature.get('train_id');
+        }
+        this.api.bbox = bbox;
+    }
+    setMode(mode) {
+        if (this.mode === mode) {
+            return;
+        }
+        this.mode = mode;
+        this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+        this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+    }
+    /**
+     * Get the duration before the next update depending on zoom level.
+     *
+     * @private
+     * @param {number} zoom
+     */
+    getRefreshTimeInMs(zoom) {
+        var _a;
+        const roundedZoom = Math.round(zoom);
+        const timeStep = this.getRenderTimeIntervalByZoom(roundedZoom) || 25;
+        const nextTick = Math.max(25, timeStep / this.speed);
+        const nextThrottleTick = Math.min(nextTick, 500);
+        // TODO: see if this should go elsewhere.
+        if (this.useThrottle) {
+            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 });
+        }
+        if ((_a = this.api) === null || _a === void 0 ? void 0 : _a.buffer) {
+            const [, size] = this.api.buffer;
+            this.api.buffer = [nextThrottleTick, size];
+        }
+        return nextTick;
+    }
+    /**
+     * Get vehicle.
+     * @param {function} filterFc A function use to filter results.
+     * @return {Array<Object>} Array of vehicle.
+     */
+    getVehicle(filterFc) {
+        return 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) {
+            trajectories = trajectories.sort(this.sort);
+        }
+        const vehicles = [];
+        for (let i = 0; i < trajectories.length; i += 1) {
+            if (trajectories[i].properties.coordinate &&
+                containsCoordinate(ext, trajectories[i].properties.coordinate)) {
+                vehicles.push(trajectories[i]);
             }
-            if (this.selectedVehicleId !== id) {
-                /** @ignore */
-                this.selectedVehicleId = id;
-                this.selectedVehicle = feature;
-                this.renderTrajectories(true);
+            if (vehicles.length === nb) {
+                break;
             }
-        };
-        return class_1;
-    }(Base));
+        }
+        return Promise.resolve({
+            layer: this,
+            features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
+            coordinate,
+        });
+    }
+    /**
+     * Request the stopSequence and the fullTrajectory informations for a vehicle.
+     *
+     * @param {string} id The vehicle identifier (the  train_id property).
+     * @return {Promise<{stopSequence: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
+     */
+    getTrajectoryInfos(id) {
+        // When a vehicle is selected, we request the complete stop sequence and the complete full trajectory.
+        // Then we combine them in one response and send them to inherited layers.
+        const promises = [
+            this.api.getStopSequence(id, this.mode),
+            this.api.getFullTrajectory(id, this.mode, this.generalizationLevel),
+        ];
+        return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+            const response = {
+                stopSequence,
+                fullTrajectory,
+            };
+            return response;
+        });
+    }
+    /**
+     * Determine if the trajectory is useless and should be removed from the list or not.
+     * By default, this function exclude vehicles:
+     *  - that have their trajectory outside the current extent and
+     *  - that are not a train and zoom level is lower than layer's minZoomNonTrain property.
+     *
+     * @param {RealtimeTrajectory} trajectory
+     * @param {Array<number>} extent
+     * @param {number} zoom
+     * @return {boolean} if the trajectory must be displayed or not.
+     * @ignore
+     */
+    purgeTrajectory(trajectory, extent, zoom) {
+        const { type, bounds, train_id: id } = trajectory.properties;
+        if (!intersects(extent, bounds) ||
+            (type !== 'rail' && zoom < (this.minZoomNonTrain || 9))) {
+            this.removeTrajectory(id);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Add a trajectory.
+     * @param {RealtimeTrajectory} trajectory The trajectory to add.
+     * @private
+     */
+    addTrajectory(trajectory) {
+        if (this.filter && !this.filter(trajectory)) {
+            return;
+        }
+        this.trajectories[trajectory.properties.train_id] = trajectory;
+        this.renderTrajectories();
+    }
+    removeTrajectory(id) {
+        delete this.trajectories[id];
+    }
+    /**
+     * On zoomend we adjust the time interval of the update of vehicles positions.
+     *
+     * @param evt Event that triggered the function.
+     * @private
+     */
+    // eslint-disable-next-line no-unused-vars
+    onZoomEnd(evt) {
+        this.startUpdateTime();
+    }
+    onDocumentVisibilityChange() {
+        if (!this.visible) {
+            return;
+        }
+        if (document.hidden) {
+            this.stop();
+        }
+        else {
+            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: { train_id: id, time_since_update: timeSinceUpdate, raw_coordinates: rawCoordinates, }, } = trajectory;
+        // ignore old events [SBAHNM-97]
+        if (timeSinceUpdate < 0) {
+            return;
+        }
+        // console.time(`onTrajectoryMessage${data.content.properties.train_id}`);
+        if (this.purgeTrajectory(trajectory)) {
+            return;
+        }
+        if (this.debug &&
+            this.mode === RealtimeModes.TOPOGRAPHIC &&
+            rawCoordinates) {
+            trajectory.properties.olGeometry = {
+                type: 'Point',
+                coordinates: fromLonLat(rawCoordinates, this.map.getView().getProjection()),
+            };
+        }
+        else {
+            trajectory.properties.olGeometry = this.format.readGeometry(geometry);
+        }
+        // TODO Make sure the timeOffset is useful. May be we can remove it.
+        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.
+     *
+     * @private
+     * @override
+     */
+    onDeleteTrajectoryMessage(data) {
+        if (!data.content) {
+            return;
+        }
+        this.removeTrajectory(data.content);
+    }
+    /**
+     * Callback when user moves the mouse/pointer over the map.
+     * It sets the layer's hoverVehicleId property with the current hovered vehicle's id.
+     *
+     * @private
+     * @override
+     */
+    onFeatureHover(features, layer, coordinate) {
+        const [feature] = features;
+        let id = null;
+        if (feature) {
+            id = feature.get('train_id');
+        }
+        if (this.hoverVehicleId !== id) {
+            /** @ignore */
+            this.hoverVehicleId = id;
+            this.renderTrajectories(true);
+        }
+    }
+    /**
+     * Callback when user clicks on the map.
+     * It sets the layer's selectedVehicleId property with the current selected vehicle's id.
+     *
+     * @private
+     * @override
+     */
+    onFeatureClick(features, layer, coordinate) {
+        const [feature] = features;
+        let id = null;
+        if (feature) {
+            id = feature.get('train_id');
+        }
+        if (this.selectedVehicleId !== id) {
+            /** @ignore */
+            this.selectedVehicleId = id;
+            this.selectedVehicle = feature;
+            this.renderTrajectories(true);
+        }
+    }
 };
-exports.default = RealtimeLayerMixin;
+export default RealtimeLayerMixin;