mobility-toolbox-js 3.0.1-beta.0 → 3.0.1-beta.2

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

@@ -1,82 +1,8 @@
-import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
+import { CanvasSourceSpecification, LayerSpecification } from 'maplibre-gl';
+import RealtimeEngine, { RealtimeEngineOptions } from '../../common/utils/RealtimeEngine';
 import Layer, { LayerOptions } from './Layer';
-import type { AnyMapGlMap, ViewState } from '../../types';
-import type { RealtimeTrajectory } from '../../api/typedefs';
-export type RealtimeLayerOptions = LayerOptions & RealtimeLayerMixinOptions;
-declare const RealtimeLayer_base: {
-    new (options: RealtimeLayerMixinOptions): {
-        [x: string]: any;
-        [x: symbol]: any;
-        api: import("..").RealtimeAPI;
-        bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
-        canvas?: import("../../types").AnyCanvas;
-        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
-        debug: boolean;
-        filter?: import("../../common/typedefs").FilterFunction;
-        format: import("ol/format").GeoJSON;
-        generalizationLevel?: import("../../types").RealtimeGeneralizationLevel;
-        generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
-        getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
-        getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
-        getRenderTimeIntervalByZoom: (zoom: number) => number;
-        hoverVehicleId?: import("../../types").RealtimeTrainId;
-        isUpdateBboxOnMoveEnd: boolean;
-        live?: boolean;
-        minZoomInterpolation: number;
-        mode: import("../../types").RealtimeMode;
-        mots?: import("../../types").RealtimeMot[];
-        motsByZoom: import("../../types").RealtimeMot[][];
-        onStart?: ((realtimeLayer: import("../../types").AnyLayer) => void) | undefined;
-        onStop?: ((realtimeLayer: import("../../types").AnyLayer) => void) | undefined;
-        pixelRatio?: number;
-        renderState?: import("../../types").RealtimeRenderState;
-        renderTimeIntervalByZoom: number[];
-        requestId?: number;
-        selectedVehicle: import("../../types").RealtimeTrajectory;
-        selectedVehicleId?: import("../../types").RealtimeTrainId;
-        sort?: import("../../common/typedefs").SortFunction;
-        speed?: number;
-        style?: import("../../types").RealtimeStyleFunction;
-        styleOptions?: import("../../types").RealtimeStyleOptions;
-        tenant: import("../../types").RealtimeTenant;
-        throttleRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
-        time?: Date;
-        trajectories?: Record<import("../../types").RealtimeTrainId, import("../../types").RealtimeTrajectory>;
-        updateTimeDelay?: number;
-        updateTimeInterval?: number;
-        useDebounce?: boolean;
-        useRequestAnimationFrame?: boolean;
-        useThrottle?: boolean;
-        visibilityRef: import("ol/events").EventsKey;
-        addTrajectory(trajectory: import("../../types").RealtimeTrajectory): void;
-        attachToMap(map: import("../../types").AnyMap): void;
-        defineProperties(options: RealtimeLayerMixinOptions): void;
-        detachFromMap(): void;
-        getFeatureInfoAtCoordinate(coordinate: import("ol/coordinate").Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<import("../../types").LayerGetFeatureInfoResponse>;
-        getRefreshTimeInMs(zoom?: number | undefined): number;
-        getTrajectoryInfos(id: import("../../types").RealtimeTrainId): Promise<{
-            fullTrajectory: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
-            stopSequence: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
-        }>;
-        getVehicle(filterFc: import("../../common/typedefs").FilterFunction): import("../../types").RealtimeTrajectory[];
-        highlightVehicle(id: import("../../types").RealtimeTrainId): void;
-        onDeleteTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeTrainId>): void;
-        onDocumentVisibilityChange(): void;
-        onTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeTrajectory>): void;
-        onZoomEnd(): void;
-        purgeOutOfDateTrajectories(): void;
-        purgeTrajectory(trajectory: import("../../types").RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
-        removeTrajectory(trajectoryOrId: import("../../types").RealtimeTrainId | import("../../types").RealtimeTrajectory): void;
-        renderTrajectories(viewState: undefined | ViewState, noInterpolate: boolean | undefined): void;
-        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
-        selectVehicle(id: import("../../types").RealtimeTrainId): void;
-        setBbox(extent: [number, number, number, number], zoom: number): void;
-        start(): void;
-        startUpdateTime(): void;
-        stop(): void;
-        stopUpdateTime(): void;
-    };
-} & typeof Layer;
+import type { AnyCanvas, AnyMapGlMap } from '../../types';
+export type RealtimeLayerOptions = LayerOptions & RealtimeEngineOptions;
 /**
  * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
@@ -100,7 +26,7 @@ declare const RealtimeLayer_base: {
  *
  *
  * @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}
@@ -113,7 +39,12 @@ declare const RealtimeLayer_base: {
  s
  * @public
  */
-declare class RealtimeLayer extends RealtimeLayer_base {
+declare class RealtimeLayer extends Layer {
+    #private;
+    engine: RealtimeEngine;
+    layer: LayerSpecification;
+    source: CanvasSourceSpecification;
+    sourceId: string;
     /**
      * Constructor.
      *
@@ -128,16 +59,52 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      * @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
+     */
+    getViewState(): {
+        center?: undefined;
+        extent?: undefined;
+        pixelRatio?: undefined;
+        resolution?: undefined;
+        rotation?: undefined;
+        size?: undefined;
+        visible?: undefined;
+        zoom?: undefined;
+    } | {
+        center: import("ol/coordinate").Coordinate;
+        extent: number[];
+        pixelRatio: number;
+        resolution: number;
+        rotation: number;
+        size: number[];
+        visible: boolean;
+        zoom: number;
+    };
     /**
      * Add sources, layers and listeners to the map.
      */
-    onAdd(map: AnyMapGlMap, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
+    onAdd(map: AnyMapGlMap, gl: WebGL2RenderingContext | WebGLRenderingContext): void;
+    onLoad(): void;
+    /**
+     * Callback on 'move' event.
+     */
+    onMove(): void;
+    /**
+     * Callback on 'moveend' event.
+     */
+    onMoveEnd(): void;
+    /**
+     * Callback when the RealtimeEngine has rendered successfully.
+     */
+    onRealtimeEngineRender(): void;
     /**
      * Remove source, layers and listeners from the map.
      */
-    onRemove(map: AnyMapGlMap, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
-    onLoad(): void;
+    onRemove(map: AnyMapGlMap, gl: WebGL2RenderingContext | WebGLRenderingContext): void;
+    onZoomEnd(): void;
     /**
      * Start updating vehicles position.
      *
@@ -150,32 +117,8 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      * @public
      */
     stop(): void;
-    /**
-     * Render the trajectories using current map's size, resolution and rotation.
-     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
-     * @private
-     */
-    renderTrajectories(noInterpolate?: boolean): void;
-    /**
-     * Return the delay in ms before the next rendering.
-     */
-    getRefreshTimeInMs(): number;
-    /**
-     * Remove the trajectory form the list if necessary.
-     */
-    purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
-    /**
-     * Send the current bbox to the websocket
-     */
-    setBbox(extent?: [number, number, number, number], zoom?: number): void;
-    renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
-    /**
-     * Callback on 'move' event.
-     */
-    onMove(): void;
-    /**
-     * Callback on 'moveend' event.
-     */
-    onMoveEnd(): void;
+    get canvas(): AnyCanvas | undefined;
+    get pixelRatio(): number | undefined;
+    set pixelRatio(pixelRatio: number | undefined);
 }
 export default RealtimeLayer;

package/maplibre/layers/RealtimeLayer.js

@@ -1,12 +1,22 @@
-// @ts-nocheck
-import { fromLonLat } from 'ol/proj';
-import { getWidth, getHeight } from 'ol/extent';
-import transformRotate from '@turf/transform-rotate';
+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 RealtimeLayerMixin from '../../common/mixins/RealtimeLayerMixin';
-import Layer from './Layer';
+import transformRotate from '@turf/transform-rotate';
+import { getHeight, getWidth } from 'ol/extent';
+import { fromLonLat } from 'ol/proj';
+import RealtimeEngine from '../../common/utils/RealtimeEngine';
 import { getSourceCoordinates } from '../utils';
-import toMercatorExtent from '../../common/utils/toMercatorExtent';
+import Layer from './Layer';
 /**
  * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
@@ -30,7 +40,7 @@ import toMercatorExtent from '../../common/utils/toMercatorExtent';
  *
  *
  * @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}
@@ -43,7 +53,7 @@ import toMercatorExtent from '../../common/utils/toMercatorExtent';
  s
  * @public
  */
-class RealtimeLayer extends RealtimeLayerMixin(Layer) {
+class RealtimeLayer extends Layer {
     /**
      * Constructor.
      *
@@ -60,12 +70,17 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
      */
     constructor(options = {}) {
         var _a;
-        const canvas = document.createElement('canvas');
-        super(Object.assign({ canvas, id: 'realtime' }, options));
-        /** @private */
+        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 = {
-            id: this.id,
-            type: 'canvas',
+            // 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,
+            // @ts-expect-error bad type definition
+            attribution: (_a = options.attribution) === null || _a === void 0 ? void 0 : _a.join(', '),
             canvas: this.canvas,
             // Set a default coordinates, it will be overrides on next data update
             coordinates: [
@@ -74,108 +89,47 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
                 [2, 2],
                 [0, 0],
             ],
-            // 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,
-            attribution: (_a = options.attribution) === null || _a === void 0 ? void 0 : _a.join(', '),
             loaded: true,
+            type: 'canvas',
         };
-        /** @private */
         this.layer = {
-            id: `${this.id}-raster`,
-            type: 'raster',
-            source: this.id,
+            id: __classPrivateFieldGet(this, _RealtimeLayer_internalId, "f"),
             layout: {
                 visibility: 'visible',
             },
             paint: {
-                'raster-opacity': 1,
                 'raster-fade-duration': 0,
+                'raster-opacity': 1,
                 'raster-resampling': 'nearest', // important otherwise it looks blurry
             },
+            source: this.sourceId,
+            type: 'raster',
         };
-        /** @private */
         this.onLoad = this.onLoad.bind(this);
-        /** @private */
         this.onMove = this.onMove.bind(this);
-        /** @private */
         this.onMoveEnd = this.onMoveEnd.bind(this);
-        /** @private */
         this.onZoomEnd = this.onZoomEnd.bind(this);
     }
     /**
-     * Add sources, layers and listeners to the map.
-     */
-    onAdd(map, gl) {
-        super.onAdd(map, gl);
-        if (map.isStyleLoaded()) {
-            this.onLoad();
-        }
-        map.on('load', this.onLoad);
-    }
-    /**
-     * Remove source, layers and listeners from the map.
-     */
-    onRemove(map, gl) {
-        map.off('load', this.onLoad);
-        if (map.getLayer(this.layer.id)) {
-            map.removeLayer(this.layer.id);
-        }
-        if (map.getSource(this.id)) {
-            map.removeSource(this.id);
-        }
-        super.onRemove(map, gl);
-    }
-    onLoad() {
-        if (!this.map.getSource(this.id)) {
-            this.map.addSource(this.id, this.source);
-        }
-        if (!this.map.getLayer(this.layer.id)) {
-            this.map.addLayer(this.layer, this.id);
-        }
-        this.start();
-    }
-    /**
-     * Start updating vehicles position.
-     *
-     * @public
-     */
-    start() {
-        super.start();
-        this.map.on('move', this.onMove);
-        this.map.on('moveend', this.onMoveEnd);
-        this.map.on('zoomend', this.onZoomEnd);
-    }
-    /**
-     * Stop updating vehicles position.
-     *
-     * @public
-     */
-    stop() {
-        var _a, _b, _c;
-        super.stop();
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.off('move', this.onMove);
-        (_b = this.map) === null || _b === void 0 ? void 0 : _b.off('moveend', this.onMoveEnd);
-        (_c = this.map) === null || _c === void 0 ? void 0 : _c.off('zoomend', this.onZoomEnd);
-    }
-    /**
-     * Render the trajectories using current map's size, resolution and rotation.
-     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * Return the current view state. Used by the RealtimeEngine.
      * @private
      */
-    renderTrajectories(noInterpolate = false) {
+    getViewState() {
         if (!this.map) {
-            return;
+            return {};
         }
         if (!this.pixelRatio) {
             this.pixelRatio = 1;
         }
-        const { width, height } = this.map.getCanvas();
+        const { height, width } = this.map.getCanvas();
         const center = this.map.getCenter();
         // We use turf here to have good transform.
+        // @ts-expect-error bad type definition
         const leftBottom = this.map.unproject({
             x: 0,
             y: height / this.pixelRatio,
         }); // southWest
+        // @ts-expect-error bad type definition
         const rightTop = this.map.unproject({
             x: width / this.pixelRatio,
             y: 0,
@@ -191,60 +145,118 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
         const yResolution = getHeight(bounds) / (height / this.pixelRatio);
         const res = Math.max(xResolution, yResolution);
         // Coordinate of trajectories are in mercator so we have to pass the proper resolution and center in mercator.
-        const viewState = {
-            size: [width / this.pixelRatio, height / this.pixelRatio],
+        return {
             center: fromLonLat([center.lng, center.lat]),
             extent: bounds,
+            pixelRatio: this.pixelRatio,
             resolution: res,
-            zoom: this.map.getZoom() - 1,
             rotation: -(this.map.getBearing() * Math.PI) / 180,
-            pixelRatio: this.pixelRatio,
+            size: [width / this.pixelRatio, height / this.pixelRatio],
+            visible: true,
+            zoom: this.map.getZoom() - 1,
         };
-        super.renderTrajectories(viewState, noInterpolate);
     }
     /**
-     * Return the delay in ms before the next rendering.
+     * Add sources, layers and listeners to the map.
      */
-    getRefreshTimeInMs() {
-        return super.getRefreshTimeInMs(this.map.getZoom());
+    onAdd(map, gl) {
+        super.onAdd(map, gl);
+        this.engine.attachToMap();
+        if (map.isStyleLoaded()) {
+            this.onLoad();
+        }
+        map.on('load', this.onLoad);
+    }
+    onLoad() {
+        var _a, _b, _c, _d;
+        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);
+        }
+        this.start();
     }
     /**
-     * Remove the trajectory form the list if necessary.
+     * Callback on 'move' event.
      */
-    purgeTrajectory(trajectory, extent, zoom) {
-        return super.purgeTrajectory(trajectory, extent || toMercatorExtent(this.map.getBounds()), zoom || Math.floor(this.map.getZoom() - 1));
+    onMove() {
+        this.engine.renderTrajectories();
     }
     /**
-     * Send the current bbox to the websocket
+     * Callback on 'moveend' event.
      */
-    setBbox(extent, zoom) {
-        super.setBbox(extent || toMercatorExtent(this.map.getBounds()), zoom || this.map.getZoom() - 1);
+    onMoveEnd() {
+        this.engine.renderTrajectories();
+        if (this.engine.isUpdateBboxOnMoveEnd) {
+            this.engine.setBbox();
+        }
     }
-    renderTrajectoriesInternal(viewState, noInterpolate = false) {
-        const render = super.renderTrajectoriesInternal(viewState, noInterpolate);
-        if (render && this.map.style) {
+    /**
+     * Callback when the RealtimeEngine has rendered successfully.
+     */
+    onRealtimeEngineRender() {
+        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);
             }
         }
-        return render;
     }
     /**
-     * Callback on 'move' event.
+     * Remove source, layers and listeners from the map.
      */
-    onMove() {
-        this.renderTrajectories();
+    onRemove(map, gl) {
+        this.engine.detachFromMap();
+        this.stop();
+        map.off('load', this.onLoad);
+        if (map.getLayer(this.layer.id)) {
+            map.removeLayer(this.layer.id);
+        }
+        if (map.getSource(this.sourceId)) {
+            map.removeSource(this.sourceId);
+        }
+        super.onRemove(map, gl);
+    }
+    onZoomEnd() {
+        this.engine.onZoomEnd();
     }
     /**
-     * Callback on 'moveend' event.
+     * Start updating vehicles position.
+     *
+     * @public
      */
-    onMoveEnd() {
-        this.renderTrajectories();
-        if (this.isUpdateBboxOnMoveEnd) {
-            this.setBbox();
-        }
+    start() {
+        var _a, _b, _c;
+        this.engine.start();
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('move', this.onMove);
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.on('moveend', this.onMoveEnd);
+        (_c = this.map) === null || _c === void 0 ? void 0 : _c.on('zoomend', this.onZoomEnd);
+    }
+    /**
+     * Stop updating vehicles position.
+     *
+     * @public
+     */
+    stop() {
+        var _a, _b, _c;
+        this.engine.stop();
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.off('move', this.onMove);
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.off('moveend', this.onMoveEnd);
+        (_c = this.map) === null || _c === void 0 ? void 0 : _c.off('zoomend', this.onZoomEnd);
+    }
+    get canvas() {
+        return this.engine.canvas;
+    }
+    get pixelRatio() {
+        return this.engine.pixelRatio || 1;
+    }
+    set pixelRatio(pixelRatio) {
+        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],