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

package/ol/layers/RealtimeLayer.js

@@ -4,11 +4,10 @@ import { Vector as VectorLayer } from 'ol/layer';
 import Layer from 'ol/layer/Layer';
 import { Vector as VectorSource } from 'ol/source';
 import Source from 'ol/source/Source';
-import RealtimeLayerMixin from '../../common/mixins/RealtimeLayerMixin';
+import RealtimeEngine from '../../common/utils/RealtimeEngine';
 import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
 import { fullTrajectoryStyle } from '../styles';
-/** @private */
 const format = new GeoJSON();
 /**
  * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
@@ -24,63 +23,53 @@ const format = new GeoJSON();
  *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ * @see <a href="/example/ol-realtime">OpenLayers Realtime layer example</a>
+ *
  *
  * @extends {ol/layer/Layer~Layer}
  *
+ *
  * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
  * @public
  */
-// @ts-expect-error
-class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
+class RealtimeLayer extends MobilityLayerMixin(Layer) {
     /**
      * 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.
-     *
+     * @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](https://developer.geops.io/apis/realtime/) url.
+     * @public
      */
     constructor(options) {
         // We use a group to be able to add custom vector layer in extended class.
         // For example TrajservLayer use a vectorLayer to display the complete trajectory.
         super(Object.assign({ source: new Source({}) }, options));
-        /** @private */
         this.allowRenderWhenAnimating = false;
-        /** @private */
+        this.maxNbFeaturesRequested = 100;
+        this.engine = new RealtimeEngine(Object.assign({ getViewState: this.getViewState.bind(this), onRender: this.onRealtimeEngineRender.bind(this) }, options));
         this.allowRenderWhenAnimating = !!options.allowRenderWhenAnimating;
         // We store the layer used to highlight the full Trajectory
-        /** @private */
         this.vectorLayer = new VectorLayer({
             source: new VectorSource({ features: [] }),
             style: (feature, resolution) => {
-                return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.styleOptions);
+                return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.engine.styleOptions);
             },
             updateWhileAnimating: this.allowRenderWhenAnimating,
             updateWhileInteracting: true,
         });
-        // Options the last render run did happen. If something changes
-        // we have to render again
-        /** @private */
-        this.renderState = {
-            center: [0, 0],
-            rotation: 0,
-            zoom: undefined,
-        };
-        /** @private */
         this.onZoomEndDebounced = debounce(this.onZoomEnd, 100);
-        /** @private */
         this.onMoveEndDebounced = debounce(this.onMoveEnd, 100);
     }
-    /** @private */
     attachToMap(map) {
         super.attachToMap(map);
+        this.engine.attachToMap();
         if (this.map) {
             // If the layer is visible we start  the rendering clock
             if (this.getVisible()) {
-                this.start();
+                this.engine.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.olEventsKeys.push(...this.map.on(['moveend', 'change:target'], 
@@ -95,15 +84,14 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
                 if (this.currentZoom !== zoom) {
                     this.onZoomEndDebounced(evt);
                 }
-                /** @private */
                 this.currentZoom = zoom;
                 this.onMoveEndDebounced(evt);
             }), this.on('change:visible', (evt) => {
                 if (evt.target.getVisible()) {
-                    this.start();
+                    this.engine.start();
                 }
                 else {
-                    this.stop();
+                    this.engine.stop();
                 }
             }), this.on('propertychange', (evt) => {
                 // We apply every property change event related to visiblity to the vectorlayer
@@ -115,53 +103,74 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
     }
     /**
      * Create a copy of the RealtimeLayer.
-     * @param {Object} newOptions Options to override
+     *
+     * @param {Object} newOptions Options to override. See constructor.
      * @return {RealtimeLayer} A RealtimeLayer
+     * @public
      */
     clone(newOptions) {
         return new RealtimeLayer(Object.assign(Object.assign({}, this.options), newOptions));
     }
-    /**
-     * @private
-     */
     createRenderer() {
         return new RealtimeLayerRenderer(this);
     }
-    /**
-     * 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
-     */
     /**
      * Destroy the container of the tracker.
-     * @private
      */
     detachFromMap() {
         var _a;
         (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
+        this.engine.detachFromMap();
         super.detachFromMap();
     }
     /**
-     * Return the delay in ms before the next rendering.
-     * @private
+     * Get some informations about a trajectory.
+     *
+     * @param {RealtimeTrainId} id A vehicle's id.
+     * @returns
      */
-    getRefreshTimeInMs() {
+    getTrajectoryInfos(id) {
+        var _a, _b;
+        // When a vehicle is selected, we request the complete stop sequence and the complete full trajectory.
+        // Then we combine them in one response and send them to inherited layers.
+        const promises = [
+            this.engine.api.getStopSequence(id),
+            this.engine.api.getFullTrajectory(id, this.engine.mode, this.engine.getGeneralizationLevelByZoom(Math.floor(((_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.getZoom()) || 0))),
+        ];
+        return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+            const response = {
+                fullTrajectory,
+                stopSequence,
+            };
+            return response;
+        });
+    }
+    getViewState() {
         var _a;
-        return super.getRefreshTimeInMs(((_a = this.map.getView()) === null || _a === void 0 ? void 0 : _a.getZoom()) || 0);
+        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView())) {
+            return {};
+        }
+        const view = this.map.getView();
+        return {
+            center: view.getCenter(),
+            extent: view.calculateExtent(),
+            pixelRatio: this.engine.pixelRatio,
+            resolution: view.getResolution(),
+            rotation: view.getRotation(),
+            size: this.map.getSize(),
+            visible: this.getVisible(),
+            zoom: view.getZoom(),
+        };
     }
     highlight(feature) {
-        this.highlightVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
+        const id = feature === null || feature === void 0 ? void 0 : feature.get('train_id');
+        if (this.hoverVehicleId !== id) {
+            this.hoverVehicleId = id;
+            this.engine.renderTrajectories(true);
+        }
     }
-    /**
-     * On move end we update the websocket with the new bbox.
-     *
-     * @private
-     * @override
-     */
     /**
      * Highlight the trajectory of journey.
-     * @private
      */
     highlightTrajectory(id) {
         var _a, _b, _c, _d;
@@ -169,8 +178,8 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             (_b = (_a = this.vectorLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear(true);
             return Promise.resolve([]);
         }
-        return this.api
-            .getFullTrajectory(id, this.mode, this.getGeneralizationLevelByZoom(Math.floor(((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0)))
+        return this.engine.api
+            .getFullTrajectory(id, this.engine.mode, this.engine.getGeneralizationLevelByZoom(Math.floor(((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0)))
             .then((data) => {
             var _a, _b, _c, _d, _e;
             const fullTrajectory = data.content;
@@ -190,144 +199,100 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             return [];
         });
     }
+    onMoveEnd() {
+        if (!this.engine.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+            return;
+        }
+        this.engine.setBbox();
+    }
     /**
-     * Function called on moveend event only when the zoom has changed.
-     *
-     * @param {ol/MapEvent~MapEvent} evt Moveend event.
-     * @private
-     * @override
+     * Callback when the RealtimeEngine has rendered successfully.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onMoveEnd(evt) {
-        if (!this.isUpdateBboxOnMoveEnd || !this.getVisible()) {
-            return;
+    onRealtimeEngineRender(renderState, viewState) {
+        this.renderedViewState = Object.assign({}, viewState);
+        // @ts-expect-error  - we are in the same class
+        const { container } = this.getRenderer();
+        if (container) {
+            container.style.transform = '';
         }
-        this.setBbox();
     }
-    // eslint-disable-next-line no-unused-vars
     onZoomEnd() {
-        super.onZoomEnd();
-        if (!this.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+        this.engine.onZoomEnd();
+        if (!this.engine.isUpdateBboxOnMoveEnd || !this.getVisible()) {
             return;
         }
         if (this.selectedVehicleId) {
             this.highlightTrajectory(this.selectedVehicleId);
         }
     }
-    /**
-     * Remove the trajectory form the list if necessary.
-     *
-     * @private
-     */
-    purgeTrajectory(trajectory, extent, zoom) {
-        var _a;
-        const center = (_a = this.map.getView()) === null || _a === void 0 ? void 0 : _a.getCenter();
-        if (!extent && !center) {
-            // In that case the view is not zoomed yet so we can't calculate the extent of the map,
-            // 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() || 0);
-    }
-    // /**
-    //  * Update the cursor style when hovering a vehicle.
-    //  *
-    //  * @private
-    //  * @override
-    //  */
-    // onFeatureHover(
-    //   features: Feature[],
-    //   layer: RealtimeLayer,
-    //   coordinate: Coordinate,
-    // ) {
-    //   super.onFeatureHover(features, layer, coordinate);
-    //   this.map.getTargetElement().style.cursor = features.length
-    //     ? 'pointer'
-    //     : 'auto';
-    // }
-    // /**
-    //  * Display the complete trajectory of the vehicle.
-    //  *
-    //  * @private
-    //  * @override
-    //  */
-    // onFeatureClick(
-    //   features: Feature[],
-    //   layer: RealtimeLayer,
-    //   coordinate: Coordinate,
-    // ) {
-    //   super.onFeatureClick(features, layer, coordinate);
-    //   this.highlightTrajectory(this.selectedVehicleId);
-    // }
-    // @ts-expect-error
-    renderTrajectories(noInterpolate) {
-        if (!this.map) {
-            return;
-        }
-        const view = this.map.getView();
-        // it could happen that the view is set but without center yet,
-        // so the calcualteExtent will trigger an error.
-        if (!(view === null || view === void 0 ? void 0 : view.getCenter())) {
-            return;
+    select(feature) {
+        const id = feature === null || feature === void 0 ? void 0 : feature.get('train_id');
+        if (this.selectedVehicleId !== id) {
+            this.selectedVehicleId = id;
+            this.engine.renderTrajectories(true);
         }
-        super.renderTrajectories({
-            center: view.getCenter(),
-            extent: view.calculateExtent(),
-            pixelRatio: this.pixelRatio,
-            resolution: view.getResolution(),
-            rotation: view.getRotation(),
-            size: this.map.getSize(),
-            zoom: view.getZoom(),
-        }, noInterpolate);
+        this.highlightTrajectory(id);
     }
-    /**
-     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
-     * @private
-     * @override
-     */
-    renderTrajectoriesInternal(viewState, noInterpolate) {
-        var _a;
-        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView())) {
-            return false;
-        }
-        let isRendered = false;
-        const blockRendering = this.allowRenderWhenAnimating
+    shouldRender() {
+        return this.allowRenderWhenAnimating
             ? false
             : this.map.getView().getAnimating() ||
                 this.map.getView().getInteracting();
-        // Don't render the map when the map is animating or interacting.
-        isRendered = blockRendering
-            ? false
-            : super.renderTrajectoriesInternal(viewState, noInterpolate);
-        // We update the current render state.
-        if (isRendered) {
-            /** @private */
-            this.renderedViewState = Object.assign({}, viewState);
-            // @ts-expect-error  - we are in the same class
-            const { container } = this.getRenderer();
-            if (container) {
-                container.style.transform = '';
-            }
-        }
-        return isRendered;
     }
-    select(feature) {
-        this.selectVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
-        this.highlightTrajectory(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
+    /**
+     * Start the rendering.
+     *
+     * @public
+     */
+    start() {
+        this.engine.start();
     }
     /**
-     * Send the current bbox to the websocket
+     * Stop the rendering.
      *
-     * @private
+     * @public
      */
-    setBbox(extent, zoom) {
-        var _a, _b, _c, _d;
-        const extentt = extent ||
-            ((_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.calculateExtent());
-        if (!extentt) {
-            return;
-        }
-        super.setBbox(extentt, zoom || ((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0);
+    stop() {
+        this.engine.stop();
+    }
+    get api() {
+        return this.engine.api;
+    }
+    set api(api) {
+        this.engine.api = api;
+    }
+    get canvas() {
+        return this.engine.canvas;
+    }
+    get filter() {
+        return this.engine.filter;
+    }
+    get hoverVehicleId() {
+        return this.engine.hoverVehicleId;
+    }
+    set hoverVehicleId(id) {
+        this.engine.hoverVehicleId = id;
+    }
+    get mode() {
+        return this.engine.mode;
+    }
+    set mode(mode) {
+        this.engine.mode = mode;
+    }
+    get pixelRatio() {
+        return this.engine.pixelRatio;
+    }
+    get selectedVehicleId() {
+        return this.engine.selectedVehicleId;
+    }
+    set selectedVehicleId(id) {
+        this.engine.selectedVehicleId = id;
+    }
+    get sort() {
+        return this.engine.sort;
+    }
+    get trajectories() {
+        return this.engine.trajectories;
     }
 }
 export default RealtimeLayer;

package/ol/mixins/PropertiesLayerMixin.d.ts

@@ -3,7 +3,7 @@ import { EventsKey } from 'ol/events';
 import { Layer } from 'ol/layer';
 import type { Options } from 'ol/layer/Layer';
 import type { Layerable } from './MobilityLayerMixin';
-export type PropertiesLayerMixinOptions = Options & Record<string, any> & {
+export type PropertiesLayerMixinOptions = {
     children?: any[];
     copyrights?: string[];
     disabled?: boolean;
@@ -14,7 +14,7 @@ export type PropertiesLayerMixinOptions = Options & Record<string, any> & {
     name?: string;
     properties?: Record<string, any>;
     visible?: boolean;
-};
+} & Options & Record<string, any>;
 /**
  * This mixin adds some properties to access ol custom properties easily.
  */
@@ -37,7 +37,6 @@ declare function PropertiesLayerMixin<TBase extends Layerable>(Base: TBase): {
          * @deprecated
          */
         flat(): any[];
-        /** @private */
         onChildrenChange(oldValue: Layer[]): void;
         setMapInternal(map: Map): void;
         /** @deprecated */
@@ -49,7 +48,6 @@ declare function PropertiesLayerMixin<TBase extends Layerable>(Base: TBase): {
         /** @deprecated */
         disabled: boolean;
         /** @deprecated */
-        /** @deprecated */
         readonly group: string;
         /** @deprecated */
         hitTolerance: number;
@@ -86,7 +84,7 @@ declare function PropertiesLayerMixin<TBase extends Layerable>(Base: TBase): {
         getBackground: () => import("ol/layer/Base").BackgroundColor | false;
         getClassName: () => string;
         getLayerState: (managed?: boolean | undefined) => import("ol/layer/Layer").State;
-        getLayersArray: (array?: import("ol/layer/Layer").default<import("ol/source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/layer/Layer").default>;
+        getLayersArray: (array?: import("ol/layer/Layer").default<import("ol/source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/layer/Layer" /** @deprecated */).default>;
         getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => Array<import("ol/layer/Layer").State>;
         getExtent: () => import("ol/extent").Extent | undefined;
         getMaxResolution: () => number;
@@ -116,7 +114,7 @@ declare function PropertiesLayerMixin<TBase extends Layerable>(Base: TBase): {
         } | null;
         hasProperties: () => boolean;
         notify: (key: string, oldValue: any) => void;
-        addChangeListener: (key: string, listener: import("ol/events" /** @deprecated */).Listener) => 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: {

package/ol/mixins/PropertiesLayerMixin.js

@@ -65,7 +65,6 @@ function PropertiesLayerMixin(Base) {
             deprecated('Layer.flat is deprecated. Use getLayersAsFlatArray utils method instead.');
             return getLayersAsFlatArray(this);
         }
-        /** @private */
         onChildrenChange(oldValue) {
             // Set the parent property
             (oldValue || []).forEach((child) => {
@@ -120,7 +119,6 @@ function PropertiesLayerMixin(Base) {
             this.set('disabled', newValue);
         }
         /** @deprecated */
-        /** @deprecated */
         get group() {
             deprecated("Layer.group is deprecated. Use the Layer.get('group') method instead.");
             return this.get('group');

package/ol/renderers/RealtimeLayerRenderer.js

@@ -1,20 +1,17 @@
-import { buffer, containsCoordinate } from 'ol/extent';
 import GeoJSON from 'ol/format/GeoJSON';
 import CanvasLayerRenderer from 'ol/renderer/canvas/Layer';
 import { composeCssTransform } from 'ol/transform';
-/** @private */
 const format = new GeoJSON();
 /**
  * This class is a renderer for Maplibre Layer to be able to use the native ol
  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
  * @private
  */
-// @ts-expect-error
 export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
     forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
         const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
         features.forEach((feature) => {
-            // @ts-expect-error
+            // @ts-expect-error defintion to fix
             callback(feature, this.layer_, feature.getGeometry());
         });
         return features === null || features === void 0 ? void 0 : features[0];
@@ -43,37 +40,15 @@ export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
         return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
     }
     getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
-        var _a;
         if (!coordinate) {
             return [];
         }
         const layer = this.getLayer();
-        const map = layer.getMapInternal();
-        const resolution = ((_a = map === null || map === void 0 ? void 0 : map.getView()) === null || _a === void 0 ? void 0 : _a.getResolution()) || 1;
-        const nb = 10;
-        const ext = buffer([...coordinate, ...coordinate], hitTolerance * resolution);
-        let features = [];
-        let trajectories = Object.values(layer.trajectories || {});
-        if (layer.sort) {
-            // @ts-expect-error
-            trajectories = trajectories.sort(this.sort);
-        }
-        const vehicles = [];
-        for (let i = 0; i < trajectories.length; i += 1) {
-            const trajectory = trajectories[i];
-            if (
-            // @ts-expect-error  coordinate is added by the RealtimeLayer
-            trajectory.properties.coordinate &&
-                // @ts-expect-error  coordinate is added by the RealtimeLayer
-                containsCoordinate(ext, trajectory.properties.coordinate)) {
-                vehicles.push(trajectories[i]);
-            }
-            if (vehicles.length === nb) {
-                break;
-            }
-        }
-        features = vehicles.map((vehicle) => format.readFeature(vehicle));
-        return features;
+        const featureCollection = layer.engine.getVehiclesAtCoordinate(coordinate, {
+            hitTolerance,
+            nb: layer.maxNbFeaturesRequested,
+        });
+        return format.readFeatures(featureCollection);
     }
     // eslint-disable-next-line class-methods-use-this
     prepareFrame() {

package/ol/styles/fullTrajectoryDelayStyle.js

@@ -1,31 +1,29 @@
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-/** @private */
+import { Circle, Fill, Stroke, Style } from 'ol/style';
 const stroke = new Style({
-    zIndex: 2,
     image: new Circle({
-        radius: 5,
         fill: new Fill({
             color: '#000000',
         }),
+        radius: 5,
     }),
     stroke: new Stroke({
         color: '#000000',
         width: 6,
     }),
+    zIndex: 2,
 });
-/** @private */
 const fill = new Style({
-    zIndex: 3,
     image: new Circle({
-        radius: 4,
         fill: new Fill({
             color: '#a0a0a0',
         }),
+        radius: 4,
     }),
     stroke: new Stroke({
         color: '#a0a0a0',
         width: 4,
     }),
+    zIndex: 3,
 });
 /**
  * @private

package/ol/styles/fullTrajectoryStyle.d.ts

@@ -1,5 +1,4 @@
-import type { FeatureLike } from 'ol/Feature';
 import { Style } from 'ol/style';
-/** @private */
+import type { FeatureLike } from 'ol/Feature';
 declare const fullTrajectorystyle: (feature: FeatureLike, resolution: number, options: any) => Style[];
 export default fullTrajectorystyle;

package/ol/styles/fullTrajectoryStyle.js

@@ -1,19 +1,17 @@
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-/** @private */
+import { Circle, Fill, Stroke, Style } from 'ol/style';
 const borderStyle = new Style({
-    zIndex: 2,
     image: new Circle({
-        radius: 5,
         fill: new Fill({
             color: '#000000',
         }),
+        radius: 5,
     }),
     stroke: new Stroke({
         color: '#000000',
         width: 6,
     }),
+    zIndex: 2,
 });
-/** @private */
 const fullTrajectorystyle = (feature, resolution, options) => {
     let lineColor = '#ffffff'; // white
     const type = feature.get('type');
@@ -27,17 +25,17 @@ const fullTrajectorystyle = (feature, resolution, options) => {
     const style = [
         borderStyle,
         new Style({
-            zIndex: 3,
             image: new Circle({
-                radius: 4,
                 fill: new Fill({
                     color: lineColor,
                 }),
+                radius: 4,
             }),
             stroke: new Stroke({
                 color: lineColor,
                 width: 4,
             }),
+            zIndex: 3,
         }),
     ];
     return style;

package/ol/styles/routingStyle.d.ts

@@ -1,4 +1,3 @@
 import { StyleFunction } from 'ol/style/Style';
-/** @private */
 declare const routingStyle: StyleFunction;
 export default routingStyle;