mobility-toolbox-js 3.0.0-beta.1 → 3.0.0-beta.10

package/ol/layers/MaplibreStyleLayer.d.ts

@@ -0,0 +1,235 @@
+import { Feature, Map } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { ObjectEvent } from 'ol/Object';
+import { Layer } from 'ol/layer';
+import { Source } from 'ol/source';
+import { LayerGetFeatureInfoResponse } from '../../types';
+import { FilterFunction } from '../../common/typedefs';
+import MaplibreLayer, { MaplibreLayerOptions } from './MaplibreLayer';
+import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
+export type MaplibreStyleLayerOptions = MaplibreLayerOptions & {
+    beforeId?: string;
+    maplibreLayer?: MaplibreLayer;
+    layers?: maplibregl.AddLayerObject[];
+    layersFilter?: FilterFunction;
+    queryRenderedLayersFilter?: FilterFunction;
+};
+declare const MaplibreStyleLayer_base: {
+    new (...args: any[]): {
+        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions | undefined;
+        olListenersKeys: import("ol/events").EventsKey[];
+        children: Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        get copyrights(): string;
+        set copyrights(newCopyrights: string | string[]);
+        disabled: boolean;
+        readonly group: string;
+        readonly hitTolerance: boolean;
+        readonly key: string;
+        readonly map: Map;
+        readonly name: string;
+        olLayer: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        parent: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        visible: boolean;
+        setMapInternal: ((map: Map) => void) & ((map: Map | null) => void);
+        onChildrenChange(oldValue: Layer<Source, import("ol/renderer/Layer").default<any>>[]): void;
+        attachToMap(map: Map): void;
+        detachFromMap(): void;
+        flat(): any[];
+        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
+        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        un: import("ol/layer/Layer").LayerOnSignature<void>;
+        getSource: () => Source | null;
+        getRenderSource: () => Source | null;
+        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<import("ol/Feature").FeatureLike[]>;
+        getData: (pixel: import("ol/pixel").Pixel) => Float32Array | Uint8ClampedArray | Uint8Array | DataView | null;
+        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
+        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => string[];
+        unrender: () => void;
+        getDeclutter: () => string;
+        renderDeclutter: (frameState: import("ol/Map").FrameState, layerState: import("ol/layer/Layer").State) => void;
+        renderDeferred: (frameState: import("ol/Map").FrameState) => void;
+        getMapInternal: () => Map | null;
+        setMap: (map: Map | null) => void;
+        setSource: (source: Source | null) => void;
+        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
+        hasRenderer: () => boolean;
+        getBackground: () => false | import("ol/layer/Base").BackgroundColor;
+        getClassName: () => string;
+        getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
+        getLayersArray: (array?: Layer<Source, import("ol/renderer/Layer").default<any>>[] | undefined) => Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => import("ol/layer/Layer").State[];
+        getExtent: () => import("ol/extent").Extent | undefined;
+        getMaxResolution: () => number;
+        getMinResolution: () => number;
+        getMinZoom: () => number;
+        getMaxZoom: () => number;
+        getOpacity: () => number;
+        getSourceState: () => import("ol/source/Source").State;
+        getVisible: () => boolean;
+        getZIndex: () => number | undefined;
+        setBackground: (background?: import("ol/layer/Base").BackgroundColor | undefined) => void;
+        setExtent: (extent: import("ol/extent").Extent | undefined) => void;
+        setMaxResolution: (maxResolution: number) => void;
+        setMinResolution: (minResolution: number) => void;
+        setMaxZoom: (maxZoom: number) => void;
+        setMinZoom: (minZoom: number) => void;
+        setOpacity: (opacity: number) => void;
+        setVisible: (visible: boolean) => void;
+        setZIndex: (zindex: number) => void;
+        get: (key: string) => any;
+        getKeys: () => string[];
+        getProperties: () => {
+            [x: string]: any;
+        };
+        getPropertiesInternal: () => {
+            [x: string]: any;
+        } | null;
+        hasProperties: () => boolean;
+        notify: (key: string, oldValue: any) => void;
+        addChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        removeChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        set: (key: string, value: any, silent?: boolean | undefined) => void;
+        setProperties: (values: {
+            [x: string]: any;
+        }, silent?: boolean | undefined) => void;
+        unset: (key: string, silent?: boolean | undefined) => void;
+        changed: () => void;
+        getRevision: () => number;
+        dispatchEvent: (event: string | import("ol/events/Event").default) => boolean | undefined;
+        getListeners: (type: string) => import("ol/events").Listener[] | undefined;
+        hasListener: (type?: string | undefined) => boolean;
+        dispose: () => void;
+    };
+} & typeof Layer;
+/**
+ * Layer for visualizing a specific set of layer from a MapboxLayer.
+ *
+ * @example
+ * import { MapboxLayer, MapboxStyleLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const maplibreLayer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json?key=[yourApiKey]',
+ * });
+ *
+ * const layer = new MapboxStyleLayer({
+ *   maplibreLayer: maplibreLayer,
+ *   styleLayersFilter: () => {},
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {ol/layer/Layer~Layer}
+ */
+declare class MaplibreStyleLayer extends MaplibreStyleLayer_base {
+    highlightedFeatures: Feature[];
+    selectedFeatures: Feature[];
+    get beforeId(): string;
+    set beforeId(newValue: string[]);
+    get layers(): maplibregl.AddLayerObject[];
+    set layers(newValue: maplibregl.AddLayerObject[]);
+    get layersFilter(): (layer: maplibregl.LayerSpecification) => boolean;
+    set layersFilter(newValue: (layer: maplibregl.LayerSpecification) => boolean);
+    get mapboxLayer(): MaplibreLayer | undefined;
+    get maplibreLayer(): MaplibreLayer;
+    set maplibreLayer(newValue: MaplibreLayer);
+    get queryRenderedLayersFilter(): (layer: maplibregl.LayerSpecification) => boolean;
+    set queryRenderedLayersFilter(newValue: (layer: maplibregl.LayerSpecification) => boolean);
+    get sources(): {
+        [key: string]: maplibregl.SourceSpecification;
+    };
+    set sources(newValue: {
+        [key: string]: maplibregl.SourceSpecification;
+    });
+    /**
+     * @deprecated
+     */
+    get styleLayer(): maplibregl.AddLayerObject;
+    /**
+     * @deprecated
+     */
+    set styleLayer(newValue: maplibregl.AddLayerObject);
+    /**
+     * @deprecated
+     */
+    get styleLayers(): maplibregl.AddLayerObject[];
+    /**
+     * @deprecated
+     */
+    set styleLayers(newValue: maplibregl.AddLayerObject[]);
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {MapboxLayer} [options.maplibreLayer] The MaplibreLayer to use.
+     * @param {maplibregl.SourceSpecification[]} [options.sources] The source to add to the style on load.
+     * @param {maplibregl.AddLayerObject[]} [options.layers] The layers to add to the style on load.
+     * @param {FilterFunction} [options.layersFilter] Filter function to decide which style layer to apply visiblity on. If not provided, the 'layers' property is used.
+     * @param {FilterFunction} [options.queryRenderedLayersFilter] Filter function to decide which style layer are available for query.
+     */
+    constructor(options: MaplibreStyleLayerOptions);
+    createRenderer(): MaplibreStyleLayerRenderer;
+    /**
+     * Initialize the layer.
+     * @param {ol/Map~Map} map the Maplibre map.
+     * @override
+     */
+    attachToMap(map: Map): void;
+    /**
+     * Terminate the layer.
+     * @override
+     */
+    detachFromMap(): void;
+    /** @private */
+    addSources(): void;
+    /** @private */
+    removeSources(): void;
+    /** @private */
+    addLayers(): void;
+    /** @private */
+    removeLayers(): void;
+    /**
+     * On Maplibre map load callback function. Add style layers and dynaimc filters.
+     * @private
+     */
+    onLoad(): void;
+    /**
+     * Request feature information for a given coordinate.
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
+     * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+     */
+    getFeatureInfoAtCoordinate(coordinate: Coordinate): Promise<LayerGetFeatureInfoResponse>;
+    /**
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
+     * @private
+     */
+    setHoverState(features: Feature[], state: boolean): void;
+    /**
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * @private
+     */
+    select(features?: Feature[]): void;
+    /**
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
+     * @private
+     */
+    highlight(features?: Feature[]): void;
+    /**
+     * Apply visibility to style layers that fits the styleLayersFilter function.
+     *
+     * @private
+     */
+    applyLayoutVisibility(evt?: ObjectEvent): void;
+    /**
+     * Create a copy of the MapboxStyleLayer.
+     * @param {Object} newOptions Options to override.
+     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     */
+    clone(newOptions: MaplibreStyleLayerOptions): MaplibreStyleLayer;
+}
+export default MaplibreStyleLayer;

package/ol/layers/MaplibreStyleLayer.js

@@ -135,35 +135,37 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         if (!this.map || !this.maplibreLayer) {
             return;
         }
-        // Apply the initial visibiltity.
-        const { maplibreMap } = this.maplibreLayer;
-        if (!maplibreMap) {
-            // If the maplibreMap is not yet created because the  map has no target yet, we
+        if (!this.map.getTargetElement()) {
+            // If ther e is no target element the maplibreMap is not yet created, we
             // relaunch the initialisation when it's the case.
             this.olListenersKeys.push(this.map.on('change:target', () => {
                 this.attachToMap(map);
             }));
             return;
         }
-        // maplibreMap.loaded() and maplibreMap.isStyleLoaded() are reliable only on the first call of init.
-        // On the next call (when a topic change for example), these functions returns false because
-        // the style is being modified.
-        // That's why we rely on a property instead for the next calls.
-        if (maplibreMap.loaded()) {
-            this.onLoad();
-        }
-        else {
-            maplibreMap.once('load', this.onLoad);
+        // Apply the initial visibility if possible otherwise we wait for the load event of the layer
+        const { maplibreMap } = this.maplibreLayer;
+        if (maplibreMap) {
+            // maplibreMap.loaded() and maplibreMap.isStyleLoaded() are reliable only on the first call of init.
+            // On the next call (when a topic change for example), these functions returns false because
+            // the style is being modified.
+            // That's why we rely on a property instead for the next calls.
+            if (maplibreMap.loaded()) {
+                this.onLoad();
+            }
+            else {
+                maplibreMap.once('load', this.onLoad);
+            }
         }
         // Apply the visibiltity when layer's visibility change.
-        this.olListenersKeys.push(this.on('change:visible', (evt) => {
+        this.olListenersKeys.push(
+        // @ts-expect-error 'load' is a custom event
+        this.maplibreLayer.on('load', this.onLoad.bind(this)), this.on('change:visible', (evt) => {
             // Once the map is loaded we can apply visiblity without waiting
             // the style. Maplibre take care of the application of style changes.
             this.applyLayoutVisibility(evt);
-        }), 
-        // @ts-expect-error 'load' is a custom event form mobility-toolbox-js
-        this.maplibreLayer.on('load', this.onLoad), this.on('propertychange', (evt) => {
-            if (/(sources|layers|layersFilter|maplibreLayer|beforeId|)/.test(evt.key)) {
+        }), this.on('propertychange', (evt) => {
+            if (/(sources|layers|layersFilter|maplibreLayer|beforeId)/.test(evt.key)) {
                 this.detachFromMap();
                 this.attachToMap(map);
             }
@@ -185,13 +187,12 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /** @private */
     addSources() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !Array.isArray(this.sources)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !this.sources) {
             return;
         }
         const { maplibreMap } = this.maplibreLayer;
         if (maplibreMap) {
-            this.sources.forEach((source) => {
-                const { id } = source;
+            Object.entries(this.sources).forEach(([id, source]) => {
                 if (!maplibreMap.getSource(id)) {
                     maplibreMap.addSource(id, source);
                 }
@@ -201,13 +202,12 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /** @private */
     removeSources() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !Array.isArray(this.layers)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !this.sources) {
             return;
         }
         const { maplibreMap } = this.maplibreLayer;
         if (maplibreMap) {
-            this.sources.forEach((source) => {
-                const { id } = source;
+            Object.keys(this.sources).forEach((id) => {
                 if (maplibreMap.getSource(id)) {
                     maplibreMap.removeSource(id);
                 }

package/ol/layers/RealtimeLayer.d.ts

@@ -0,0 +1,285 @@
+import GeoJSON from 'ol/format/GeoJSON';
+import Source from 'ol/source/Source';
+import Feature, { FeatureLike } from 'ol/Feature';
+import { Map, MapEvent } from 'ol';
+import { ObjectEvent } from 'ol/Object';
+import Layer from 'ol/layer/Layer';
+import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
+import { RealtimeFullTrajectory, RealtimeTrainId, ViewState } from '../../types';
+import { RealtimeTrajectory } from '../../api/typedefs';
+import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
+import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
+export type RealtimeLayerOptions = RealtimeLayerMixinOptions & {
+    fullTrajectoryStyle?: (feature: FeatureLike, resolution: number, options: any) => void;
+    allowRenderWhenAnimating?: boolean;
+};
+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("..").RealtimeAPI;
+        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: GeoJSON<typeof Feature>;
+        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: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            fullTrajectory: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | 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: WebSocketAPIMessageEventData<GeoJSONFeature>): void;
+        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<string>): void;
+        highlightVehicle(id: string): void;
+        selectVehicle(id: string): void;
+    };
+} & {
+    new (...args: any[]): {
+        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions | undefined;
+        olListenersKeys: import("ol/events").EventsKey[];
+        children: Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        get copyrights(): string;
+        set copyrights(newCopyrights: string | string[]);
+        disabled: boolean;
+        readonly group: string;
+        readonly hitTolerance: boolean;
+        readonly key: string;
+        readonly map: Map;
+        readonly name: string;
+        olLayer: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        parent: Layer<Source, import("ol/renderer/Layer").default<any>>;
+        visible: boolean;
+        setMapInternal: ((map: Map) => void) & ((map: Map | null) => void);
+        onChildrenChange(oldValue: Layer<Source, import("ol/renderer/Layer").default<any>>[]): void;
+        attachToMap(map: Map): void;
+        detachFromMap(): void;
+        flat(): any[];
+        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
+        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
+        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
+        un: import("ol/layer/Layer").LayerOnSignature<void>;
+        getSource: () => Source | null;
+        getRenderSource: () => Source | null;
+        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<FeatureLike[]>;
+        getData: (pixel: import("ol/pixel").Pixel) => Float32Array | Uint8ClampedArray | Uint8Array | DataView | null;
+        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
+        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => string[];
+        unrender: () => void;
+        getDeclutter: () => string;
+        renderDeclutter: (frameState: import("ol/Map").FrameState, layerState: import("ol/layer/Layer").State) => void;
+        renderDeferred: (frameState: import("ol/Map").FrameState) => void;
+        getMapInternal: () => Map | null;
+        setMap: (map: Map | null) => void;
+        setSource: (source: Source | null) => void;
+        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
+        hasRenderer: () => boolean;
+        getBackground: () => false | import("ol/layer/Base").BackgroundColor;
+        getClassName: () => string;
+        getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
+        getLayersArray: (array?: Layer<Source, import("ol/renderer/Layer").default<any>>[] | undefined) => Layer<Source, import("ol/renderer/Layer").default<any>>[];
+        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => import("ol/layer/Layer").State[];
+        getExtent: () => import("ol/extent").Extent | undefined;
+        getMaxResolution: () => number;
+        getMinResolution: () => number;
+        getMinZoom: () => number;
+        getMaxZoom: () => number;
+        getOpacity: () => number;
+        getSourceState: () => import("ol/source/Source").State;
+        getVisible: () => boolean;
+        getZIndex: () => number | undefined;
+        setBackground: (background?: import("ol/layer/Base").BackgroundColor | undefined) => void;
+        setExtent: (extent: import("ol/extent").Extent | undefined) => void;
+        setMaxResolution: (maxResolution: number) => void;
+        setMinResolution: (minResolution: number) => void;
+        setMaxZoom: (maxZoom: number) => void;
+        setMinZoom: (minZoom: number) => void;
+        setOpacity: (opacity: number) => void;
+        setVisible: (visible: boolean) => void;
+        setZIndex: (zindex: number) => void;
+        get: (key: string) => any;
+        getKeys: () => string[];
+        getProperties: () => {
+            [x: string]: any;
+        };
+        getPropertiesInternal: () => {
+            [x: string]: any;
+        } | null;
+        hasProperties: () => boolean;
+        notify: (key: string, oldValue: any) => void;
+        addChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        removeChangeListener: (key: string, listener: import("ol/events").Listener) => void;
+        set: (key: string, value: any, silent?: boolean | undefined) => void;
+        setProperties: (values: {
+            [x: string]: any;
+        }, silent?: boolean | undefined) => void;
+        unset: (key: string, silent?: boolean | undefined) => void;
+        changed: () => void;
+        getRevision: () => number;
+        dispatchEvent: (event: string | import("ol/events/Event").default) => boolean | undefined;
+        getListeners: (type: string) => import("ol/events").Listener[] | undefined;
+        hasListener: (type?: string | undefined) => boolean;
+        dispose: () => void;
+    };
+} & typeof Layer;
+/**
+ * Responsible for loading and display data from the geOps realtime API.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new RealtimeLayer({
+ *   apiKey: "yourApiKey"
+ *   // allowRenderWhenAnimating: false,
+ *   // url: "wss://api.geops.io/tracker-ws/v1/",
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {ol/layer/Layer~Layer}
+ *
+ * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
+ * @public
+ */
+declare class RealtimeLayer extends RealtimeLayer_base {
+    /** @private */
+    allowRenderWhenAnimating?: boolean;
+    /**
+     * Constructor.
+     *
+     * @param {RealtimeLayerOptions} options
+     * @param {boolean} [options.allowRenderWhenAnimating=false] Allow rendering of the layer when the map is animating.
+     * @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.
+     *
+     */
+    constructor(options: RealtimeLayerOptions);
+    /**
+     * @private
+     */
+    createRenderer(): RealtimeLayerRenderer;
+    /** @private */
+    attachToMap(map: Map): void;
+    /**
+     * Destroy the container of the tracker.
+     * @private
+     */
+    detachFromMap(): 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
+     * @private
+     */
+    renderTrajectories(noInterpolate: boolean): void;
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     * @override
+     */
+    renderTrajectoriesInternal(viewState: ViewState, noInterpolate: boolean): boolean;
+    /**
+     * Return the delay in ms before the next rendering.
+     * @private
+     */
+    getRefreshTimeInMs(): number;
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    onMoveEnd(evt: MapEvent | ObjectEvent): void;
+    /**
+     * Function called on moveend event only when the zoom has changed.
+     *
+     * @param {ol/MapEvent~MapEvent} evt Moveend event.
+     * @private
+     * @override
+     */
+    onZoomEnd(): void;
+    highlight(feature: Feature): void;
+    select(feature: Feature): 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
+     *
+     * @private
+     */
+    setBbox(extent?: [number, number, number, number], zoom?: number): void;
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory(id: RealtimeTrainId): Promise<Feature[] | undefined>;
+    /**
+     * Create a copy of the RealtimeLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RealtimeLayer} A RealtimeLayer
+     */
+    clone(newOptions: RealtimeLayerOptions): RealtimeLayer;
+}
+export default RealtimeLayer;

package/ol/layers/RealtimeLayer.js

@@ -11,7 +11,7 @@ import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
 /** @private */
 const format = new GeoJSON();
 /**
- * Responsible for loading and display data from the geOps Realtime API.
+ * Responsible for loading and display data from the geOps realtime API.
  *
  * @example
  * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
@@ -38,7 +38,7 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @param {RealtimeLayerOptions} options
      * @param {boolean} [options.allowRenderWhenAnimating=false] Allow rendering of the layer when the map is animating.
      * @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 {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps realtime API url.
      *
      */
     constructor(options) {
@@ -86,9 +86,12 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             if (this.visible) {
                 this.start();
             }
+            // @ts-expect-error - bad ts check RealtimeLayer is a BaseLayer
             const index = this.map.getLayers().getArray().indexOf(this);
             this.map.getLayers().insertAt(index, this.vectorLayer);
-            this.olListenersKeys.push(...this.map.on(['moveend', 'change:target'], (evt) => {
+            this.olListenersKeys.push(...this.map.on(['moveend', 'change:target'], 
+            // @ts-expect-error - bad ol definitions
+            (evt) => {
                 const view = (evt.map || evt.target).getView();
                 if (view.getAnimating() || view.getInteracting()) {
                     return;
@@ -174,8 +177,10 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
         if (isRendered) {
             /** @private */
             this.renderedViewState = Object.assign({}, viewState);
-            if (this.getRenderer().container) {
-                this.getRenderer().container.style.transform = '';
+            // @ts-expect-error - we are in the same class
+            const { container } = this.getRenderer();
+            if (container) {
+                container.style.transform = '';
             }
         }
         return isRendered;
@@ -266,7 +271,7 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             // it will trigger a js error on calculateExtent function.
             return false;
         }
-        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom() || 0);
     }
     /**
      * Send the current bbox to the websocket
@@ -274,7 +279,8 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @private
      */
     setBbox(extent, zoom) {
-        super.setBbox(extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+        super.setBbox(extent ||
+            this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom() || 0);
     }
     /**
      * Highlight the trajectory of journey.