mobility-toolbox-js 3.0.0-beta.36 → 3.0.0-beta.38

package/ol/layers/RealtimeLayer.d.ts

@@ -1,11 +1,11 @@
 import { DebouncedFunc } from 'lodash';
 import { Map, MapEvent } from 'ol';
+import { EventsKey } from 'ol/events';
 import Feature, { FeatureLike } from 'ol/Feature';
 import { Vector as VectorLayer } from 'ol/layer';
 import Layer from 'ol/layer/Layer';
 import { ObjectEvent } from 'ol/Object';
 import { Vector as VectorSource } from 'ol/source';
-import Source from 'ol/source/Source';
 import { State } from 'ol/View';
 import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
 import { FilterFunction, SortFunction } from '../../common/typedefs';
@@ -18,96 +18,6 @@ export type RealtimeLayerOptions = {
     fullTrajectoryStyle?: (feature: FeatureLike, resolution: number, options: any) => void;
     maxNbFeaturesRequested?: number;
 } & RealtimeEngineOptions;
-declare const RealtimeLayer_base: {
-    new (...args: any[]): {
-        olEventsKeys: import("ol/events").EventsKey[];
-        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions;
-        attachToMap(map: Map): void;
-        detachFromMap(): void;
-        flat(): any[];
-        onChildrenChange(oldValue: Layer[]): void;
-        setMapInternal: ((map: Map) => void) & ((map: import("ol/Map").default | null) => void);
-        children: Layer<Source, import("ol/renderer/Layer").default<any>>[];
-        get copyrights(): string;
-        set copyrights(newCopyrights: string | string[]);
-        disabled: boolean;
-        readonly group: string;
-        hitTolerance: number;
-        readonly key: string;
-        readonly map: Map;
-        readonly name: string;
-        olLayer: Layer;
-        parent: Layer<Source, import("ol/renderer/Layer").default<any>>;
-        visible: boolean;
-        on: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
-        once: import("ol/layer/Layer").LayerOnSignature<import("ol/events").EventsKey>;
-        un: import("ol/layer/Layer").LayerOnSignature<void>;
-        render: (frameState: import("ol/Map").FrameState | null, target: HTMLElement) => HTMLElement | null;
-        getSource: () => Source | null;
-        getRenderSource: () => Source | null;
-        getFeatures: (pixel: import("ol/pixel").Pixel) => Promise<Array<import("ol/Feature").FeatureLike>>;
-        getData: (pixel: import("ol/pixel").Pixel) => Uint8ClampedArray | Uint8Array | Float32Array | DataView | null;
-        isVisible: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => boolean;
-        getAttributions: (view?: import("ol").View | import("ol/View").ViewStateLayerStateExtent | undefined) => Array<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: () => import("ol/Map").default | null;
-        setMap: (map: import("ol/Map").default | null) => void;
-        setSource: (source: Source | null) => void;
-        getRenderer: () => import("ol/renderer/Layer").default<any> | null;
-        hasRenderer: () => boolean;
-        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/Source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/layer/Layer").default>;
-        getLayerStatesArray: (states?: import("ol/layer/Layer").State[] | undefined) => Array<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: () => Array<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;
-        addEventListener: (type: string, listener: import("ol/events").Listener) => void;
-        dispatchEvent: (event: import("ol/events/Event").default | string) => boolean | undefined;
-        getListeners: (type: string) => Array<import("ol/events").Listener> | undefined;
-        hasListener: (type?: string | undefined) => boolean;
-        removeEventListener: (type: string, listener: import("ol/events").Listener) => void;
-        dispose: () => void;
-    };
-} & typeof Layer;
 /**
  * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
@@ -131,11 +41,12 @@ declare const RealtimeLayer_base: {
  * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
  * @public
  */
-declare class RealtimeLayer extends RealtimeLayer_base {
+declare class RealtimeLayer extends Layer {
     allowRenderWhenAnimating?: boolean;
     currentZoom?: number;
     engine: RealtimeEngine;
     maxNbFeaturesRequested: number;
+    olEventsKeys: EventsKey[];
     onMoveEndDebounced: DebouncedFunc<(evt: MapEvent | ObjectEvent) => void>;
     onZoomEndDebounced: DebouncedFunc<(evt: MapEvent | ObjectEvent) => void>;
     renderedViewState: State | undefined;
@@ -150,7 +61,7 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      * @public
      */
     constructor(options: RealtimeLayerOptions);
-    attachToMap(map: Map): void;
+    attachToMap(): void;
     /**
      * Create a copy of the RealtimeLayer.
      *
@@ -206,7 +117,8 @@ declare class RealtimeLayer extends RealtimeLayer_base {
     onRealtimeEngineRender(renderState: RealtimeRenderState, viewState: ViewState): void;
     onZoomEnd(): void;
     select(feature: Feature): void;
-    shouldRender(): boolean;
+    setMapInternal(map: Map): void;
+    shouldRender(): boolean | undefined;
     /**
      * Start the rendering.
      *

package/ol/layers/RealtimeLayer.js

@@ -2,12 +2,13 @@ import debounce from 'lodash.debounce';
 import GeoJSON from 'ol/format/GeoJSON';
 import { Vector as VectorLayer } from 'ol/layer';
 import Layer from 'ol/layer/Layer';
+import { unByKey } from 'ol/Observable';
 import { Vector as VectorSource } from 'ol/source';
 import Source from 'ol/source/Source';
 import RealtimeEngine from '../../common/utils/RealtimeEngine';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
 import { fullTrajectoryStyle } from '../styles';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 const format = new GeoJSON();
 /**
  * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
@@ -32,7 +33,7 @@ const format = new GeoJSON();
  * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
  * @public
  */
-class RealtimeLayer extends MobilityLayerMixin(Layer) {
+class RealtimeLayer extends Layer {
     /**
      * Constructor.
      *
@@ -48,6 +49,9 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
         super(Object.assign({ source: new Source({}) }, options));
         this.allowRenderWhenAnimating = false;
         this.maxNbFeaturesRequested = 100;
+        this.olEventsKeys = [];
+        // For backward compatibility with v2
+        defineDeprecatedProperties(this, options);
         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
@@ -62,17 +66,17 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
         this.onZoomEndDebounced = debounce(this.onZoomEnd, 100);
         this.onMoveEndDebounced = debounce(this.onMoveEnd, 100);
     }
-    attachToMap(map) {
-        super.attachToMap(map);
+    attachToMap() {
         this.engine.attachToMap();
-        if (this.map) {
+        const mapInternal = this.getMapInternal();
+        if (mapInternal) {
             // If the layer is visible we start  the rendering clock
             if (this.getVisible()) {
                 this.engine.start();
             }
-            const index = this.map.getLayers().getArray().indexOf(this);
-            this.map.getLayers().insertAt(index, this.vectorLayer);
-            this.olEventsKeys.push(...this.map.on(['moveend', 'change:target'], 
+            const index = mapInternal.getLayers().getArray().indexOf(this);
+            mapInternal.getLayers().insertAt(index, this.vectorLayer);
+            this.olEventsKeys.push(...mapInternal.on(['moveend', 'change:target'], 
             // @ts-expect-error  - bad ol definitions
             (evt) => {
                 const view = (evt.map || evt.target).getView();
@@ -109,7 +113,7 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
      * @public
      */
     clone(newOptions) {
-        return new RealtimeLayer(Object.assign(Object.assign({}, this.options), newOptions));
+        return new RealtimeLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
     }
     createRenderer() {
         return new RealtimeLayerRenderer(this);
@@ -119,9 +123,9 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
      */
     detachFromMap() {
         var _a;
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
+        unByKey(this.olEventsKeys);
+        (_a = this.getMapInternal()) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
         this.engine.detachFromMap();
-        super.detachFromMap();
     }
     /**
      * Get some informations about a trajectory.
@@ -135,7 +139,7 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
         // 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))),
+            this.engine.api.getFullTrajectory(id, this.engine.mode, this.engine.getGeneralizationLevelByZoom(Math.floor(((_b = (_a = this.getMapInternal()) === 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 = {
@@ -149,18 +153,18 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
         return this.engine.getVehicles(filterFunc);
     }
     getViewState() {
-        var _a;
-        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView())) {
+        const mapInternal = this.getMapInternal();
+        if (!(mapInternal === null || mapInternal === void 0 ? void 0 : mapInternal.getView())) {
             return {};
         }
-        const view = this.map.getView();
+        const view = mapInternal.getView();
         return {
             center: view.getCenter(),
             extent: view.calculateExtent(),
             pixelRatio: this.engine.pixelRatio,
             resolution: view.getResolution(),
             rotation: view.getRotation(),
-            size: this.map.getSize(),
+            size: mapInternal.getSize(),
             visible: this.getVisible(),
             zoom: view.getZoom(),
         };
@@ -182,7 +186,7 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
             return Promise.resolve([]);
         }
         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)))
+            .getFullTrajectory(id, this.engine.mode, this.engine.getGeneralizationLevelByZoom(Math.floor(((_d = (_c = this.getMapInternal()) === 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;
@@ -236,11 +240,22 @@ class RealtimeLayer extends MobilityLayerMixin(Layer) {
         }
         this.highlightTrajectory(id);
     }
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap();
+        }
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
+        }
+    }
     shouldRender() {
+        var _a, _b;
         return this.allowRenderWhenAnimating
             ? false
-            : this.map.getView().getAnimating() ||
-                this.map.getView().getInteracting();
+            : ((_a = this.getMapInternal()) === null || _a === void 0 ? void 0 : _a.getView().getAnimating()) ||
+                ((_b = this.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getView().getInteracting());
     }
     /**
      * Start the rendering.

package/ol/layers/VectorLayer.d.ts

@@ -1,7 +1,6 @@
 import { Coordinate } from 'ol/coordinate';
 import { LayerGetFeatureInfoResponse } from '../../types';
-import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
-import Layer from './Layer';
+import Layer, { MobilityLayerOptions } from './Layer';
 /**
  * @deprecated
  */

package/ol/layers/VectorLayer.js

@@ -7,19 +7,20 @@ class VectorLayer extends Layer {
      * @deprecated
      */
     clone(newOptions) {
-        return new VectorLayer(Object.assign(Object.assign({}, this.options), newOptions));
+        return new VectorLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
     }
     /**
      * @deprecated
      */
     getFeatureInfoAtCoordinate(coordinate) {
         let features = [];
-        if (this.map) {
-            const pixel = this.map.getPixelFromCoordinate(coordinate);
+        const mapInternal = this.getMapInternal();
+        if (mapInternal) {
+            const pixel = mapInternal.getPixelFromCoordinate(coordinate);
             features =
-                this.map.getFeaturesAtPixel(pixel, {
-                    hitTolerance: this.hitTolerance || 5,
-                    layerFilter: (l) => l === this.olLayer,
+                mapInternal.getFeaturesAtPixel(pixel, {
+                    hitTolerance: this.get('hitTolerance') || 5,
+                    layerFilter: (l) => l === this,
                 }) || [];
         }
         return Promise.resolve({

package/ol/styles/routingStyle.js

@@ -32,16 +32,24 @@ const dashedRedLine = new Style({
     }),
 });
 const routingStyle = (feature, resolution) => {
+    var _a;
     const minResolution = feature.get('minResolution');
     const maxResolution = feature.get('maxResolution');
     const inRange = resolution <= minResolution && resolution > maxResolution;
     if (minResolution && maxResolution && !inRange) {
         return [];
     }
+    const zIndex = ((_a = feature === null || feature === void 0 ? void 0 : feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === 'Point' ? 100 : 0;
+    let styles = [blackBorder, redLine];
     const mot = feature.get('mot');
-    if (mot !== 'foot') {
-        return [blackBorder, redLine];
+    if (mot === 'foot') {
+        styles = [dashedRedLine];
     }
-    return [dashedRedLine];
+    styles = styles.map((style) => {
+        const tmp = style.clone();
+        tmp.setZIndex(zIndex);
+        return tmp;
+    });
+    return styles;
 };
 export default routingStyle;

package/ol/utils/defineDeprecatedProperties.d.ts

@@ -0,0 +1,10 @@
+import { Layer } from 'ol/layer';
+import { MobilityLayerOptions } from '../layers/Layer';
+/**
+ * obj function defines properties taht were used in mbt v2.
+ * They are all marked als deprecated.
+ * @param obj
+ * @returns
+ */
+declare const defineDeprecatedProperties: (obj: Layer, options: MobilityLayerOptions) => void;
+export default defineDeprecatedProperties;

package/ol/utils/defineDeprecatedProperties.js

@@ -0,0 +1,180 @@
+import debounce from 'lodash.debounce';
+let deprecated = () => { };
+if (typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).get('deprecated')) {
+    deprecated = debounce((message) => {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+    }, 1000);
+}
+const onChildrenChange = (layer, oldValue) => {
+    // Set the parent property
+    (oldValue || []).forEach((child) => {
+        child.set('parent', undefined);
+    });
+    (layer.get('children') || []).forEach((child) => {
+        child.set('parent', this);
+    });
+};
+/**
+ * obj function defines properties taht were used in mbt v2.
+ * They are all marked als deprecated.
+ * @param obj
+ * @returns
+ */
+const defineDeprecatedProperties = (obj, options) => {
+    if (options.properties) {
+        deprecated("Deprecated. Don't use properties options. Pass the values directly in options object.");
+        obj.setProperties(options.properties);
+    }
+    // Update parent property
+    obj.on('propertychange', (evt) => {
+        if (evt.key === 'children') {
+            onChildrenChange(evt.target, evt.oldValue);
+        }
+        if (evt.key === 'map') {
+            const map = evt.target.get(evt.key);
+            if (map) {
+                (evt.target.get('children') || []).forEach((child) => {
+                    map.addLayer(child);
+                });
+            }
+            else if (evt.oldValue) {
+                (evt.target.get('children') || []).forEach((child) => {
+                    evt.oldValue.removeLayer(child);
+                });
+            }
+        }
+    });
+    // Save options for cloning
+    obj.set('options', options);
+    obj.set('children', options.children || []); // Trigger the on children change event
+    Object.defineProperties(obj, {
+        children: {
+            /** @deprecated */
+            get: () => {
+                deprecated("Layer.children is deprecated. Use the Layer.get('children') method instead.");
+                return obj.get('children') || [];
+            },
+            /** @deprecated */
+            set: (newValue) => {
+                deprecated("Layer.children is deprecated. Use the Layer.set('children', children) method instead.");
+                obj.set('children', newValue || []);
+            },
+        },
+        copyrights: {
+            /** @deprecated */
+            get: () => {
+                deprecated('Layer.copyrights is deprecated. Get the attributions from the source object');
+                return obj.get('copyrights');
+            },
+            /** @deprecated */
+            set: (newCopyrights) => {
+                deprecated('Layer.copyrights is deprecated. Set the attributions to the source object.');
+                const arrValue = newCopyrights && !Array.isArray(newCopyrights)
+                    ? [newCopyrights]
+                    : newCopyrights;
+                obj.set('copyrights', arrValue || []);
+            },
+        },
+        disabled: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.disabled is deprecated. Use the Layer.get('disabled') method instead.");
+                return obj.get('disabled');
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated("Layer.disabled is deprecated. Use the Layer.set('disabled', newValue) method instead.");
+                obj.set('disabled', newValue);
+            },
+        },
+        group: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.group is deprecated. Use the Layer.get('group') method instead.");
+                return obj.get('group');
+            },
+        },
+        hitTolerance: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.hitTolerance is deprecated. Pass the hitTolerance when you request the features.');
+                return obj.get('hitTolerance') || 5;
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated('Layer.hitTolerance is deprecated. Pass the hitTolerance when you request the features.');
+                obj.set('hitTolerance', newValue);
+            },
+        },
+        key: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.key is deprecated. Use the Layer.get("key") method instead.');
+                return obj.get('key') || obj.get('name');
+            },
+        },
+        map: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.map is deprecated. Use the Layer.get("map") method instead.');
+                return obj.getMapInternal();
+            },
+        },
+        name: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.name is deprecated. Use the Layer.get('name') method instead.");
+                return obj.get('name');
+            },
+        },
+        olLayer: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. obj getter is only a redirect to the current 'this' object.");
+                return obj;
+            },
+            /** @deprecated */
+            set() {
+                deprecated('Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. obj setter has no effect.');
+            },
+        },
+        options: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.options is deprecated. Use the Layer.get("options") method instead.');
+                return obj.get('options');
+            },
+            set(newValue) {
+                deprecated('Layer.options is deprecated.  Use the Layer.set("options", newValue) method instead.');
+                return obj.set('options', newValue);
+            },
+        },
+        parent: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.parent is deprecated. Use the Layer.get('parent') method instead.");
+                return obj.get('parent');
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated("Layer.parent is deprecated. Use the Layer.set('parent', parent) method instead.");
+                obj.set('parent', newValue);
+            },
+        },
+        visible: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.visible is deprecated. Use the Layer.getVisible() method instead.');
+                return obj.getVisible();
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated('Layer.visible is deprecated. Use the Layer.setVisible(newValue) method instead.');
+                obj.setVisible(newValue);
+            },
+        },
+    });
+};
+export default defineDeprecatedProperties;

package/package.json

@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "3.0.0-beta.36",
+  "version": "3.0.0-beta.38",
   "homepage": "https://mobility-toolbox-js.geops.io/",
   "exports": {
     ".": "./index.js",
@@ -26,8 +26,8 @@
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@commitlint/cli": "19.5.0",
-    "@commitlint/config-conventional": "19.5.0",
+    "@commitlint/cli": "19.6.0",
+    "@commitlint/config-conventional": "19.6.0",
     "@geops/eslint-config-react": "^1.2.0",
     "@types/geojson": "7946.0.14",
     "@types/lodash": "^4.17.13",
@@ -37,9 +37,9 @@
     "@types/offscreencanvas": "2019.7.3",
     "@types/topojson": "3.2.6",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.14.0",
-    "@typescript-eslint/parser": "8.14.0",
-    "cypress": "13.15.2",
+    "@typescript-eslint/eslint-plugin": "8.15.0",
+    "@typescript-eslint/parser": "8.15.0",
+    "cypress": "13.16.0",
     "esbuild": "0.24.0",
     "esdoc": "1.1.0",
     "esdoc-ecmascript-proposal-plugin": "1.0.0",
@@ -56,7 +56,7 @@
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.2",
     "fixpack": "4.0.0",
-    "husky": "9.1.6",
+    "husky": "9.1.7",
     "is-ci": "3.0.1",
     "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
@@ -80,9 +80,10 @@
     "stylelint": "16.10.0",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-config-standard": "36.0.1",
-    "stylelint-scss": "6.9.0",
+    "stylelint-scss": "6.10.0",
     "ts-jest": "^29.2.5",
-    "typescript": "5.6.3"
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
   },
   "scripts": {
     "apidoc": "esdoc && cp apidoc/index.json doc/src/components/Esdoc",
@@ -95,9 +96,10 @@
     "cy:test:chrome": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser chrome'",
     "cy:test:edge": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser edge'",
     "cy:test:firefox": "yarn build && start-server-and-test start http://localhost:3000 'cypress run --browser firefox'",
-    "dev": "yarn clean && yarn build && yarn apidoc && yarn dev:examples",
-    "dev:examples": "yarn clean && yarn build && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn dev",
+    "dev": "vite",
     "doc": "yarn build && yarn apidoc && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn build",
+    "doc:dev": "yarn clean && yarn build && yarn apidoc && yarn doc:dev:examples",
+    "doc:dev:examples": "yarn clean && yarn build && cd doc && rm -rf node_modules/mobility-toolbox-js && yarn install --force && yarn dev",
     "esbuild": "yarn esbuild:all && yarn esbuild:iife",
     "esbuild:all": "esbuild src/index.js src/**/*.js src/**/*.ts src/**/**/*.js src/**/**/*.ts --target=chrome100 --outdir=build/ --loader:.js=jsx",
     "esbuild:iife": "yarn esbuild:iife:unminify && yarn esbuild:iife:minify",
@@ -105,9 +107,6 @@
     "esbuild:iife:minify": "yarn esbuild:iife:base --minify --outfile=build/mbt.min.js",
     "esbuild:iife:unminify": "yarn esbuild:iife:base --outfile=build/mbt.js",
     "format": "prettier --write 'src/**/*.js' 'src/**/*.test.js' && eslint src/**/*.js src/**/*.test.js src/**/*.ts --fix && stylelint 'src/**/*.css' 'src/**/*.scss' --fix --allow-empty-input",
-    "lib": "REACT_APP_LIB_MODE=1  webpack --mode production",
-    "lib:dev": "REACT_APP_LIB_MODE=1  webpack --mode development",
-    "link2": "cmdToAdd=$(node ./scripts/read-pkg-json.js add) && $cmdToAdd && yarn build && cmdToRemove=$(node ./scripts/read-pkg-json.js remove) && $cmdToRemove && cd build && yarn link",
     "lint": "eslint src/**/*.js src/**/*.ts && stylelint src/**/*.css src/**/*.scss --allow-empty-input",
     "prepare": "is-ci || husky",
     "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog  && yarn run build && cd build && HUSKY=0 yarn publish --tag beta && git push origin HEAD && git push --tags ",