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

package/ol/index.d.ts

@@ -2,6 +2,5 @@ export * from "../api";
 export * from "../common";
 export * from "./controls";
 export * from "./layers";
-export * from "./mixins";
 export * from "./styles";
 export * from "./utils";

package/ol/index.js

@@ -2,6 +2,5 @@ export * from '../api';
 export * from '../common';
 export * from './controls';
 export * from './layers';
-export * from './mixins';
 export * from './styles';
 export * from './utils';

package/ol/layers/Layer.d.ts

@@ -1,101 +1,24 @@
+import { Map } from 'ol';
 import OLLayer from 'ol/layer/Layer';
 import LayerRenderer from 'ol/renderer/Layer';
-import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
-declare const Layer_base: {
-    new (...args: any[]): {
-        olEventsKeys: import("ol/events").EventsKey[];
-        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions;
-        attachToMap(map: import("ol").Map): void;
-        detachFromMap(): void;
-        flat(): any[];
-        onChildrenChange(oldValue: OLLayer[]): void;
-        setMapInternal: ((map: import("ol").Map) => void) & ((map: import("ol").default | null) => void);
-        children: OLLayer<import("ol/source").Source, LayerRenderer<any>>[];
-        get copyrights(): string;
-        set copyrights(newCopyrights: string | string[]);
-        disabled: boolean;
-        readonly group: string;
-        hitTolerance: number;
-        readonly key: string;
-        readonly map: import("ol").Map;
-        readonly name: string;
-        olLayer: OLLayer;
-        parent: OLLayer<import("ol/source").Source, LayerRenderer<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: () => import("ol/source").Source | null;
-        getRenderSource: () => import("ol/source").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").default | null;
-        setMap: (map: import("ol").default | null) => void;
-        setSource: (source: import("ol/source").Source | null) => void;
-        getRenderer: () => LayerRenderer<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").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 OLLayer;
+import type { Options } from 'ol/layer/Layer';
+export type MobilityLayerOptions = {
+    children?: any[];
+    copyrights?: string[];
+    disabled?: boolean;
+    group?: string;
+    hitTolerance?: number;
+    key?: string;
+    map?: Map;
+    name?: string;
+    properties?: Record<string, any>;
+    visible?: boolean;
+} & Options & Record<string, any>;
 /**
  * An OpenLayers layer here only for backward compatibility v2.
  * @deprecated Use an OpenLayers Layer instead.
  */
-declare class Layer extends Layer_base {
+declare class Layer extends OLLayer {
     constructor(options: MobilityLayerOptions);
     clone(newOptions: MobilityLayerOptions): Layer;
     createRenderer(): LayerRenderer<OLLayer>;

package/ol/layers/Layer.js

@@ -1,7 +1,7 @@
 import debounce from 'lodash.debounce';
 import OLLayer from 'ol/layer/Layer';
 import LayerRenderer from 'ol/renderer/Layer';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 let deprecated = () => { };
 if (typeof window !== 'undefined' &&
     new URLSearchParams(window.location.search).get('deprecated')) {
@@ -22,13 +22,14 @@ class EmptyLayerRenderer extends LayerRenderer {
  * An OpenLayers layer here only for backward compatibility v2.
  * @deprecated Use an OpenLayers Layer instead.
  */
-class Layer extends MobilityLayerMixin(OLLayer) {
+class Layer extends OLLayer {
     constructor(options) {
         super(options);
+        defineDeprecatedProperties(this, options);
         deprecated('Layer is deprecated. Use an OpenLayers Layer instead.');
     }
     clone(newOptions) {
-        return new Layer(Object.assign(Object.assign({}, (this.options || {})), (newOptions || {})));
+        return new Layer(Object.assign(Object.assign({}, (this.get('options') || {})), (newOptions || {})));
     }
     // ol does not like when it returns null.
     createRenderer() {

package/ol/layers/MaplibreLayer.d.ts

@@ -1,6 +1,7 @@
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
-import OlMap from 'ol/Map';
-import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
+import { EventsKey } from 'ol/events';
+import Map from 'ol/Map';
+import { MobilityLayerOptions } from './Layer';
 import type { MapLibreLayerOptions, MapLibreOptions } from '@geoblocks/ol-maplibre-layer/lib/types/MapLibreLayer';
 import type { QueryRenderedFeaturesOptions } from 'maplibre-gl';
 export type MaplibreLayerOptions = {
@@ -11,96 +12,6 @@ export type MaplibreLayerOptions = {
     style?: maplibregl.StyleSpecification | null | string;
     url?: string;
 } & MapLibreLayerOptions & MobilityLayerOptions;
-declare const MaplibreLayer_base: {
-    new (...args: any[]): {
-        olEventsKeys: import("ol/events").EventsKey[];
-        options?: import("../mixins/PropertiesLayerMixin").PropertiesLayerMixinOptions;
-        attachToMap(map: OlMap): void;
-        detachFromMap(): void;
-        flat(): any[];
-        onChildrenChange(oldValue: import("ol/layer").Layer[]): void;
-        setMapInternal: ((map: OlMap) => void) & ((map: import("ol/Map").default | null) => void);
-        children: import("ol/layer").Layer<import("ol/source").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: OlMap;
-        readonly name: string;
-        olLayer: import("ol/layer").Layer;
-        parent: import("ol/layer").Layer<import("ol/source").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: () => import("ol/source").Source | null;
-        getRenderSource: () => import("ol/source").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: import("ol/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").default<import("ol/source").default, import("ol/renderer/Layer").default<any>>[] | undefined) => Array<import("ol/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 MapLibreLayer;
 /**
  * An OpenLayers layer able to display data from the [geOps Maps API](https://developer.geops.io/apis/maps).
  *
@@ -128,11 +39,11 @@ declare const MaplibreLayer_base: {
  *
  * @see <a href="/example/ol-maplibre-layer">OpenLayers Maplibre layer example</a>
  *
- * @extends {ol/layer/Layer~Layer}
  * @extends {geoblocks/ol-maplibre-layer/MapLibreLayer}
  * @public
  */
-declare class MaplibreLayer extends MaplibreLayer_base {
+declare class MaplibreLayer extends MapLibreLayer {
+    olEventsKeys: EventsKey[];
     /**
      * Constructor.
      *
@@ -146,9 +57,8 @@ declare class MaplibreLayer extends MaplibreLayer_base {
     constructor(options: MaplibreLayerOptions);
     /**
      * Initialize the layer and listen to feature clicks.
-     * @param {ol/Map~Map} map An OpenLayers map.
      */
-    attachToMap(map: OlMap): void;
+    attachToMap(): void;
     /**
      * Create a copy of the MaplibreLayer.
      *
@@ -157,7 +67,9 @@ declare class MaplibreLayer extends MaplibreLayer_base {
      * @public
      */
     clone(newOptions: MaplibreLayerOptions): MaplibreLayer;
+    detachFromMap(): void;
     getStyle(): any;
+    setMapInternal(map: Map): void;
     updateMaplibreMap(): void;
     set apiKey(newValue: string);
     get apiKey(): string;

package/ol/layers/MaplibreLayer.js

@@ -1,7 +1,8 @@
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer';
 import debounce from 'lodash.debounce';
+import { unByKey } from 'ol/Observable';
 import { getUrlWithParams } from '../../common/utils';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 const buildStyleUrl = (url, style, apiKey, apiKeyName) => {
     return getUrlWithParams(`${url}/styles/${style}/style.json`, {
         [apiKeyName]: apiKey,
@@ -42,11 +43,10 @@ if (typeof window !== 'undefined' &&
  *
  * @see <a href="/example/ol-maplibre-layer">OpenLayers Maplibre layer example</a>
  *
- * @extends {ol/layer/Layer~Layer}
  * @extends {geoblocks/ol-maplibre-layer/MapLibreLayer}
  * @public
  */
-class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
+class MaplibreLayer extends MapLibreLayer {
     /**
      * Constructor.
      *
@@ -71,16 +71,17 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
             newOptions.mapLibreOptions.style = buildStyleUrl(newOptions.url, newOptions.style, newOptions.apiKey, newOptions.apiKeyName);
         }
         super(newOptions);
+        this.olEventsKeys = [];
+        // For backward compatibility with v2
+        defineDeprecatedProperties(this, options);
         // We save the options to be able to clone the layer.
         // and to see if the style is defined by the maplibreOptions given by the user.
         this.set('options', options);
     }
     /**
      * Initialize the layer and listen to feature clicks.
-     * @param {ol/Map~Map} map An OpenLayers map.
      */
-    attachToMap(map) {
-        super.attachToMap(map);
+    attachToMap() {
         const updateMaplibreMapDebounced = debounce(this.updateMaplibreMap.bind(this), 150);
         updateMaplibreMapDebounced();
         this.olEventsKeys.push(this.on('propertychange', (evt) => {
@@ -89,14 +90,6 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
             }
         }));
     }
-    // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
-    //   return this.get('queryRenderedFeaturesOptions');
-    // }
-    // set queryRenderedFeaturesOptions(
-    //   newValue: maplibregl.QueryRenderedFeaturesOptions,
-    // ) {
-    //   this.set('queryRenderedFeaturesOptions', newValue);
-    // }
     /**
      * Create a copy of the MaplibreLayer.
      *
@@ -105,7 +98,10 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
      * @public
      */
     clone(newOptions) {
-        return new MaplibreLayer(Object.assign(Object.assign({}, (this.options || {})), (newOptions || {})));
+        return new MaplibreLayer(Object.assign(Object.assign({}, (this.get('options') || {})), (newOptions || {})));
+    }
+    detachFromMap() {
+        unByKey(this.olEventsKeys);
     }
     getStyle() {
         var _a, _b;
@@ -127,6 +123,24 @@ class MaplibreLayer extends MobilityLayerMixin(MapLibreLayer) {
         /// Otherwise build the complete style url.
         return buildStyleUrl(this.url, this.style, this.apiKey, this.apiKeyName);
     }
+    // get queryRenderedFeaturesOptions(): maplibregl.QueryRenderedFeaturesOptions {
+    //   return this.get('queryRenderedFeaturesOptions');
+    // }
+    // set queryRenderedFeaturesOptions(
+    //   newValue: maplibregl.QueryRenderedFeaturesOptions,
+    // ) {
+    //   this.set('queryRenderedFeaturesOptions', newValue);
+    // }
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap();
+        }
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
+        }
+    }
     updateMaplibreMap() {
         var _a;
         try {

package/ol/layers/MaplibreStyleLayer.d.ts

@@ -1,9 +1,9 @@
 import { FeatureState } from 'maplibre-gl';
 import { Feature, Map } from 'ol';
 import { Coordinate } from 'ol/coordinate';
+import { EventsKey } from 'ol/events';
 import { Layer } from 'ol/layer';
 import { ObjectEvent } from 'ol/Object';
-import { Source } from 'ol/source';
 import { FilterFunction } from '../../common/typedefs';
 import { LayerGetFeatureInfoResponse } from '../../types';
 import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
@@ -15,96 +15,6 @@ export type MaplibreStyleLayerOptions = {
     maplibreLayer?: MaplibreLayer;
     queryRenderedLayersFilter?: FilterFunction;
 } & MaplibreLayerOptions;
-declare const MaplibreStyleLayer_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;
 /**
  * Layer that helps show/hide a specific subset of style layers of a [MaplibreLayer](./MaplibreLayer.js~MaplibreLayer.html).
  *
@@ -127,8 +37,9 @@ declare const MaplibreStyleLayer_base: {
  * @extends {ol/layer/Layer~Layer}
  * @public
  */
-declare class MaplibreStyleLayer extends MaplibreStyleLayer_base {
+declare class MaplibreStyleLayer extends Layer {
     highlightedFeatures: Feature[];
+    olEventsKeys: EventsKey[];
     selectedFeatures: Feature[];
     /**
      * Constructor.
@@ -206,6 +117,7 @@ declare class MaplibreStyleLayer extends MaplibreStyleLayer_base {
      * @deprecated Use layer.setFeatureState(features, {hover: true|false}) instead.
      */
     setHoverState(features: Feature[], state: boolean): void;
+    setMapInternal(map: Map): void;
     get beforeId(): string;
     set beforeId(newValue: string | undefined);
     get layers(): maplibregl.AddLayerObject[];

package/ol/layers/MaplibreStyleLayer.js

@@ -1,9 +1,10 @@
 import debounce from 'lodash.debounce';
 import { Layer } from 'ol/layer';
+import { unByKey } from 'ol/Observable';
 import { Source } from 'ol/source';
 import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 let deprecated = () => { };
 if (typeof window !== 'undefined' &&
     new URLSearchParams(window.location.search).get('deprecated')) {
@@ -34,7 +35,7 @@ if (typeof window !== 'undefined' &&
  * @extends {ol/layer/Layer~Layer}
  * @public
  */
-class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
+class MaplibreStyleLayer extends Layer {
     /**
      * Constructor.
      *
@@ -74,7 +75,12 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         }
         super(Object.assign({ source: new Source({}) }, options));
         this.highlightedFeatures = [];
+        this.olEventsKeys = [];
         this.selectedFeatures = [];
+        // For backward compatibility with v2
+        defineDeprecatedProperties(this, options);
+        // For cloning
+        this.set('options', options);
         this.beforeId = options.beforeId;
         this.onLoad = this.onLoad.bind(this);
         if (!this.layersFilter && this.layers) {
@@ -146,17 +152,17 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @override
      */
     attachToMap(map) {
-        if (this.maplibreLayer && !this.maplibreLayer.map) {
+        if (this.maplibreLayer && !this.maplibreLayer.getMapInternal()) {
             map.addLayer(this.maplibreLayer);
         }
-        super.attachToMap(map);
-        if (!this.map || !this.maplibreLayer) {
+        const mapInternal = this.getMapInternal();
+        if (!mapInternal || !this.maplibreLayer) {
             return;
         }
-        if (!this.map.getTargetElement()) {
+        if (!mapInternal.getTargetElement()) {
             // If ther e is no target element the mapLibreMap is not yet created, we
             // relaunch the initialisation when it's the case.
-            this.olEventsKeys.push(this.map.on('change:target', () => {
+            this.olEventsKeys.push(mapInternal.on('change:target', () => {
                 this.attachToMap(map);
             }));
             return;
@@ -207,7 +213,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @public
      */
     clone(newOptions) {
-        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.options), newOptions));
+        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
     }
     createRenderer() {
         return new MaplibreStyleLayerRenderer(this);
@@ -218,12 +224,12 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     detachFromMap() {
         var _a;
+        unByKey(this.olEventsKeys);
         if ((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) {
             this.maplibreLayer.mapLibreMap.off('load', this.onLoad);
             this.removeLayers();
             this.removeSources();
         }
-        super.detachFromMap();
     }
     /**
      * Request feature information for a given coordinate.
@@ -392,6 +398,16 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         deprecated(`Deprecated. Use layer.setFeatureState(features, {hover: ${state}}) instead.`);
         this.setFeatureState(features, { hover: state });
     }
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap(map);
+        }
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
+        }
+    }
     get beforeId() {
         return this.get('beforeId');
     }