mobility-toolbox-js 2.0.1-beta.13 → 2.2.0-beta.0

package/mapbox/layers/Layer.js

@@ -1,57 +1,101 @@
-import { unByKey } from "ol/Observable";
-import { transformExtent } from "ol/proj";
-import LayerCommon from "../../common/layers/Layer";
-class Layer extends LayerCommon {
-  attachToMap(map) {
-    super.attachToMap(map);
-    if (!this.map) {
-      return;
-    }
-    if (this.isClickActive || this.isHoverActive) {
-      this.toggleVisibleListeners();
-      this.onChangeVisibleKey = this.on("change:visible", this.toggleVisibleListeners);
-    }
-  }
-  detachFromMap(map) {
-    if (this.map) {
-      this.map.off("mousemove", this.onUserMoveCallback);
-      this.map.off("click", this.onUserClickCallback);
-      unByKey(this.onChangeVisibleKey);
-    }
-    super.detachFromMap(map);
-  }
-  onUserClickCallback(evt) {
-    super.onUserClickCallback({ coordinate: evt.lngLat.toArray(), ...evt });
-  }
-  onUserMoveCallback(evt) {
-    super.onUserMoveCallback({ coordinate: evt.lngLat.toArray(), ...evt });
-  }
-  toggleVisibleListeners() {
-    if (this.visible) {
-      if (this.isClickActive) {
-        this.map.on("click", this.onUserClickCallback);
-      }
-      if (this.isHoverActive) {
-        this.map.on("mousemove", this.onUserMoveCallback);
-      }
-    } else {
-      if (this.isClickActive) {
-        this.map.off("click", this.onUserClickCallback);
-      }
-      if (this.isHoverActive) {
-        this.map.off("mousemove", this.onUserMoveCallback);
-      }
-    }
-  }
-  getMercatorExtent() {
-    const bounds = this.map.getBounds().toArray();
-    return transformExtent([...bounds[0], ...bounds[1]], "EPSG:4326", "EPSG:3857");
-  }
-  getOlZoom() {
-    return this.map.getZoom() + 1;
-  }
-  clone(newOptions) {
-    return new Layer({ ...this.options, ...newOptions });
-  }
+import { unByKey } from 'ol/Observable';
+import { transformExtent } from 'ol/proj';
+import LayerCommon from '../../common/layers/LayerCommon';
+import userInteractionsMixin from '../../common/mixins/UserInteractionsLayerMixin';
+/**
+ * A class representing a layer to display on an OpenLayers map.
+ *
+ * @example
+ * import { Layer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new Layer({
+ *   olLayer: ...,
+ * });
+ *
+ * @see <a href="/example/ol-map">Map example</a>
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class Layer extends userInteractionsMixin(LayerCommon) {
+    /**
+     * Initialize the layer and listen to user events.
+     * @param {mapboxgl.Map|maplibregl.Map} map
+     */
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
+        }
+        if (this.userInteractions) {
+            this.toggleVisibleListeners();
+            this.onChangeVisibleKey = this.on(
+            // @ts-ignore
+            'change:visible', this.toggleVisibleListeners);
+        }
+    }
+    detachFromMap() {
+        if (this.map) {
+            this.deactivateUserInteractions();
+            // @ts-ignore
+            unByKey(this.onChangeVisibleKey);
+        }
+        super.detachFromMap();
+    }
+    activateUserInteractions() {
+        var _a, _b;
+        this.deactivateUserInteractions();
+        if (this.map &&
+            this.userInteractions &&
+            this.userClickInteractions &&
+            ((_a = this.userClickCallbacks) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.map.on('click', this.onUserClickCallback);
+        }
+        if (this.map &&
+            this.userInteractions &&
+            this.userHoverInteractions &&
+            ((_b = this.userHoverCallbacks) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.map.on('mousemove', this.onUserMoveCallback);
+        }
+    }
+    deactivateUserInteractions() {
+        if (this.map) {
+            this.map.off('mousemove', this.onUserMoveCallback);
+            this.map.off('click', this.onUserClickCallback);
+        }
+    }
+    /**
+     * Toggle listeners needed when a layer is avisible or not.
+     * @private
+     */
+    toggleVisibleListeners() {
+        if (this.visible) {
+            this.activateUserInteractions();
+        }
+        else {
+            this.deactivateUserInteractions();
+        }
+    }
+    /**
+     * Returns the current extent in mercator coordinates.
+     */
+    getMercatorExtent() {
+        const bounds = this.map.getBounds().toArray();
+        return transformExtent([...bounds[0], ...bounds[1]], 'EPSG:4326', 'EPSG:3857');
+    }
+    /**
+     * Returns the equivalent zoom in Openlayers.
+     */
+    getOlZoom() {
+        return this.map.getZoom() + 1;
+    }
+    /**
+     * Create a copy of the Layer.
+     * @param {Object} newOptions Options to override
+     * @return {Layer} A Layer
+     */
+    clone(newOptions) {
+        return new Layer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
 }
 export default Layer;

package/mapbox/layers/RealtimeLayer.d.ts

@@ -0,0 +1,181 @@
+/// <reference types="mapbox-gl" />
+import { Coordinate } from 'ol/coordinate';
+import { Feature } from 'ol';
+import Layer from './Layer';
+import type { AnyMapboxMap, LayerGetFeatureInfoResponse } from '../../types';
+import type { RealtimeTrajectory } from '../../api/typedefs';
+declare const RealtimeLayer_base: {
+    new (options: import("../../common/mixins/RealtimeLayerMixin").RealtimeLayerMixinOptions): {
+        [x: string]: any;
+        debug: boolean;
+        trajectories?: {
+            [key: string]: GeoJSONFeature;
+        } | undefined;
+        canvas?: import("../../types").AnyCanvas | undefined;
+        mode: import("../../types").RealtimeMode;
+        api: import("../../api/RealtimeAPI").default;
+        tenant: string;
+        time?: Date | undefined;
+        live?: boolean | undefined;
+        speed?: number | undefined;
+        filter?: Function | undefined;
+        sort?: Function | undefined;
+        style?: import("../../types").RealtimeStyleFunction | undefined;
+        styleOptions?: import("../../types").RealtimeStyleOptions | undefined;
+        pixelRatio?: number | undefined;
+        minZoomInterpolation: number;
+        isUpdateBboxOnMoveEnd: boolean;
+        hoverVehicleId?: string | undefined;
+        selectedVehicleId?: string | undefined;
+        renderState?: import("../../types").RealtimeRenderState | undefined;
+        useRequestAnimationFrame?: boolean | undefined;
+        useDebounce?: boolean | undefined;
+        useThrottle?: boolean | undefined;
+        mots?: import("../../types").RealtimeMot[] | undefined;
+        motsByZoom: import("../../types").RealtimeMot[][];
+        generalizationLevel?: import("../../types").RealtimeGeneralizationLevel | undefined;
+        generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
+        renderTimeIntervalByZoom: number[];
+        format: import("ol/format/GeoJSON").default;
+        requestId?: number | undefined;
+        updateTimeInterval?: number | undefined;
+        updateTimeDelay?: number | undefined;
+        visibilityRef: import("ol/events").EventsKey;
+        selectedVehicle: GeoJSONFeature;
+        getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
+        getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
+        getRenderTimeIntervalByZoom: (zoom: number) => number;
+        throttleRenderTrajectories: (viewState: import("../../types").ViewState, noInterpolate?: boolean | undefined) => void;
+        debounceRenderTrajectories: (viewState: import("../../types").ViewState, noInterpolate?: boolean | undefined) => void;
+        onStart?: ((realtimeLayer: any) => void) | undefined;
+        onStop?: ((realtimeLayer: any) => void) | undefined;
+        defineProperties(options: import("../../common/mixins/RealtimeLayerMixin").RealtimeLayerMixinOptions): void;
+        attachToMap(map: any): void;
+        detachFromMap(): void;
+        start(): void;
+        startUpdateTime(): void;
+        stop(): void;
+        stopUpdateTime(): void;
+        renderTrajectoriesInternal(viewState: import("../../types").ViewState, noInterpolate?: boolean): boolean;
+        renderTrajectories(viewState: import("../../types").ViewState | undefined, noInterpolate: boolean | undefined): void;
+        setBbox(extent?: [number, number, number, number] | undefined, zoom?: number | undefined): void;
+        getRefreshTimeInMs(zoom?: number | undefined): number;
+        getVehicle(filterFc: Function): GeoJSONFeature[];
+        getFeatureInfoAtCoordinate(coordinate: Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<{
+            layer: any;
+            features: Feature<import("ol/geom/Geometry").default>[];
+            coordinate: Coordinate;
+        }>;
+        getTrajectoryInfos(id: string): Promise<{
+            stopSequence: import("../../common/api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | import("../../common/api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            fullTrajectory: import("../../common/api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory> | import("../../common/api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+        }>;
+        purgeOutOfDateTrajectories(): void;
+        purgeTrajectory(trajectory: GeoJSONFeature, extent: [number, number, number, number], zoom: number): boolean;
+        addTrajectory(trajectory: GeoJSONFeature): void;
+        removeTrajectory(trajectoryOrId: any): void;
+        onZoomEnd(): void;
+        onDocumentVisibilityChange(): void;
+        onTrajectoryMessage(data: import("../../common/api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature>): void;
+        onDeleteTrajectoryMessage(data: import("../../common/api/WebSocketAPI").WebSocketAPIMessageEventData<string>): void;
+        onFeatureHover(features: Feature<import("ol/geom/Geometry").default>[], layer: import("../../types").AnyRealtimeLayer, coordinate: Coordinate): void;
+        onFeatureClick(features: Feature<import("ol/geom/Geometry").default>[], layer: import("../../types").AnyRealtimeLayer, coordinate: Coordinate): void;
+    };
+} & typeof Layer;
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/mapbox';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {RealtimeLayerInterface}
+ */
+declare class RealtimeLayer extends RealtimeLayer_base {
+    constructor(options?: {});
+    /**
+     * Initialize the layer.
+     *
+     * @param {mapboxgl.Map} map A [mapbox Map](https://docs.mapbox.com/mapbox-gl-js/api/map/).
+     * @param {string} beforeId Layer's id before which we want to add the new layer.
+     * @override
+     */
+    attachToMap(map: AnyMapboxMap, beforeId: string): void;
+    /**
+     * Remove listeners from the Mapbox Map.
+     */
+    detachFromMap(): void;
+    /**
+     * Start updating vehicles position.
+     *
+     * @listens {mapboxgl.map.event:zoomend} Listen to zoom end event.
+     * @listens {mapboxgl.map.event:mousemove} Listen to mousemove end.
+     * @override
+     */
+    start(): void;
+    /**
+     * Stop updating vehicles position, and unlisten events.
+     *
+     * @override
+     */
+    stop(): void;
+    onLoad(): void;
+    /**
+     * Function triggered when the user moves the cursor over the map.
+     * @override
+     */
+    onUserMoveCallback(evt: mapboxgl.MapLayerMouseEvent | maplibregl.MapMouseEvent): void;
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     */
+    renderTrajectories(noInterpolate?: boolean): void;
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    getRefreshTimeInMs(): number;
+    getFeatureInfoAtCoordinate(coordinate: Coordinate, options?: {}): Promise<LayerGetFeatureInfoResponse>;
+    onVisibilityChange(): void;
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    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;
+    /**
+     * Callback on 'move' event.
+     *
+     * @private
+     */
+    onMove(): void;
+    renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
+    /**
+     * Send the new BBOX to the websocket.
+     *
+     * @private
+     * @override
+     */
+    onMoveEnd(): void;
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureHover(features: Feature[], layer: RealtimeLayer, coordinate: Coordinate): void;
+}
+export default RealtimeLayer;
+//# sourceMappingURL=RealtimeLayer.d.ts.map

package/mapbox/layers/RealtimeLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RealtimeLayer.d.ts","sourceRoot":"","sources":["../../../src/mapbox/layers/RealtimeLayer.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAE7B,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,KAAK,EAAE,YAAY,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE7D;;;;;;;;;;;;;;;;GAgBG;AAEH,cAAM,aAAc,SAAQ,kBAAY;gBAC1B,OAAO,KAAK;IAqBxB;;;;;;OAMG;IAEH,WAAW,CAAC,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM;IAuC/C;;OAEG;IACH,aAAa;IAkBb;;;;;;OAMG;IACH,KAAK;IAQL;;;;OAIG;IACH,IAAI;IASJ,MAAM;IASN;;;OAGG;IACH,kBAAkB,CAChB,GAAG,EAAE,QAAQ,CAAC,kBAAkB,GAAG,UAAU,CAAC,aAAa;IAQ7D;;;;OAIG;IAEH,kBAAkB,CAAC,aAAa,CAAC,EAAE,OAAe;IAuDlD;;OAEG;IACH,kBAAkB;IAIlB,0BAA0B,CACxB,UAAU,EAAE,UAAU,EACtB,OAAO,KAAK,GACX,OAAO,CAAC,2BAA2B,CAAC;IAQvC,kBAAkB;IAclB;;;;OAIG;IACH,eAAe,CACb,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACxC,IAAI,EAAE,MAAM;IASd;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM;IAUhE;;;;OAIG;IACH,MAAM;IAIN,0BAA0B,CACxB,SAAS,EAAE,SAAS,EACpB,aAAa,GAAE,OAAe;IAahC;;;;;OAKG;IACH,SAAS;IAQT;;;;;OAKG;IACH,cAAc,CACZ,QAAQ,EAAE,OAAO,EAAE,EACnB,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,UAAU;CAOzB;AAED,eAAe,aAAa,CAAC"}

package/mapbox/layers/RealtimeLayer.js

@@ -0,0 +1,276 @@
+import { fromLonLat } from 'ol/proj';
+import { unByKey } from 'ol/Observable';
+import { getWidth, getHeight } from 'ol/extent';
+import transformRotate from '@turf/transform-rotate';
+import { point } from '@turf/helpers';
+import mixin from '../../common/mixins/RealtimeLayerMixin';
+import Layer from './Layer';
+import { getSourceCoordinates, getMercatorResolution } from '../utils';
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/mapbox';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {RealtimeLayerInterface}
+ */
+// @ts-ignore
+class RealtimeLayer extends mixin(Layer) {
+    constructor(options = {}) {
+        super(Object.assign({}, options));
+        /** @ignore */
+        this.onLoad = this.onLoad.bind(this);
+        /** @ignore */
+        this.onMove = this.onMove.bind(this);
+        /** @ignore */
+        this.onMoveEnd = this.onMoveEnd.bind(this);
+        /** @ignore */
+        this.onZoomEnd = this.onZoomEnd.bind(this);
+        /** @ignore */
+        this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    }
+    /**
+     * Initialize the layer.
+     *
+     * @param {mapboxgl.Map} map A [mapbox Map](https://docs.mapbox.com/mapbox-gl-js/api/map/).
+     * @param {string} beforeId Layer's id before which we want to add the new layer.
+     * @override
+     */
+    // @ts-ignore
+    attachToMap(map, beforeId) {
+        if (!map) {
+            return;
+        }
+        super.attachToMap(map);
+        this.source = {
+            type: 'canvas',
+            canvas: this.canvas,
+            coordinates: getSourceCoordinates(map, this.pixelRatio),
+            // 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: this.copyrights && this.copyrights.join(', '),
+        };
+        this.beforeId = beforeId;
+        this.layer = {
+            id: this.key,
+            type: 'raster',
+            source: this.key,
+            layout: {
+                visibility: this.visible ? 'visible' : 'none',
+            },
+            paint: {
+                'raster-opacity': 1,
+                'raster-fade-duration': 0,
+                'raster-resampling': 'nearest', // important otherwise it looks blurry
+            },
+        };
+        if (map.isStyleLoaded()) {
+            this.onLoad();
+        }
+        this.map.on('load', this.onLoad);
+        this.listeners = [this.on('change:visible', this.onVisibilityChange)];
+    }
+    /**
+     * Remove listeners from the Mapbox Map.
+     */
+    detachFromMap() {
+        if (this.map) {
+            this.map.off('load', this.onLoad);
+            // @ts-ignore
+            this.listeners.forEach((listener) => {
+                unByKey(listener);
+            });
+            if (this.map.style && this.map.getLayer(this.key)) {
+                this.map.removeLayer(this.key);
+            }
+            if (this.map.style && this.map.getSource(this.key)) {
+                this.map.removeSource(this.key);
+            }
+        }
+        super.detachFromMap();
+    }
+    /**
+     * Start updating vehicles position.
+     *
+     * @listens {mapboxgl.map.event:zoomend} Listen to zoom end event.
+     * @listens {mapboxgl.map.event:mousemove} Listen to mousemove end.
+     * @override
+     */
+    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, and unlisten events.
+     *
+     * @override
+     */
+    stop() {
+        super.stop();
+        if (this.map) {
+            this.map.off('move', this.onMove);
+            this.map.off('moveend', this.onMoveEnd);
+            this.map.off('zoomend', this.onZoomEnd);
+        }
+    }
+    onLoad() {
+        if (!this.map.getSource(this.key)) {
+            this.map.addSource(this.key, this.source);
+        }
+        if (!this.map.getLayer(this.key)) {
+            this.map.addLayer(this.layer, this.beforeId);
+        }
+    }
+    /**
+     * Function triggered when the user moves the cursor over the map.
+     * @override
+     */
+    onUserMoveCallback(evt) {
+        super.onUserMoveCallback(Object.assign({ coordinate: fromLonLat(evt.lngLat.toArray()) }, evt));
+    }
+    /**
+     * Render the trajectories using current map's size, resolution and rotation.
+     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * @overrides
+     */
+    // @ts-ignore
+    renderTrajectories(noInterpolate = false) {
+        if (!this.map) {
+            return;
+        }
+        if (!this.pixelRatio) {
+            this.pixelRatio = 1;
+        }
+        const { width, height } = this.map.getCanvas();
+        const center = this.map.getCenter();
+        // We use turf here to have good transform.
+        const leftBottom = this.map.unproject({
+            x: 0,
+            y: height / this.pixelRatio,
+        }); // southWest
+        const rightTop = this.map.unproject({
+            x: width / this.pixelRatio,
+            y: 0,
+        }); // north east
+        const coord0 = transformRotate(point([leftBottom.lng, leftBottom.lat]), -this.map.getBearing(), {
+            pivot: [center.lng, center.lat],
+        }).geometry.coordinates;
+        const coord1 = transformRotate(point([rightTop.lng, rightTop.lat]), -this.map.getBearing(), {
+            pivot: [center.lng, center.lat],
+        }).geometry.coordinates;
+        const bounds = [...fromLonLat(coord0), ...fromLonLat(coord1)];
+        const xResolution = getWidth(bounds) / (width / this.pixelRatio);
+        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],
+            center: fromLonLat([center.lng, center.lat]),
+            extent: bounds,
+            resolution: res,
+            zoom: this.getOlZoom(),
+            rotation: -(this.map.getBearing() * Math.PI) / 180,
+            pixelRatio: this.pixelRatio,
+        };
+        super.renderTrajectories(viewState, noInterpolate);
+    }
+    /**
+     * Return the delay in ms before the next rendering.
+     */
+    getRefreshTimeInMs() {
+        return super.getRefreshTimeInMs(this.map.getZoom());
+    }
+    getFeatureInfoAtCoordinate(coordinate, options = {}) {
+        const resolution = getMercatorResolution(this.map);
+        return super.getFeatureInfoAtCoordinate(coordinate, Object.assign({ resolution }, options));
+    }
+    onVisibilityChange() {
+        if (this.visible && !this.map.getLayer(this.key)) {
+            this.map.addLayer(this.layer, this.beforeId);
+        }
+        else if (this.map.getLayer(this.key)) {
+            this.map.removeLayer(this.key);
+        }
+        // We can't use setLayoutProperty it triggers an error probably a bug in mapbox
+        // this.map.setLayoutProperty(
+        //   this.key,
+        //   'visibilty',
+        //   this.visible ? 'visible' : 'none',
+        // );
+    }
+    /**
+     * Remove the trajectory form the list if necessary.
+     *
+     * @private
+     */
+    purgeTrajectory(trajectory, extent, zoom) {
+        return super.purgeTrajectory(trajectory, extent || this.getMercatorExtent(), zoom || Math.floor(this.getOlZoom()));
+    }
+    /**
+     * Send the current bbox to the websocket
+     */
+    setBbox(extent, zoom) {
+        let newExtent = extent;
+        let newZoom = zoom;
+        if (!newExtent && this.isUpdateBboxOnMoveEnd) {
+            newExtent = extent || this.getMercatorExtent();
+            newZoom = Math.floor(this.getOlZoom());
+        }
+        super.setBbox(newExtent, newZoom);
+    }
+    /**
+     * Callback on 'move' event.
+     *
+     * @private
+     */
+    onMove() {
+        this.renderTrajectories();
+    }
+    renderTrajectoriesInternal(viewState, noInterpolate = false) {
+        const render = super.renderTrajectoriesInternal(viewState, noInterpolate);
+        if (render && this.map.style) {
+            const extent = getSourceCoordinates(this.map, this.pixelRatio);
+            const source = this.map.getSource(this.key);
+            if (source) {
+                source.setCoordinates(extent);
+            }
+        }
+        return render;
+    }
+    /**
+     * Send the new BBOX to the websocket.
+     *
+     * @private
+     * @override
+     */
+    onMoveEnd() {
+        this.renderTrajectories();
+        if (this.visible && this.isUpdateBboxOnMoveEnd) {
+            this.setBbox();
+        }
+    }
+    /**
+     * Update the cursor style when hovering a vehicle.
+     *
+     * @private
+     * @override
+     */
+    onFeatureHover(features, layer, coordinate) {
+        super.onFeatureHover(features, layer, coordinate);
+        this.map.getCanvasContainer().style.cursor = features.length
+            ? 'pointer'
+            : 'auto';
+    }
+}
+export default RealtimeLayer;

package/mapbox/layers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Layer } from "./Layer";
+export { default as RealtimeLayer } from "./RealtimeLayer";
+//# sourceMappingURL=index.d.ts.map

package/mapbox/layers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/mapbox/layers/index.js"],"names":[],"mappings":""}

package/mapbox/layers/index.js

@@ -1,2 +1,2 @@
-export { default as Layer } from "./Layer";
-export { default as TralisLayer } from "./TralisLayer";
+export { default as Layer } from './Layer';
+export { default as RealtimeLayer } from './RealtimeLayer';

package/mapbox/utils/getMercatorResolution.d.ts

@@ -0,0 +1,9 @@
+import { AnyMapboxMap } from '../../types';
+/**
+ * Get the current resolution of a Mapbox map.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+declare const getMercatorResolution: (map: AnyMapboxMap) => number;
+export default getMercatorResolution;
+//# sourceMappingURL=getMercatorResolution.d.ts.map

package/mapbox/utils/getMercatorResolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMercatorResolution.d.ts","sourceRoot":"","sources":["../../../src/mapbox/utils/getMercatorResolution.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,QAAS,YAAY,WAS/C,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/mapbox/utils/getMercatorResolution.js

@@ -0,0 +1,18 @@
+import { getWidth, getHeight } from 'ol/extent';
+import { fromLonLat } from 'ol/proj';
+/**
+ * Get the current resolution of a Mapbox map.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+const getMercatorResolution = (map) => {
+    const bounds = map.getBounds().toArray();
+    const a = fromLonLat(bounds[0]);
+    const b = fromLonLat(bounds[1]);
+    const extent = [...a, ...b];
+    const { width, height } = map.getCanvas();
+    const xResolution = getWidth(extent) / width;
+    const yResolution = getHeight(extent) / height;
+    return Math.max(xResolution, yResolution);
+};
+export default getMercatorResolution;

package/mapbox/utils/getSourceCoordinates.d.ts

@@ -0,0 +1,9 @@
+import { AnyMapboxMap } from '../../types';
+/**
+ * Get the canvas source coordinates of the current map's extent.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+export declare const getSourceCoordinates: (map: AnyMapboxMap, pixelRatio?: number) => number[][];
+export default getSourceCoordinates;
+//# sourceMappingURL=getSourceCoordinates.d.ts.map