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

package/common/mixins/RealtimeLayerMixin.js

@@ -1,436 +1,705 @@
-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";
-export class RealtimeLayerInterface {
-  constructor(options = {}) {
-  }
-  attachToMap(map) {
-  }
-  detachFromMap() {
-  }
-  start() {
-  }
-  stop() {
-  }
-  setBbox(extent, zoom) {
-  }
-  setMode(mode) {
-  }
-  getTrajectoryInfos(id, mode) {
-  }
-}
-const RealtimeLayerMixin = (Base) => class extends Base {
-  constructor(options = {}) {
-    super({
-      hitTolerance: 10,
-      ...options
-    });
-    this.debug = options.debug;
-    this.mode = options.mode || RealtimeModes.TOPOGRAPHIC;
-    this.api = options.api || new RealtimeAPI(options);
-    this.tenant = options.tenant || "";
-    this.minZoomNonTrain = options.minZoomNonTrain || 9;
-    this.minZoomInterpolation = options.minZoomInterpolation || 8;
-    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];
+"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);
     };
-    this.renderTimeIntervalByZoom = options.renderTimeIntervalByZoom || [
-      1e5,
-      5e4,
-      4e4,
-      3e4,
-      2e4,
-      15e3,
-      1e4,
-      5e3,
-      2e3,
-      1e3,
-      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];
+    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 __());
     };
-    this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
-    this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, 50, { leading: false, trailing: true });
-    this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, 50, { leading: true, trailing: true, maxWait: 5e3 });
-    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);
-  }
-  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: {
-        value: style || realtimeDefaultStyle
-      },
-      styleOptions: {
-        value: { ...trackerConfig, ...styleOptions || {} }
-      },
-      speed: {
-        get: () => currSpeed,
-        set: (newSpeed) => {
-          currSpeed = newSpeed;
-          this.start();
+})();
+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];
         }
-      },
-      filter: {
-        value: filter,
-        writable: true
-      },
-      sort: {
-        value: sort,
-        writable: true
-      },
-      live: {
-        value: live === false ? live : true,
-        writable: true
-      },
-      time: {
-        get: () => currTime,
-        set: (newTime) => {
-          currTime = newTime && newTime.getTime ? newTime : new Date(newTime);
-          this.renderTrajectories();
+        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];
         }
-      },
-      trajectories: {
-        value: {},
-        writable: true
-      },
-      hoverVehicleId: {
-        value: hoverVehicleId,
-        writable: true
-      },
-      selectedVehicleId: {
-        value: selectedVehicleId,
-        writable: true
-      },
-      pixelRatio: {
-        value: pixelRatio || (typeof window !== "undefined" ? window.devicePixelRatio : 1),
-        writable: true
-      },
-      useRequestAnimationFrame: {
-        value: options.useRequestAnimationFrame || false,
-        writable: true
-      },
-      useThrottle: {
-        value: options.useThrottle !== false,
-        writable: true
-      },
-      useDebounce: {
-        value: options.useDebounce || false,
-        writable: true
-      }
-    });
-  }
-  attachToMap(map) {
-    super.attachToMap(map);
-    if (this.visible) {
-      this.start();
-    }
-    this.visibilityRef = this.on("change:visible", (evt) => {
-      if (evt.target.visible) {
-        this.start();
-      } else {
-        this.stop();
-      }
-    });
-    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) {
-      this.setBbox();
-    }
-  }
-  startUpdateTime() {
-    this.stopUpdateTime();
-    this.updateTimeDelay = this.getRefreshTimeInMs();
-    this.updateTimeInterval = setInterval(() => {
-      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();
-  }
-  stopUpdateTime() {
-    if (this.updateTimeInterval) {
-      clearInterval(this.updateTimeInterval);
-    }
-  }
-  renderTrajectoriesInternal(viewState, noInterpolate) {
-    if (!this.map) {
-      return false;
-    }
-    const time = this.live ? Date.now() : this.time;
-    const trajectories = Object.values(this.trajectories);
-    if (this.sort) {
-      trajectories.sort(this.sort);
-    }
-    this.renderState = renderTrajectories(this.canvas, trajectories, this.style, { ...viewState, pixelRatio: this.pixelRatio, time }, {
-      noInterpolate: viewState.zoom < this.minZoomInterpolation ? true : noInterpolate,
-      hoverVehicleId: this.hoverVehicleId,
-      selectedVehicleId: this.selectedVehicleId,
-      ...this.styleOptions
-    });
-    return true;
-  }
-  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) {
-    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}`);
-      }
-      this.generalizationLevel = this.getGeneralizationLevelByZoom(zoom);
-      if (this.generalizationLevel) {
-        bbox.push(`gen=${this.generalizationLevel}`);
-      }
-    }
-    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);
-  }
-  getRefreshTimeInMs(zoom) {
-    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);
-    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: 5e3 });
-    }
-    if (this.api?.buffer) {
-      const [, size] = this.api.buffer;
-      this.api.buffer = [nextThrottleTick, size];
-    }
-    return nextTick;
-  }
-  getVehicle(filterFc) {
-    return Object.values(this.trajectories).filter(filterFc);
-  }
-  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 (vehicles.length === nb) {
-        break;
-      }
     }
-    return Promise.resolve({
-      layer: this,
-      features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
-      coordinate
-    });
-  }
-  getTrajectoryInfos(id) {
-    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;
-    });
-  }
-  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;
-  }
-  addTrajectory(trajectory) {
-    if (this.filter && !this.filter(trajectory)) {
-      return;
-    }
-    this.trajectories[trajectory.properties.train_id] = trajectory;
-    this.renderTrajectories();
-  }
-  removeTrajectory(id) {
-    delete this.trajectories[id];
-  }
-  onZoomEnd(evt) {
-    this.startUpdateTime();
-  }
-  onDocumentVisibilityChange() {
-    if (!this.visible) {
-      return;
-    }
-    if (document.hidden) {
-      this.stop();
-    } else {
-      this.start();
-    }
-  }
-  onTrajectoryMessage(data) {
-    if (!data.content) {
-      return;
-    }
-    const trajectory = data.content;
-    const {
-      geometry,
-      properties: {
-        train_id: id,
-        time_since_update: timeSinceUpdate,
-        raw_coordinates: rawCoordinates
-      }
-    } = trajectory;
-    if (timeSinceUpdate < 0) {
-      return;
-    }
-    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);
-    }
-    trajectory.properties.timeOffset = Date.now() - data.timestamp;
-    this.addTrajectory(trajectory);
-  }
-  onDeleteTrajectoryMessage(data) {
-    if (!data.content) {
-      return;
-    }
-    this.removeTrajectory(data.content);
-  }
-  onFeatureHover(features, layer, coordinate) {
-    const [feature] = features;
-    let id = null;
-    if (feature) {
-      id = feature.get("train_id");
-    }
-    if (this.hoverVehicleId !== id) {
-      this.hoverVehicleId = id;
-      this.renderTrajectories(true);
-    }
-  }
-  onFeatureClick(features, layer, coordinate) {
-    const [feature] = features;
-    let id = null;
-    if (feature) {
-      id = feature.get("train_id");
-    }
-    if (this.selectedVehicleId !== id) {
-      this.selectedVehicleId = id;
-      this.selectedVehicle = feature;
-      this.renderTrajectories(true);
+    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");
+/**
+ * RealtimeLayerInterface.
+ */
+var RealtimeLayerInterface = /** @class */ (function () {
+    /*
+     * Constructor
+  
+     * @param {Object} options Layer options.
+     * @param {string} options.url Realtime service url.
+     * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/).
+     * @param {boolean} [options.debug=false] Display additional debug informations.
+     * @param {RealtimeMode} [options.mode=RealtimeMode.TOPOGRAPHIC] Realtime's Mode.
+     * @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 = {}; }
     }
-  }
+    /**
+     * Initialize the layer subscribing to the Realtime api.
+     *
+     * @param {ol/Map~Map} map
+     */
+    RealtimeLayerInterface.prototype.attachToMap = function (map) { };
+    /**
+     * Terminate the layer unsubscribing to the Realtime api.
+     */
+    RealtimeLayerInterface.prototype.detachFromMap = function () { };
+    /**
+     * Start the clock.
+     */
+    RealtimeLayerInterface.prototype.start = function () { };
+    /**
+     * Stop the clock.
+     */
+    RealtimeLayerInterface.prototype.stop = function () { };
+    /**
+     * 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) { };
+    /**
+     * Set the Realtime api's mode.
+     *
+     * @param {RealtimeMode} mode  Realtime mode
+     */
+    RealtimeLayerInterface.prototype.setMode = function (mode) { };
+    /**
+     * 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: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
+     */
+    RealtimeLayerInterface.prototype.getTrajectoryInfos = function (id, mode) { };
+    return RealtimeLayerInterface;
+}());
+exports.RealtimeLayerInterface = RealtimeLayerInterface;
+/**
+ * Mixin for RealtimeLayerInterface.
+ *
+ * @param {Class} Base A class to extend with {RealtimeLayerInterface} functionnalities.
+ * @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,
+                },
+                /**
+                 * 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,
+                // },
+            });
+        };
+        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) {
+                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');
+            }
+            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
+         */
+        class_1.prototype.onFeatureClick = function (features, layer, coordinate) {
+            var feature = features[0];
+            var id = null;
+            if (feature) {
+                id = feature.get('train_id');
+            }
+            if (this.selectedVehicleId !== id) {
+                /** @ignore */
+                this.selectedVehicleId = id;
+                this.selectedVehicle = feature;
+                this.renderTrajectories(true);
+            }
+        };
+        return class_1;
+    }(Base));
 };
-export default RealtimeLayerMixin;
+exports.default = RealtimeLayerMixin;