mobility-toolbox-js 3.0.0-beta.9 → 3.0.0

package/common/utils/getVehiclePosition.js

@@ -9,14 +9,17 @@ import { LineString } from 'ol/geom';
  * @private
  */
 const getVehiclePosition = (now, trajectory, noInterpolate) => {
-    const { time_intervals: timeIntervals, olGeometry, coordinate, } = trajectory.properties;
-    const { coordinates } = trajectory.geometry;
-    let { type } = trajectory.geometry;
+    const { coordinate, 
+    // @ts-expect-error  olGeometry is added by the RealtimeLayer
+    olGeometry, time_intervals: timeIntervals, } = trajectory.properties;
+    let { coordinates, type } = trajectory.geometry;
     let geometry = olGeometry;
     let coord;
     let rotation;
+    // If an olGeometry exists we use it. It avoids to create one each time.
     if (olGeometry) {
         type = geometry.getType();
+        coordinates = geometry.getCoordinates();
     }
     if (noInterpolate && coordinate) {
         coord = coordinate;

package/common/utils/realtimeConfig.d.ts

@@ -57,7 +57,7 @@ export declare const getTextSize: (ctx: AnyCanvasContext, markerSize: number, te
  * @param {boolean} cancelled true if the journey is cancelled.
  * @param {boolean} isDelayText true if the color is used for delay text of the symbol.
  */
-export declare const getDelayColor: (delayInMs: number | null, cancelled?: boolean, isDelayText?: boolean) => string;
+export declare const getDelayColor: (delayInMs: null | number, cancelled?: boolean, isDelayText?: boolean) => string;
 /**
  * @private
  */

package/common/utils/realtimeConfig.js

@@ -1,4 +1,3 @@
-/** @private */
 const radiusMapping = [
     [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
     [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],

package/common/utils/renderTrajectories.d.ts

@@ -1,10 +1,11 @@
 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.
+ * @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

@@ -1,11 +1,12 @@
-import { compose, apply, create } from 'ol/transform';
+import { apply, compose, 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.
+ * @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
@@ -17,13 +18,13 @@ const renderTrajectories = (canvas, trajectories, style, viewState, options) =>
     if (!canvas) {
         return { renderedTrajectories: [] };
     }
-    const { time = Date.now(), size = [], center, resolution, rotation = 0, pixelRatio = 1, } = viewState;
+    const { center, pixelRatio = 1, resolution, rotation = 0, size = [], time = Date.now(), } = viewState;
     if (!resolution || !center) {
         return { renderedTrajectories: [] };
     }
-    const { noInterpolate = false, hoverVehicleId, selectedVehicleId, filter, getScreenPixel = (pixel, viewStat) => (viewStat.zoom || 0) < 12
+    const { filter, getScreenPixel = (pixel, viewStat) => (viewStat.zoom || 0) < 12
         ? pixel.map((coord) => Math.floor(coord))
-        : pixel, } = options;
+        : pixel, hoverVehicleId, noInterpolate = false, selectedVehicleId, } = options;
     const context = canvas.getContext('2d');
     context === null || context === void 0 ? void 0 : context.clearRect(0, 0, canvas.width, canvas.height);
     const [width, height] = size;
@@ -49,7 +50,7 @@ const renderTrajectories = (canvas, trajectories, style, viewState, options) =>
             continue;
         }
         // We simplify the trajectory object
-        const { train_id: id, timeOffset } = trajectory.properties;
+        const { timeOffset, train_id: id } = trajectory.properties;
         // We set the rotation and the timeFraction of the trajectory (used by tralis).
         // if rotation === null that seems there is no rotation available.
         const { coord, rotation: rotationIcon } = getVehiclePosition(time - (timeOffset || 0), trajectory, noInterpolate);

package/common/utils/sortAndFilterDepartures.d.ts

@@ -8,7 +8,8 @@ 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.
+ * @param {number} [maxDepartureAge=30] The maximum departure age in minutes.
+ * @return {RealtimeDeparture[]} Return departures array.
  * @private
  */
 declare const sortAndfilterDepartures: (depObject: RealtimeAPIDeparturesById, sortByMinArrivalTime?: boolean, maxDepartureAge?: number) => RealtimeDepartureExtended[];

package/common/utils/sortAndFilterDepartures.js

@@ -7,7 +7,8 @@ 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.
+ * @param {number} [maxDepartureAge=30] The maximum departure age in minutes.
+ * @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-expect-error
     if (props1.cancelled && !props2.cancelled) {
+        // @ts-expect-error
         return props2.delay < 180000 ? -1 : 1;
     }
+    // @ts-expect-error
     if (props2.cancelled && !props1.cancelled) {
+        // @ts-expect-error
         return props1.delay < 180000 ? 1 : -1;
     }
+    // @ts-expect-error
     return props2.delay - props1.delay;
 };
 export default sortByDelay;

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.
  *
@@ -11,7 +12,7 @@ export type LayerOptions = {
  *
  * const layer = new Layer({ id:'MyLayer' });
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
  * @private
  */
@@ -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.
  *
@@ -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
  */
@@ -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,122 +1,110 @@
-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;
-        debug: boolean;
-        trajectories?: {
-            [key: string]: GeoJSONFeature;
-        } | undefined;
-        canvas?: import("../../types").AnyCanvas | undefined;
-        mode: import("../../types").RealtimeMode;
-        api: import("../../api/RealtimeAPI").default;
-        tenant: string;
-        bboxParameters?: {
-            [index: string]: string | number | boolean | string[] | number[] | boolean[];
-        } | undefined;
-        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<typeof import("ol/Feature").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: ViewState, noInterpolate?: boolean | undefined) => void;
-        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean | undefined) => void;
-        onStart?: ((realtimeLayer: any) => void) | undefined;
-        onStop?: ((realtimeLayer: any) => void) | undefined;
-        defineProperties(options: RealtimeLayerMixinOptions): void;
-        attachToMap(map: any): void;
-        detachFromMap(): void;
-        start(): void;
-        startUpdateTime(): void;
-        stop(): void;
-        stopUpdateTime(): void;
-        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
-        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[];
-        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[]>;
-        }>;
-        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("../../api/WebSocketAPI").WebSocketAPIMessageEventData<GeoJSONFeature>): void;
-        onDeleteTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<string>): void;
-        highlightVehicle(id: string): void;
-        selectVehicle(id: string): void;
-    };
-} & typeof Layer;
+import type { AnyCanvas, AnyMapGlMap } from '../../types';
+export type RealtimeLayerOptions = LayerOptions & RealtimeEngineOptions;
 /**
- * Responsible for loading and display data from a geOps realtime API.
+ * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
- * import { RealtimeLayer } from 'mobility-toolbox-js/Maplibre';
+ * 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>MapLibre Realtime layer example</a>
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
+ * @classproperty {function} filter - Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+ * @classproperty {RealtimeMode} mode - The realtime mode to use.
+ * @classproperty {RealtimeMot[]} mots - Filter trains by its mode of transportation. It filters trains on backend side.
+ * @classproperty {RealtimeTenant} tenant - Filter trains by its tenant. It filters trains on backend side.
+ * @classproperty {function} sort - Sort trains. This function must be fast, it is executed on every render frame.
+ * @classproperty {function} style - Function to style the vehicles.
+ s
  * @public
  */
-declare class RealtimeLayer extends RealtimeLayer_base {
+declare class RealtimeLayer extends Layer {
+    #private;
+    engine: RealtimeEngine;
+    layer: LayerSpecification;
+    source: CanvasSourceSpecification;
+    sourceId: string;
     /**
      * Constructor.
      *
      * @param {RealtimeLayerOptions} options
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps realtime API url.
-     *
+     * @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 vehicles.
+     * @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.
      *
@@ -129,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;