mobility-toolbox-js 3.0.0-beta.11 → 3.0.0-beta.13

package/common/mixins/RealtimeLayerMixin.d.ts

@@ -3,8 +3,7 @@ import { EventsKey } from 'ol/events';
 import { Coordinate } from 'ol/coordinate';
 import { Options } from 'ol/layer/Layer';
 import { RealtimeAPI } from '../../api';
-import { AnyCanvas, AnyLayerClass, AnyMap, AnyRealtimeLayer, LayerGetFeatureInfoOptions, RealtimeGeneralizationLevel, RealtimeMode, RealtimeMot, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOptions, RealtimeTenant, RealtimeTrainId, ViewState, AnyLayer, LayerGetFeatureInfoResponse } from '../../types';
-import { RealtimeTrajectory } from '../../api/typedefs';
+import { AnyCanvas, AnyLayerClass, AnyMap, AnyRealtimeLayer, LayerGetFeatureInfoOptions, RealtimeGeneralizationLevel, RealtimeMode, RealtimeMot, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOptions, RealtimeTenant, RealtimeTrainId, ViewState, AnyLayer, LayerGetFeatureInfoResponse, RealtimeTrajectory } from '../../types';
 import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
 import { FilterFunction, SortFunction } from '../typedefs';
 export type RealtimeLayerMixinOptions = Options & {
@@ -75,7 +74,7 @@ export declare class RealtimeLayerInterface {
      *
      * @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.
+     * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
      */
     getTrajectoryInfos(id: string, mode: RealtimeMode): void;
 }
@@ -91,7 +90,7 @@ declare function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T): {
         [x: string]: any;
         debug: boolean;
         trajectories?: {
-            [key: string]: GeoJSONFeature;
+            [key: string]: RealtimeTrajectory;
         } | undefined;
         canvas?: AnyCanvas | undefined;
         mode: RealtimeMode;
@@ -126,7 +125,7 @@ declare function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T): {
         updateTimeInterval?: number | undefined;
         updateTimeDelay?: number | undefined;
         visibilityRef: EventsKey;
-        selectedVehicle: GeoJSONFeature;
+        selectedVehicle: RealtimeTrajectory;
         getMotsByZoom: (zoom: number) => RealtimeMot[];
         getGeneralizationLevelByZoom: (zoom: number) => RealtimeGeneralizationLevel;
         getRenderTimeIntervalByZoom: (zoom: number) => number;
@@ -198,7 +197,7 @@ declare function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T): {
          * @param {function} filterFc A function use to filter results.
          * @return {Array<Object>} Array of vehicle.
          */
-        getVehicle(filterFc: FilterFunction): GeoJSONFeature[];
+        getVehicle(filterFc: FilterFunction): RealtimeTrajectory[];
         /**
          * Request feature information for a given coordinate.
          *
@@ -213,11 +212,11 @@ declare function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T): {
          * 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.
+         * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
          */
         getTrajectoryInfos(id: RealtimeTrainId): Promise<{
-            stopSequence: WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
-            fullTrajectory: WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            stopSequence: WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
+            fullTrajectory: WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
         }>;
         /**
          * Remove all trajectories that are in the past.
@@ -235,13 +234,13 @@ declare function RealtimeLayerMixin<T extends AnyLayerClass>(Base: T): {
          * @return {boolean} if the trajectory must be displayed or not.
          * @private
          */
-        purgeTrajectory(trajectory: GeoJSONFeature, extent: [number, number, number, number], zoom: number): boolean;
+        purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
         /**
          * Add a trajectory.
          * @param {RealtimeTrajectory} trajectory The trajectory to add.
          * @private
          */
-        addTrajectory(trajectory: GeoJSONFeature): void;
+        addTrajectory(trajectory: RealtimeTrajectory): void;
         removeTrajectory(trajectoryOrId: RealtimeTrajectory | RealtimeTrainId): void;
         /**
          * On zoomend we adjust the time interval of the update of vehicles positions.

package/common/mixins/RealtimeLayerMixin.js

@@ -42,7 +42,7 @@ export class RealtimeLayerInterface {
      *
      * @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.
+     * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
      */
     getTrajectoryInfos(id, mode) { }
 }
@@ -551,8 +551,9 @@ function RealtimeLayerMixin(Base) {
             }
             const vehicles = [];
             for (let i = 0; i < trajectories.length; i += 1) {
-                if (trajectories[i].properties.coordinate &&
-                    containsCoordinate(ext, trajectories[i].properties.coordinate)) {
+                // @ts-expect-error coordinate is added by the RealtimeLayer
+                const { coordinate: trajcoord } = trajectories[i].properties;
+                if (trajcoord && containsCoordinate(ext, trajcoord)) {
                     vehicles.push(trajectories[i]);
                 }
                 if (vehicles.length === nb) {
@@ -561,7 +562,7 @@ function RealtimeLayerMixin(Base) {
             }
             return Promise.resolve({
                 layer: this,
-                features: vehicles,
+                features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
                 coordinate,
             });
         }
@@ -569,7 +570,7 @@ function RealtimeLayerMixin(Base) {
          * 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.
+         * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
          */
         getTrajectoryInfos(id) {
             var _a, _b;
@@ -594,9 +595,9 @@ function RealtimeLayerMixin(Base) {
             Object.entries(this.trajectories || {}).forEach(([key, trajectory]) => {
                 var _a;
                 const timeIntervals = (_a = trajectory === null || trajectory === void 0 ? void 0 : trajectory.properties) === null || _a === void 0 ? void 0 : _a.time_intervals;
-                if (this.time && timeIntervals.length) {
+                if (this.time && (timeIntervals === null || timeIntervals === void 0 ? void 0 : timeIntervals.length)) {
                     const lastTimeInterval = timeIntervals[timeIntervals.length - 1][0];
-                    if (lastTimeInterval < this.time) {
+                    if (lastTimeInterval < this.time.getTime()) {
                         this.removeTrajectory(key);
                     }
                 }
@@ -632,7 +633,10 @@ function RealtimeLayerMixin(Base) {
             if (!this.trajectories) {
                 this.trajectories = {};
             }
-            this.trajectories[trajectory.properties.train_id] = trajectory;
+            const id = trajectory.properties.train_id;
+            if (id !== undefined) {
+                this.trajectories[id] = trajectory;
+            }
             // @ts-ignore the parameter are set by subclasses
             this.renderTrajectories();
         }
@@ -645,7 +649,7 @@ function RealtimeLayerMixin(Base) {
             else {
                 id = trajectoryOrId;
             }
-            if (this.trajectories) {
+            if (id !== undefined && this.trajectories) {
                 delete this.trajectories[id];
             }
         }
@@ -686,6 +690,7 @@ function RealtimeLayerMixin(Base) {
             const trajectory = data.content;
             const { geometry, properties: { train_id: id, time_since_update: timeSinceUpdate, raw_coordinates: rawCoordinates, }, } = trajectory;
             // ignore old events [SBAHNM-97]
+            // @ts-ignore
             if (timeSinceUpdate < 0) {
                 return;
             }
@@ -697,15 +702,18 @@ function RealtimeLayerMixin(Base) {
             if (this.debug &&
                 this.mode === RealtimeModes.TOPOGRAPHIC &&
                 rawCoordinates) {
+                // @ts-ignore
                 trajectory.properties.olGeometry = this.format.readGeometry({
                     type: 'Point',
                     coordinates: fromLonLat(rawCoordinates, this.map.getView().getProjection()),
                 });
             }
             else {
+                // @ts-ignore
                 trajectory.properties.olGeometry = this.format.readGeometry(geometry);
             }
             // TODO Make sure the timeOffset is useful. May be we can remove it.
+            // @ts-ignore
             trajectory.properties.timeOffset = Date.now() - data.timestamp;
             this.addTrajectory(trajectory);
         }

package/common/typedefs.d.ts

@@ -1,6 +1,7 @@
 export default dummy;
 export type FilterFunction = Function;
 export type SortFunction = Function;
+export type getMotsByZoomFunction = Function;
 export type ViewState = {
     /**
      * A time in ms.
@@ -156,6 +157,12 @@ type dummy = ol;
  * @param {any} b Object b to compare.
  * @returns number
  */
+/**
+ * @typedef {function} getMotsByZoomFunction
+ * @param {number} zoom Curent zoom level.
+ * @param {RealtimeMot[][]} motsByZoom Default array of mots by zoom.
+ * @returns number
+ */
 /**
  * @typedef {Object} ViewState
  * @property {number|undefined} time A time in ms.

package/common/typedefs.js

@@ -9,6 +9,12 @@
  * @param {any} b Object b to compare.
  * @returns number
  */
+/**
+ * @typedef {function} getMotsByZoomFunction
+ * @param {number} zoom Curent zoom level.
+ * @param {RealtimeMot[][]} motsByZoom Default array of mots by zoom.
+ * @returns number
+ */
 /**
  * @typedef {Object} ViewState
  * @property {number|undefined} time A time in ms.

package/common/utils/compareDepartures.d.ts

@@ -1,8 +1,8 @@
 import { RealtimeDeparture } from '../../types';
 /**
  * Compare two given departures for sort alogithm,
- * @param {Departure} a First departure.
- * @param {Departure} b Second departure.
+ * @param {RealtimeDeparture} a First departure.
+ * @param {RealtimeDeparture} b Second departure.
  * @param {boolean} [sortByMinArrivalTime=false] Sort departures by arrival time.
  * @private
  */

package/common/utils/compareDepartures.js

@@ -1,7 +1,7 @@
 /**
  * Compare two given departures for sort alogithm,
- * @param {Departure} a First departure.
- * @param {Departure} b Second departure.
+ * @param {RealtimeDeparture} a First departure.
+ * @param {RealtimeDeparture} b Second departure.
  * @param {boolean} [sortByMinArrivalTime=false] Sort departures by arrival time.
  * @private
  */

package/common/utils/getRealtimeModeSuffix.d.ts

@@ -3,6 +3,7 @@ import type { RealtimeModesType } from '../../api/RealtimeAPI';
 /**
  * Get the websocket channel suffix, depending on the current mode.
  * @param {String} mode Mode 'topographic' ou 'schematic'.
+ * @param {String[]} modes List of modes
  * @private
  */
 declare const getModeSuffix: (mode: RealtimeMode, modes: RealtimeModesType) => string;

package/common/utils/getRealtimeModeSuffix.js

@@ -1,6 +1,7 @@
 /**
  * Get the websocket channel suffix, depending on the current mode.
  * @param {String} mode Mode 'topographic' ou 'schematic'.
+ * @param {String[]} modes List of modes
  * @private
  */
 const getModeSuffix = (mode, modes) => mode === modes.SCHEMATIC ? '_schematic' : '';

package/common/utils/getVehiclePosition.d.ts

@@ -1,7 +1,8 @@
 import { Coordinate } from 'ol/coordinate';
+import { RealtimeTrajectory } from '../../types';
 export type VehiclePosition = {
     coord: Coordinate;
-    rotation: number;
+    rotation?: number;
 };
 /**
  * Interpolate or not the vehicle position from a trajectory at a specific date.
@@ -12,5 +13,5 @@ export type VehiclePosition = {
  * @returns {VehiclePosition}
  * @private
  */
-declare const getVehiclePosition: (now: number, trajectory: GeoJSONFeature, noInterpolate: boolean) => VehiclePosition;
+declare const getVehiclePosition: (now: number, trajectory: RealtimeTrajectory, noInterpolate: boolean) => VehiclePosition;
 export default getVehiclePosition;

package/common/utils/getVehiclePosition.js

@@ -9,7 +9,12 @@ import { LineString } from 'ol/geom';
  * @private
  */
 const getVehiclePosition = (now, trajectory, noInterpolate) => {
-    const { time_intervals: timeIntervals, olGeometry, coordinate, } = trajectory.properties;
+    const { time_intervals: timeIntervals, 
+    // @ts-expect-error olGeometry is added by the RealtimeLayer
+    olGeometry, 
+    // @ts-expect-error coordinate is added by the RealtimeLayer
+    coordinate, } = trajectory.properties;
+    // @ts-ignore
     let { type, coordinates } = trajectory.geometry;
     let geometry = olGeometry;
     let coord;

package/common/utils/renderTrajectories.d.ts

@@ -1,7 +1,7 @@
 import { AnyCanvas, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOptions, RealtimeTrajectories, ViewState } from '../../types';
 /**
  * Draw all the trajectories available in a canvas.
- * @param {HTMLCanvas|HTMLOffscreenCanvas} The canvas where to draw the trajectories.
+ * @param {HTMLCanvas|HTMLOffscreenCanvas} canvas The canvas where to draw the trajectories.
  * @param {ViewState} trajectories An array of trajectories.
  * @param {Function} style A function that returns a canvas representing a vehicle of a specific trajectory.
  * @param {ViewState} viewState The view state of the map.

package/common/utils/renderTrajectories.js

@@ -2,7 +2,7 @@ import { compose, apply, create } from 'ol/transform';
 import getVehiclePosition from './getVehiclePosition';
 /**
  * Draw all the trajectories available in a canvas.
- * @param {HTMLCanvas|HTMLOffscreenCanvas} The canvas where to draw the trajectories.
+ * @param {HTMLCanvas|HTMLOffscreenCanvas} canvas The canvas where to draw the trajectories.
  * @param {ViewState} trajectories An array of trajectories.
  * @param {Function} style A function that returns a canvas representing a vehicle of a specific trajectory.
  * @param {ViewState} viewState The view state of the map.

package/common/utils/sortAndFilterDepartures.d.ts

@@ -8,7 +8,7 @@ import type { RealtimeDepartureExtended } from '../../types';
  *
  * @param {Object} depObject The object containing departures by id.
  * @param {boolean} [sortByMinArrivalTime=false] If true sort departures by arrival time.
- * @return {Array<Departure>} Return departures array.
+ * @return {RealtimeDeparture[]} Return departures array.
  * @private
  */
 declare const sortAndfilterDepartures: (depObject: RealtimeAPIDeparturesById, sortByMinArrivalTime?: boolean, maxDepartureAge?: number) => RealtimeDepartureExtended[];

package/common/utils/sortAndFilterDepartures.js

@@ -7,7 +7,7 @@ import compareDepartures from './compareDepartures';
  *
  * @param {Object} depObject The object containing departures by id.
  * @param {boolean} [sortByMinArrivalTime=false] If true sort departures by arrival time.
- * @return {Array<Departure>} Return departures array.
+ * @return {RealtimeDeparture[]} Return departures array.
  * @private
  */
 const sortAndfilterDepartures = (depObject, sortByMinArrivalTime = false, maxDepartureAge = 30) => {

package/common/utils/sortByDelay.d.ts

@@ -1,3 +1,3 @@
-/** @private */
-declare const sortByDelay: (traj1: GeoJSONFeature, traj2: GeoJSONFeature) => number;
+import { RealtimeTrajectory } from '../../types';
+declare const sortByDelay: (traj1: RealtimeTrajectory, traj2: RealtimeTrajectory) => number;
 export default sortByDelay;

package/common/utils/sortByDelay.js

@@ -1,4 +1,3 @@
-/** @private */
 const sortByDelay = (traj1, traj2) => {
     const props1 = traj1.properties;
     const props2 = traj2.properties;
@@ -10,12 +9,17 @@ const sortByDelay = (traj1, traj2) => {
     }
     // We put cancelled train inbetween green and yellow trains
     // >=180000ms corresponds to yellow train
+    // @ts-ignore
     if (props1.cancelled && !props2.cancelled) {
+        // @ts-ignore
         return props2.delay < 180000 ? -1 : 1;
     }
+    // @ts-ignore
     if (props2.cancelled && !props1.cancelled) {
+        // @ts-ignore
         return props1.delay < 180000 ? 1 : -1;
     }
+    // @ts-ignore
     return props2.delay - props1.delay;
 };
 export default sortByDelay;

package/maplibre/layers/Layer.d.ts

@@ -11,7 +11,7 @@ export type LayerOptions = {
  *
  * const layer = new Layer({ id:'MyLayer' });
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
  * @private
  */

package/maplibre/layers/Layer.js

@@ -8,7 +8,7 @@ import { Evented } from 'maplibre-gl';
  *
  * const layer = new Layer({ id:'MyLayer' });
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
  * @private
  */

package/maplibre/layers/RealtimeLayer.d.ts

@@ -8,7 +8,7 @@ declare const RealtimeLayer_base: {
         [x: string]: any;
         debug: boolean;
         trajectories?: {
-            [key: string]: GeoJSONFeature;
+            [key: string]: import("../../types").RealtimeTrajectory;
         } | undefined;
         canvas?: import("../../types").AnyCanvas | undefined;
         mode: import("../../types").RealtimeMode;
@@ -43,7 +43,12 @@ declare const RealtimeLayer_base: {
         updateTimeInterval?: number | undefined;
         updateTimeDelay?: number | undefined;
         visibilityRef: import("ol/events").EventsKey;
-        selectedVehicle: GeoJSONFeature;
+        /**
+         * Render the trajectories using current map's size, resolution and rotation.
+         * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+         * @private
+         */
+        selectedVehicle: import("../../types").RealtimeTrajectory;
         getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
         getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
         getRenderTimeIntervalByZoom: (zoom: number) => number;
@@ -62,19 +67,19 @@ declare const RealtimeLayer_base: {
         renderTrajectories(viewState: ViewState | undefined, noInterpolate: boolean | undefined): void;
         setBbox(extent: [number, number, number, number], zoom: number): void;
         getRefreshTimeInMs(zoom?: number | undefined): number;
-        getVehicle(filterFc: Function): GeoJSONFeature[];
+        getVehicle(filterFc: Function): import("../../types").RealtimeTrajectory[];
         getFeatureInfoAtCoordinate(coordinate: import("ol/coordinate").Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<import("../../types").LayerGetFeatureInfoResponse>;
         getTrajectoryInfos(id: string): Promise<{
-            stopSequence: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature[]>;
-            fullTrajectory: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            stopSequence: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
+            fullTrajectory: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
         }>;
         purgeOutOfDateTrajectories(): void;
-        purgeTrajectory(trajectory: GeoJSONFeature, extent: [number, number, number, number], zoom: number): boolean;
-        addTrajectory(trajectory: GeoJSONFeature): void;
-        removeTrajectory(trajectoryOrId: any): void;
+        purgeTrajectory(trajectory: import("../../types").RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+        addTrajectory(trajectory: import("../../types").RealtimeTrajectory): void;
+        removeTrajectory(trajectoryOrId: string | import("../../types").RealtimeTrajectory): void;
         onZoomEnd(): void;
         onDocumentVisibilityChange(): void;
-        onTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature>): void;
+        onTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeTrajectory>): void;
         onDeleteTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<string>): void;
         highlightVehicle(id: string): void;
         selectVehicle(id: string): void;
@@ -84,18 +89,36 @@ declare const RealtimeLayer_base: {
  * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
+ * import { Map } from 'maplibre-gl';
  * import { RealtimeLayer } from 'mobility-toolbox-js/maplibre';
  *
+ * // Define the map
+ * const map = new Map({ ... });
+ *
+ * // Define your layer map
  * const layer = new RealtimeLayer({
  *   apiKey: "yourApiKey"
  *   // url: "wss://api.geops.io/tracker-ws/v1/",
  * });
  *
+ * // Add the layer to your map *
+ * map.on('load', () => {
+ *   map.addLayer(layer);
+ * });
+ *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ * @see <a href="/example/mb-realtime>Live example</a>
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
+ * @classproperty {function} filter
+ * @classproperty {RealtimeMode} mode
+ * @classproperty {RealtimeMot[]} mots
+ * @classproperty {RealtimeTenant} tenant
+ * @classproperty {function} sort
+ * @classproperty {function} style
+ 
  * @public
  */
 declare class RealtimeLayer extends RealtimeLayer_base {
@@ -104,8 +127,14 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      *
      * @param {RealtimeLayerOptions} options
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
+     * @param {FilterFunction} options.filter Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+     * @param {getMotsByZoomFunction} options.getMotsByZoom Returns for each zoom level the list of MOTs to display. It filters trains on backend side.
+     * @param {number} [options.minZoomInterpolation=8] Minimal zoom level where to start to interpolate train positions.
+     * @param {RealtimeMode} [options.mode='topographic'] The realtime mode to use.
+     * @param {SortFunction} options.sort Sort trains. This function must be fast, it is executed on every render frame.
+     * @param {RealtimeStyleFunction} options.style Function to style the trajectories.
+     * @param {RealtimeTenant} options.tenant Filter trains by its tenant. It filters trains on backend side.
      * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
-     *
      */
     constructor(options?: {});
     /**

package/maplibre/layers/RealtimeLayer.js

@@ -11,18 +11,36 @@ import toMercatorExtent from '../../common/utils/toMercatorExtent';
  * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
+ * import { Map } from 'maplibre-gl';
  * import { RealtimeLayer } from 'mobility-toolbox-js/maplibre';
  *
+ * // Define the map
+ * const map = new Map({ ... });
+ *
+ * // Define your layer map
  * const layer = new RealtimeLayer({
  *   apiKey: "yourApiKey"
  *   // url: "wss://api.geops.io/tracker-ws/v1/",
  * });
  *
+ * // Add the layer to your map *
+ * map.on('load', () => {
+ *   map.addLayer(layer);
+ * });
+ *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ * @see <a href="/example/mb-realtime>Live example</a>
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
+ * @classproperty {function} filter
+ * @classproperty {RealtimeMode} mode
+ * @classproperty {RealtimeMot[]} mots
+ * @classproperty {RealtimeTenant} tenant
+ * @classproperty {function} sort
+ * @classproperty {function} style
+ 
  * @public
  */
 class RealtimeLayer extends RealtimeLayerMixin(Layer) {
@@ -31,13 +49,19 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
      *
      * @param {RealtimeLayerOptions} options
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
+     * @param {FilterFunction} options.filter Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+     * @param {getMotsByZoomFunction} options.getMotsByZoom Returns for each zoom level the list of MOTs to display. It filters trains on backend side.
+     * @param {number} [options.minZoomInterpolation=8] Minimal zoom level where to start to interpolate train positions.
+     * @param {RealtimeMode} [options.mode='topographic'] The realtime mode to use.
+     * @param {SortFunction} options.sort Sort trains. This function must be fast, it is executed on every render frame.
+     * @param {RealtimeStyleFunction} options.style Function to style the trajectories.
+     * @param {RealtimeTenant} options.tenant Filter trains by its tenant. It filters trains on backend side.
      * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
-     *
      */
     constructor(options = {}) {
         var _a;
         const canvas = document.createElement('canvas');
-        super(Object.assign({ canvas }, options));
+        super(Object.assign({ canvas, id: 'realtime' }, options));
         /** @private */
         this.source = {
             id: this.id,