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

package/ol/layers/MaplibreStyleLayer.js

@@ -1,8 +1,17 @@
+import debounce from 'lodash.debounce';
 import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
+import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
 import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
-import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
+let deprecated = () => { };
+if (typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).get('deprecated')) {
+    deprecated = debounce((...messages) => {
+        // eslint-disable-next-line no-console
+        console.warn(...messages);
+    }, 1000);
+}
 /**
  * Layer for visualizing a specific set of layer from a MapboxLayer.
  *
@@ -22,79 +31,6 @@ import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
  * @extends {ol/layer/Layer~Layer}
  */
 class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
-    get beforeId() {
-        return this.get('beforeId');
-    }
-    set beforeId(newValue) {
-        this.set('beforeId', newValue);
-    }
-    get layers() {
-        return this.get('layers');
-    }
-    set layers(newValue) {
-        this.set('layers', newValue);
-    }
-    get layersFilter() {
-        return this.get('layersFilter');
-    }
-    set layersFilter(newValue) {
-        this.set('layersFilter', newValue);
-    }
-    get mapboxLayer() {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use maplibreLayer instead.');
-        return this.get('maplibreLayer');
-    }
-    get maplibreLayer() {
-        return this.get('maplibreLayer');
-    }
-    set maplibreLayer(newValue) {
-        this.set('maplibreLayer', newValue);
-    }
-    get queryRenderedLayersFilter() {
-        return this.get('queryRenderedLayersFilter');
-    }
-    set queryRenderedLayersFilter(newValue) {
-        this.set('queryRenderedLayersFilter', newValue);
-    }
-    get sources() {
-        return this.get('sources');
-    }
-    set sources(newValue) {
-        this.set('sources', newValue);
-    }
-    /**
-     * @deprecated
-     */
-    get styleLayer() {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
-        return this.layers[0];
-    }
-    /**
-     * @deprecated
-     */
-    set styleLayer(newValue) {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
-        this.layers = [newValue];
-    }
-    /**
-     * @deprecated
-     */
-    get styleLayers() {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
-        return this.layers;
-    }
-    /**
-     * @deprecated
-     */
-    set styleLayers(newValue) {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
-        this.layers = newValue;
-    }
     /**
      * Constructor.
      *
@@ -105,8 +41,18 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @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) {
-        super(Object.assign({ source: new Source({}) }, (options || {})));
+    constructor(options = {
+        mapLibreOptions: { style: { layers: [], sources: {}, version: 8 } },
+    }) {
+        /** Manage renamed property for backward compatibility with v2  */
+        if (options.mapboxLayer) {
+            deprecated('options.mapboxLayer is deprecated. Use options.maplibreLayer instead.');
+            // eslint-disable-next-line no-param-reassign
+            options.maplibreLayer = options.mapboxLayer;
+            // eslint-disable-next-line no-param-reassign
+            delete options.mapboxLayer;
+        }
+        super(Object.assign({ source: new Source({}) }, options));
         this.highlightedFeatures = [];
         this.selectedFeatures = [];
         /**
@@ -119,8 +65,64 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             };
         }
     }
-    createRenderer() {
-        return new MaplibreStyleLayerRenderer(this);
+    /** @private */
+    addLayers() {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
+            return;
+        }
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
+            this.layers.forEach((layer) => {
+                // @ts-expect-error  source is optional but exists in TS definition
+                const { id, source } = layer;
+                if ((!source || (source && mapLibreMap.getSource(source))) &&
+                    id &&
+                    !mapLibreMap.getLayer(id)) {
+                    mapLibreMap.addLayer(layer, this.beforeId);
+                }
+            });
+            this.applyLayoutVisibility();
+        }
+    }
+    /** @private */
+    addSources() {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
+            return;
+        }
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
+            Object.entries(this.sources).forEach(([id, source]) => {
+                if (!mapLibreMap.getSource(id)) {
+                    mapLibreMap.addSource(id, source);
+                }
+            });
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    applyLayoutVisibility(evt) {
+        var _a, _b;
+        if (!((_b = (_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) === null || _b === void 0 ? void 0 : _b.getStyle()) || !this.layersFilter) {
+            return;
+        }
+        const { mapLibreMap } = this.maplibreLayer;
+        const style = mapLibreMap.getStyle();
+        const visibilityValue = this.getVisible() ? 'visible' : 'none';
+        const layers = style.layers || [];
+        for (let i = 0; i < layers.length; i += 1) {
+            const layer = layers[i];
+            if (this.layersFilter(layer)) {
+                const { id } = layer;
+                if (mapLibreMap.getLayer(id)) {
+                    mapLibreMap.setLayoutProperty(id, 'visibility', visibilityValue);
+                    if (this.getMinZoom() || this.getMaxZoom()) {
+                        mapLibreMap.setLayerZoomRange(id, this.getMinZoom() ? this.getMinZoom() - 1 : 0, // Maplibre zoom = ol zoom - 1
+                        this.getMaxZoom() ? this.getMaxZoom() - 1 : 24);
+                    }
+                }
+            }
+        }
     }
     /**
      * Initialize the layer.
@@ -136,30 +138,30 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             return;
         }
         if (!this.map.getTargetElement()) {
-            // If ther e is no target element the maplibreMap is not yet created, we
+            // 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.olEventsKeys.push(this.map.on('change:target', () => {
                 this.attachToMap(map);
             }));
             return;
         }
         // 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.
+        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()) {
+            if (mapLibreMap.loaded()) {
                 this.onLoad();
             }
             else {
-                maplibreMap.once('load', this.onLoad);
+                mapLibreMap.once('load', this.onLoad);
             }
         }
         // Apply the visibiltity when layer's visibility change.
-        this.olListenersKeys.push(
-        // @ts-expect-error 'load' is a custom event
+        this.olEventsKeys.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.
@@ -171,103 +173,30 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             }
         }));
     }
+    /**
+     * Create a copy of the MapboxStyleLayer.
+     * @param {Object} newOptions Options to override.
+     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     */
+    clone(newOptions) {
+        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+    createRenderer() {
+        return new MaplibreStyleLayerRenderer(this);
+    }
     /**
      * Terminate the layer.
      * @override
      */
     detachFromMap() {
         var _a;
-        if ((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) {
-            this.maplibreLayer.maplibreMap.off('load', this.onLoad);
+        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();
     }
-    /** @private */
-    addSources() {
-        var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !this.sources) {
-            return;
-        }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
-            Object.entries(this.sources).forEach(([id, source]) => {
-                if (!maplibreMap.getSource(id)) {
-                    maplibreMap.addSource(id, source);
-                }
-            });
-        }
-    }
-    /** @private */
-    removeSources() {
-        var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !this.sources) {
-            return;
-        }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
-            Object.keys(this.sources).forEach((id) => {
-                if (maplibreMap.getSource(id)) {
-                    maplibreMap.removeSource(id);
-                }
-            });
-        }
-    }
-    /** @private */
-    addLayers() {
-        var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !Array.isArray(this.layers)) {
-            return;
-        }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
-            this.layers.forEach((layer) => {
-                // @ts-expect-error source is optional but exists in TS definition
-                const { id, source } = layer;
-                if ((!source || (source && maplibreMap.getSource(source))) &&
-                    id &&
-                    !maplibreMap.getLayer(id)) {
-                    maplibreMap.addLayer(layer, this.beforeId);
-                }
-            });
-            this.applyLayoutVisibility();
-        }
-    }
-    /** @private */
-    removeLayers() {
-        var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !Array.isArray(this.layers)) {
-            return;
-        }
-        const { maplibreMap } = this.maplibreLayer;
-        if (maplibreMap) {
-            this.layers.forEach((styleLayer) => {
-                const { id } = styleLayer;
-                if (id && maplibreMap.getLayer(id)) {
-                    maplibreMap.removeLayer(id);
-                }
-            });
-        }
-    }
-    /**
-     * On Maplibre map load callback function. Add style layers and dynaimc filters.
-     * @private
-     */
-    onLoad() {
-        var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap)) {
-            return;
-        }
-        this.addSources();
-        this.addLayers();
-        const { maplibreMap } = this.maplibreLayer;
-        const style = maplibreMap.getStyle();
-        if ((style === null || style === void 0 ? void 0 : style.layers) && this.layersFilter) {
-            const styles = style.layers.filter(this.layersFilter);
-            this.disabled = !styles.length;
-        }
-    }
     /**
      * Request feature information for a given coordinate.
      * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
@@ -275,30 +204,30 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     getFeatureInfoAtCoordinate(coordinate) {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap)) {
+        deprecated(`Deprecated. getFeatureInfoAtCoordinate([layer], coordinate) from ol package instead.`);
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap)) {
             return Promise.resolve({ coordinate, features: [], layer: this });
         }
-        const { maplibreMap } = this.maplibreLayer;
+        const { mapLibreMap } = this.maplibreLayer;
         // Ignore the getFeatureInfo until the Maplibre map is loaded
-        if (!maplibreMap.isStyleLoaded()) {
+        if (!mapLibreMap.isStyleLoaded()) {
             return Promise.resolve({ coordinate, features: [], layer: this });
         }
         // We query features only on style layers used by this layer.
         let layers = this.layers || [];
         if (this.layersFilter) {
-            layers = maplibreMap.getStyle().layers.filter(this.layersFilter);
+            layers = mapLibreMap.getStyle().layers.filter(this.layersFilter);
         }
         if (this.queryRenderedLayersFilter) {
-            // @ts-ignore
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            layers = maplibreMap
+            layers = mapLibreMap
                 .getStyle()
                 .layers.filter(this.queryRenderedLayersFilter);
         }
         return Promise.resolve({
+            coordinate,
             features: [],
             layer: this,
-            coordinate,
         });
         // this.maplibreLayer
         //   .getFeatureInfoAtCoordinate(coordinate, {
@@ -308,7 +237,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         //   .then((featureInfo: LayerGetFeatureInfoResponse) => {
         //     const features: Feature[] = featureInfo.features.filter(
         //       (feature: Feature) => {
-        //         // @ts-ignore
+        //         // @ts-expect-error
         //         return this.featureInfoFilter(
         //           feature,
         //           this.map?.getView().getResolution(),
@@ -319,113 +248,208 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         //     return { ...featureInfo, features, layer: this };
         //   });
     }
-    // /**
-    //  * Set filter that determines which features should be rendered in a style layer.
-    //  * @param {maplibregl.filter} filter Determines which features should be rendered in a style layer.
-    //  */
-    // setFilter(filter: { [key: string]: any }) {
-    //   if (!this.maplibreLayer?.maplibreMap) {
-    //     return;
-    //   }
-    //   const { maplibreMap } = this.maplibreLayer;
-    //   this.styleLayers.forEach(({ id }) => {
-    //     if (id && filter && maplibreMap.getLayer(id)) {
-    //       // @ts-ignore
-    //       maplibreMap.setFilter(id, filter);
-    //     }
-    //   });
-    // }
     /**
-     * Set if features are hovered or not.
-     * @param {Array<ol/Feature~Feature>} features
-     * @param {boolean} state Is the feature hovered
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
      * @private
      */
-    setHoverState(features, state) {
+    highlight(features = []) {
+        var _a;
+        deprecated(`Deprecated. Use layer.setFeatureState(features, {highlighted: true}) instead.`);
+        // Filter out selected features
+        const filtered = ((_a = this.highlightedFeatures) === null || _a === void 0 ? void 0 : _a.filter((feature) => !(this.selectedFeatures || [])
+            .map((feat) => feat.getId())
+            .includes(feature.getId()))) || [];
+        // Remove previous highlight
+        this.setHoverState(filtered, false);
+        this.highlightedFeatures = features;
+        // Add highlight
+        this.setHoverState(this.highlightedFeatures, true);
+    }
+    /**
+     * On Maplibre map load callback function. Add style layers and dynaimc filters.
+     * @private
+     */
+    onLoad() {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap)) {
+            return;
+        }
+        this.addSources();
+        this.addLayers();
+        const { mapLibreMap } = this.maplibreLayer;
+        const style = mapLibreMap.getStyle();
+        if ((style === null || style === void 0 ? void 0 : style.layers) && this.layersFilter) {
+            const styles = style.layers.filter(this.layersFilter);
+            this.set('disabled', !styles.length);
+        }
+        this.applyLayoutVisibility();
+    }
+    /** @private */
+    removeLayers() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !features.length) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
             return;
         }
-        const { maplibreMap } = this.maplibreLayer;
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
+            this.layers.forEach((styleLayer) => {
+                const { id } = styleLayer;
+                if (id && mapLibreMap.getLayer(id)) {
+                    mapLibreMap.removeLayer(id);
+                }
+            });
+        }
+    }
+    /** @private */
+    removeSources() {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
+            return;
+        }
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
+            Object.keys(this.sources).forEach((id) => {
+                if (mapLibreMap.getSource(id)) {
+                    mapLibreMap.removeSource(id);
+                }
+            });
+        }
+    }
+    /**
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * @private
+     */
+    select(features = []) {
+        deprecated(`Deprecated. Use layer.setFeatureState(features, {selected: true}) instead.`);
+        this.setHoverState(this.selectedFeatures || [], false);
+        this.selectedFeatures = features;
+        this.setHoverState(this.selectedFeatures || [], true);
+    }
+    /**
+     * Set the feature state of the features.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {{[key:string]:boolean}} state The feature state
+     * @public
+     */
+    setFeatureState(features, state) {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !features.length) {
+            return;
+        }
+        const { mapLibreMap } = this.maplibreLayer;
         features.forEach((feature) => {
             const { source, sourceLayer } = feature.get(VECTOR_TILE_FEATURE_PROPERTY) || {};
             if ((!source && !sourceLayer) || !feature.getId()) {
                 if (!feature.getId()) {
-                    // eslint-disable-next-line no-console
-                    console.warn("No feature's id found. To use the feature state functionnality, tiles must be generated with --generate-ids. See https://github.com/Maplibre/tippecanoe#adding-calculated-attributes.", feature.getId(), feature.getProperties());
+                    deprecated("No feature's id found. To use the feature state functionnality, tiles must be generated with --generate-ids. See https://github.com/Maplibre/tippecanoe#adding-calculated-attributes.", feature.getProperties());
                 }
                 return;
             }
-            maplibreMap.setFeatureState({
+            mapLibreMap.setFeatureState({
                 id: feature.getId(),
                 source,
                 sourceLayer,
-            }, { hover: state });
+            }, state);
         });
     }
     /**
-     * Select a list of features.
-     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
      * @private
      */
-    select(features = []) {
-        this.setHoverState(this.selectedFeatures || [], false);
-        this.selectedFeatures = features;
-        this.setHoverState(this.selectedFeatures || [], true);
+    setHoverState(features, state) {
+        deprecated(`Deprecated. Use layer.setFeatureState(features, {hover: ${state}}) instead.`);
+        this.setFeatureState(features, { hover: state });
+    }
+    get beforeId() {
+        return this.get('beforeId');
+    }
+    set beforeId(newValue) {
+        this.set('beforeId', newValue);
+    }
+    get layers() {
+        return this.get('layers');
+    }
+    set layers(newValue) {
+        this.set('layers', newValue);
+    }
+    get layersFilter() {
+        return this.get('layersFilter');
+    }
+    set layersFilter(newValue) {
+        this.set('layersFilter', newValue);
+    }
+    get mapboxLayer() {
+        deprecated('Deprecated. Use maplibreLayer instead.');
+        return this.get('maplibreLayer');
+    }
+    get maplibreLayer() {
+        return this.get('maplibreLayer');
+    }
+    set maplibreLayer(newValue) {
+        this.set('maplibreLayer', newValue);
+    }
+    get queryRenderedLayersFilter() {
+        return this.get('queryRenderedLayersFilter');
+    }
+    set queryRenderedLayersFilter(newValue) {
+        this.set('queryRenderedLayersFilter', newValue);
+    }
+    get sources() {
+        return this.get('sources');
+    }
+    // /**
+    //  * Set filter that determines which features should be rendered in a style layer.
+    //  * @param {maplibregl.filter} filter Determines which features should be rendered in a style layer.
+    //  */
+    // setFilter(filter: { [key: string]: any }) {
+    //   if (!this.maplibreLayer?.mapLibreMap) {
+    //     return;
+    //   }
+    //   const { mapLibreMap } = this.maplibreLayer;
+    //   this.styleLayers.forEach(({ id }) => {
+    //     if (id && filter && mapLibreMap.getLayer(id)) {
+    //       // @ts-expect-error
+    //       mapLibreMap.setFilter(id, filter);
+    //     }
+    //   });
+    // }
+    set sources(newValue) {
+        this.set('sources', newValue);
     }
     /**
-     * Highlight a list of features.
-     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
-     * @private
+     * @deprecated
      */
-    highlight(features = []) {
-        var _a;
-        // Filter out selected features
-        const filtered = ((_a = this.highlightedFeatures) === null || _a === void 0 ? void 0 : _a.filter((feature) => !(this.selectedFeatures || [])
-            .map((feat) => feat.getId())
-            .includes(feature.getId()))) || [];
-        // Remove previous highlight
-        this.setHoverState(filtered, false);
-        this.highlightedFeatures = features;
-        // Add highlight
-        this.setHoverState(this.highlightedFeatures, true);
+    get styleLayer() {
+        deprecated('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
+        return this.layers[0];
+    }
+    /**
+     * @deprecated
+     */
+    set styleLayer(newValue) {
+        deprecated('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
+        this.layers = [newValue];
     }
     /**
      * Apply visibility to style layers that fits the styleLayersFilter function.
-     *
-     * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    applyLayoutVisibility(evt) {
-        var _a, _b;
-        if (!((_b = (_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) === null || _b === void 0 ? void 0 : _b.getStyle()) || !this.layersFilter) {
-            return;
-        }
-        const { maplibreMap } = this.maplibreLayer;
-        const style = maplibreMap.getStyle();
-        const visibilityValue = this.getVisible() ? 'visible' : 'none';
-        const layers = style.layers || [];
-        for (let i = 0; i < layers.length; i += 1) {
-            const layer = layers[i];
-            if (this.layersFilter(layer)) {
-                const { id } = layer;
-                if (maplibreMap.getLayer(id)) {
-                    maplibreMap.setLayoutProperty(id, 'visibility', visibilityValue);
-                    if (this.getMinZoom() || this.getMaxZoom()) {
-                        maplibreMap.setLayerZoomRange(id, this.getMinZoom() ? this.getMinZoom() - 1 : 0, // Maplibre zoom = ol zoom - 1
-                        this.getMaxZoom() ? this.getMaxZoom() - 1 : 24);
-                    }
-                }
-            }
-        }
+    /**
+     * @deprecated
+     */
+    get styleLayers() {
+        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
+        return this.layers;
     }
     /**
-     * Create a copy of the MapboxStyleLayer.
-     * @param {Object} newOptions Options to override.
-     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     * @deprecated
      */
-    clone(newOptions) {
-        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    set styleLayers(newValue) {
+        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
+        this.layers = newValue;
     }
 }
 export default MaplibreStyleLayer;