mobility-toolbox-js 3.0.0-beta.33 → 3.0.0-beta.34

package/api/RealtimeAPI.d.ts

@@ -55,7 +55,7 @@ export declare const RealtimeModes: {
  * });
  *
  * // Close the websocket connection
- * // api.close();
+ * api.close();
  *
  * @public
  */
@@ -350,7 +350,7 @@ declare class RealtimeAPI {
      * @param {function(data: { content: RealtimeDeparture[] })} onMessage Callback function to unsubscribe. If null all subscriptions for the channel will be unsubscribed.
      * @public
      */
-    unsubscribeTimetabe(stationId: RealtimeStationId, onMessage?: WebSocketAPIMessageCallback<RealtimeDeparture>): void;
+    unsubscribeTimetable(stationId: RealtimeStationId, onMessage?: WebSocketAPIMessageCallback<RealtimeDeparture>): void;
     /**
      * Unsubscribe to trajectory channels.
      * @param {function(data: { content: RealtimeTrajectory })} onMessage Callback function to unsubscribe. If null all subscriptions for the channel will be unsubscribed.

package/api/RealtimeAPI.js

@@ -39,7 +39,7 @@ export const RealtimeModes = {
  * });
  *
  * // Close the websocket connection
- * // api.close();
+ * api.close();
  *
  * @public
  */
@@ -422,7 +422,7 @@ class RealtimeAPI {
      * @deprecated Use RealtimeAPI.unsubscribeTimetabe instead.
      */
     unsubscribeDepartures(stationId, onMessage) {
-        this.unsubscribeTimetabe(stationId, onMessage);
+        this.unsubscribeTimetable(stationId, onMessage);
     }
     /**
      * Unsubscribe disruptions.
@@ -490,7 +490,7 @@ class RealtimeAPI {
      * @param {function(data: { content: RealtimeDeparture[] })} onMessage Callback function to unsubscribe. If null all subscriptions for the channel will be unsubscribed.
      * @public
      */
-    unsubscribeTimetabe(stationId, onMessage) {
+    unsubscribeTimetable(stationId, onMessage) {
         this.unsubscribe(`timetable_${stationId}`, '', onMessage);
     }
     /**

package/common/controls/StopFinderControlCommon.d.ts

@@ -30,7 +30,7 @@ declare class StopFinderControlCommon {
      * @param {Object} options Options
      * @param {HTMLElement} options.element HTML element where to attach input and suggestions.
      * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/). See StopsAPI.
-     * @param {string} [options.url='https://api.geops.io/tracker/v1'] Stops service url. See StopsAPI.
+     * @param {string} [options.url='https://api.geops.io/stops/v1/'] Stops service url. See StopsAPI.
      * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
      * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
      */

package/common/controls/StopFinderControlCommon.js

@@ -13,7 +13,7 @@ class StopFinderControlCommon {
      * @param {Object} options Options
      * @param {HTMLElement} options.element HTML element where to attach input and suggestions.
      * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/). See StopsAPI.
-     * @param {string} [options.url='https://api.geops.io/tracker/v1'] Stops service url. See StopsAPI.
+     * @param {string} [options.url='https://api.geops.io/stops/v1/'] Stops service url. See StopsAPI.
      * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
      * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
      */

package/common/utils/RealtimeEngine.d.ts

@@ -108,7 +108,6 @@ declare class RealtimeEngine {
      * Get the duration before the next update depending on zoom level.
      *
      * @private
-     * @param {number} zoom
      */
     getRefreshTimeInMs(): number;
     /**
@@ -146,7 +145,6 @@ declare class RealtimeEngine {
     /**
      * On zoomend we adjust the time interval of the update of vehicles positions.
      *
-     * @param evt Event that triggered the function.
      * @private
      */
     onZoomEnd(): void;
@@ -161,8 +159,6 @@ declare class RealtimeEngine {
      *  - that aren't in the MOT list.
      *
      * @param {RealtimeTrajectory} trajectory
-     * @param {Array<number>} extent
-     * @param {number} zoom
      * @return {boolean} if the trajectory must be displayed or not.
      * @private
      */
@@ -172,12 +168,6 @@ declare class RealtimeEngine {
      * 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.

package/common/utils/RealtimeEngine.js

@@ -143,7 +143,6 @@ class RealtimeEngine {
      * Get the duration before the next update depending on zoom level.
      *
      * @private
-     * @param {number} zoom
      */
     getRefreshTimeInMs() {
         var _a;
@@ -279,7 +278,6 @@ class RealtimeEngine {
     /**
      * On zoomend we adjust the time interval of the update of vehicles positions.
      *
-     * @param evt Event that triggered the function.
      * @private
      */
     onZoomEnd() {
@@ -307,8 +305,6 @@ class RealtimeEngine {
      *  - that aren't in the MOT list.
      *
      * @param {RealtimeTrajectory} trajectory
-     * @param {Array<number>} extent
-     * @param {number} zoom
      * @return {boolean} if the trajectory must be displayed or not.
      * @private
      */
@@ -340,12 +336,6 @@ class RealtimeEngine {
      * 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.

package/common/utils/renderTrajectories.d.ts

@@ -5,6 +5,7 @@ import { AnyCanvas, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOpt
  * @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.
+ * @param {Object} options The options.
  * @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
  * @param {boolean} options.selectedVehicleId The id of the vehicle to select.
  * @param {boolean} options.noInterpolate If true trajectories are not interpolated but

package/common/utils/renderTrajectories.js

@@ -6,6 +6,7 @@ import getVehiclePosition from './getVehiclePosition';
  * @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.
+ * @param {Object} options The options.
  * @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
  * @param {boolean} options.selectedVehicleId The id of the vehicle to select.
  * @param {boolean} options.noInterpolate If true trajectories are not interpolated but

package/common/utils/sortAndFilterDepartures.d.ts

@@ -8,6 +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.
+ * @param {number} [maxDepartureAge=30] The maximum departure age in minutes.
  * @return {RealtimeDeparture[]} Return departures array.
  * @private
  */

package/common/utils/sortAndFilterDepartures.js

@@ -7,6 +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.
+ * @param {number} [maxDepartureAge=30] The maximum departure age in minutes.
  * @return {RealtimeDeparture[]} Return departures array.
  * @private
  */

package/maplibre/controls/CopyrightControl.d.ts

@@ -1,10 +1,10 @@
 import { ControlPosition, IControl } from 'maplibre-gl';
 /**
- * Display layer's copyrights.
+ * Display layer's attributions trying to remove duplicated ones.
  *
  * @example
- * import { Map } from 'Maplibre-gl';
- * import { CopyrightControl } from 'mobility-toolbox-js/Maplibre';
+ * import { Map } from 'maplibre-gl';
+ * import { CopyrightControl } from 'mobility-toolbox-js/maplibre';
  *
  * const map = new Map({
  *   container: 'map',
@@ -15,21 +15,24 @@ import { ControlPosition, IControl } from 'maplibre-gl';
  * map.addControl(control);
  *
  *
- * @see <a href="/example/mb-copyright">Maplibre copyright example</a>
+ * @see <a href="/example/mb-realtime>MapLibre Realtime layer example</a>
  *
+ * @implements {maplibregl.IControl}
+ *
+ * @public
  */
 declare class CopyrightControl implements IControl {
-    map?: maplibregl.Map;
     container?: HTMLElement;
     content?: string;
+    map?: maplibregl.Map;
     options?: {
         customAttribution?: string | string[];
         separator?: string;
     };
     constructor(options?: {});
+    getDefaultPosition(): ControlPosition;
     onAdd(map: maplibregl.Map): HTMLElement;
     onRemove(): HTMLElement | undefined;
-    getDefaultPosition(): ControlPosition;
     render(): void;
 }
 export default CopyrightControl;

package/maplibre/controls/CopyrightControl.js

@@ -4,11 +4,11 @@ import { getMapGlCopyrights } from '../../common/utils';
  */
 const DEFAULT_SEPARATOR = ' | ';
 /**
- * Display layer's copyrights.
+ * Display layer's attributions trying to remove duplicated ones.
  *
  * @example
- * import { Map } from 'Maplibre-gl';
- * import { CopyrightControl } from 'mobility-toolbox-js/Maplibre';
+ * import { Map } from 'maplibre-gl';
+ * import { CopyrightControl } from 'mobility-toolbox-js/maplibre';
  *
  * const map = new Map({
  *   container: 'map',
@@ -19,13 +19,20 @@ const DEFAULT_SEPARATOR = ' | ';
  * map.addControl(control);
  *
  *
- * @see <a href="/example/mb-copyright">Maplibre copyright example</a>
+ * @see <a href="/example/mb-realtime>MapLibre Realtime layer example</a>
  *
+ * @implements {maplibregl.IControl}
+ *
+ * @public
  */
 class CopyrightControl {
     constructor(options = {}) {
         this.options = options;
     }
+    // eslint-disable-next-line class-methods-use-this
+    getDefaultPosition() {
+        return 'bottom-right';
+    }
     onAdd(map) {
         this.map = map;
         if (!this.container) {
@@ -51,10 +58,6 @@ class CopyrightControl {
         this.map = undefined;
         return this.container;
     }
-    // eslint-disable-next-line class-methods-use-this
-    getDefaultPosition() {
-        return 'bottom-right';
-    }
     render() {
         var _a, _b;
         if (this.map && this.container) {

package/maplibre/layers/Layer.d.ts

@@ -1,8 +1,9 @@
 import { CustomLayerInterface, Evented } from 'maplibre-gl';
 import type { AnyMapGlMap } from '../../types';
-export type LayerOptions = {
+export interface LayerOptions {
     id?: string;
-};
+}
+export type CUSTOM = 'custom';
 /**
  * A class representing a layer to display on an Maplibre map.
  *
@@ -19,10 +20,10 @@ declare class Layer extends Evented implements CustomLayerInterface {
     id: string;
     map: AnyMapGlMap | undefined;
     options: LayerOptions;
-    type: 'custom';
+    type: CUSTOM;
     constructor(options?: LayerOptions);
-    onAdd(map: AnyMapGlMap, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
-    onRemove(map: AnyMapGlMap, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
-    render(gl: WebGLRenderingContext | WebGL2RenderingContext): void;
+    onAdd(map: AnyMapGlMap, gl: WebGL2RenderingContext | WebGLRenderingContext): void;
+    onRemove(map: AnyMapGlMap, gl: WebGL2RenderingContext | WebGLRenderingContext): void;
+    render(gl: WebGL2RenderingContext | WebGLRenderingContext): void;
 }
 export default Layer;

package/maplibre/layers/Layer.js

@@ -1,5 +1,5 @@
-import { v4 as uuid } from 'uuid';
 import { Evented } from 'maplibre-gl';
+import { v4 as uuid } from 'uuid';
 /**
  * A class representing a layer to display on an Maplibre map.
  *
@@ -19,7 +19,6 @@ class Layer extends Evented {
         this.type = 'custom';
         this.options = options;
         this.id = options.id || uuid();
-        this.type = 'custom';
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onAdd(map, gl) {

package/maplibre/layers/RealtimeLayer.d.ts

@@ -26,7 +26,7 @@ export type RealtimeLayerOptions = LayerOptions & RealtimeEngineOptions;
  *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
- * @see <a href="/example/mb-realtime>Live example</a>
+ * @see <a href="/example/mb-realtime>MapLibre Realtime layer example</a>
  *
  * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
@@ -40,9 +40,11 @@ export type RealtimeLayerOptions = LayerOptions & RealtimeEngineOptions;
  * @public
  */
 declare class RealtimeLayer extends Layer {
+    #private;
     engine: RealtimeEngine;
     layer: LayerSpecification;
     source: CanvasSourceSpecification;
+    sourceId: string;
     /**
      * Constructor.
      *
@@ -57,7 +59,7 @@ declare class RealtimeLayer extends Layer {
      * @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?: {});
+    constructor(options?: RealtimeLayerOptions);
     /**
      * Return the current view state. Used by the RealtimeEngine.
      * @private

package/maplibre/layers/RealtimeLayer.js

@@ -1,3 +1,15 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _RealtimeLayer_internalId;
 import { point } from '@turf/helpers';
 import transformRotate from '@turf/transform-rotate';
 import { getHeight, getWidth } from 'ol/extent';
@@ -28,7 +40,7 @@ import Layer from './Layer';
  *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
- * @see <a href="/example/mb-realtime>Live example</a>
+ * @see <a href="/example/mb-realtime>MapLibre Realtime layer example</a>
  *
  * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
@@ -58,8 +70,12 @@ class RealtimeLayer extends Layer {
      */
     constructor(options = {}) {
         var _a;
-        super(Object.assign({ id: 'realtime' }, options));
+        const id = (options === null || options === void 0 ? void 0 : options.id) || 'realtime';
+        super(Object.assign(Object.assign({}, options), { id: 'realtime-custom-' + id }));
+        _RealtimeLayer_internalId.set(this, void 0);
+        __classPrivateFieldSet(this, _RealtimeLayer_internalId, id, "f");
         this.engine = new RealtimeEngine(Object.assign({ getViewState: this.getViewState.bind(this), onRender: this.onRealtimeEngineRender.bind(this) }, options));
+        this.sourceId = __classPrivateFieldGet(this, _RealtimeLayer_internalId, "f");
         this.source = {
             // Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
             animate: true,
@@ -73,12 +89,11 @@ class RealtimeLayer extends Layer {
                 [2, 2],
                 [0, 0],
             ],
-            id: this.id,
             loaded: true,
             type: 'canvas',
         };
         this.layer = {
-            id: `${this.id}-raster`,
+            id: __classPrivateFieldGet(this, _RealtimeLayer_internalId, "f"),
             layout: {
                 visibility: 'visible',
             },
@@ -87,7 +102,7 @@ class RealtimeLayer extends Layer {
                 'raster-opacity': 1,
                 'raster-resampling': 'nearest', // important otherwise it looks blurry
             },
-            source: this.id,
+            source: this.sourceId,
             type: 'raster',
         };
         this.onLoad = this.onLoad.bind(this);
@@ -100,7 +115,6 @@ class RealtimeLayer extends Layer {
      * @private
      */
     getViewState() {
-        console.log(this);
         if (!this.map) {
             return {};
         }
@@ -155,8 +169,8 @@ class RealtimeLayer extends Layer {
     }
     onLoad() {
         var _a, _b, _c, _d;
-        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getSource(this.id))) {
-            (_b = this.map) === null || _b === void 0 ? void 0 : _b.addSource(this.id, this.source);
+        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getSource(this.sourceId))) {
+            (_b = this.map) === null || _b === void 0 ? void 0 : _b.addSource(this.sourceId, this.source);
         }
         if (!((_c = this.map) === null || _c === void 0 ? void 0 : _c.getLayer(this.layer.id))) {
             (_d = this.map) === null || _d === void 0 ? void 0 : _d.addLayer(this.layer, this.id);
@@ -185,7 +199,7 @@ class RealtimeLayer extends Layer {
         var _a;
         if ((_a = this.map) === null || _a === void 0 ? void 0 : _a.style) {
             const extent = getSourceCoordinates(this.map, this.pixelRatio);
-            const source = this.map.getSource(this.id);
+            const source = this.map.getSource(this.sourceId);
             if (source) {
                 // @ts-expect-error bad type definition
                 source.setCoordinates(extent);
@@ -202,8 +216,8 @@ class RealtimeLayer extends Layer {
         if (map.getLayer(this.layer.id)) {
             map.removeLayer(this.layer.id);
         }
-        if (map.getSource(this.id)) {
-            map.removeSource(this.id);
+        if (map.getSource(this.sourceId)) {
+            map.removeSource(this.sourceId);
         }
         super.onRemove(map, gl);
     }
@@ -244,4 +258,5 @@ class RealtimeLayer extends Layer {
         this.engine.pixelRatio = pixelRatio || 1;
     }
 }
+_RealtimeLayer_internalId = new WeakMap();
 export default RealtimeLayer;

package/maplibre/utils/getSourceCoordinates.d.ts

@@ -2,6 +2,7 @@ import { AnyMapGlMap } from '../../types';
 /**
  * Get the canvas source coordinates of the current map's extent.
  * @param {maplibregl.Map} map A map object.
+ * @param {number} [pixelRatio=1] The pixel ratio.
  */
 export declare const getSourceCoordinates: (map: AnyMapGlMap, pixelRatio?: number) => number[][];
 export default getSourceCoordinates;

package/maplibre/utils/getSourceCoordinates.js

@@ -1,20 +1,21 @@
 /**
  * Get the canvas source coordinates of the current map's extent.
  * @param {maplibregl.Map} map A map object.
+ * @param {number} [pixelRatio=1] The pixel ratio.
  */
 export const getSourceCoordinates = (map, pixelRatio = 1) => {
     // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
     const { height, width } = map.getCanvas();
-    // @ts-expect-error
+    // @ts-expect-error - to fix
     const leftTop = map.unproject({ x: 0, y: 0 });
-    // @ts-expect-error
+    // @ts-expect-error - to fix
     const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
-    // @ts-expect-error
+    // @ts-expect-error - to fix
     const rightBottom = map.unproject({
         x: width / pixelRatio,
         y: height / pixelRatio,
     });
-    // @ts-expect-error
+    // @ts-expect-error - to fix
     const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
     return [
         [leftTop.lng, leftTop.lat],