mobility-toolbox-js 3.0.0-beta.8 → 3.0.0

package/ol/layers/MaplibreStyleLayer.js

@@ -1,27 +1,41 @@
+import debounce from 'lodash.debounce';
 import { Layer } from 'ol/layer';
+import { unByKey } from 'ol/Observable';
 import { Source } from 'ol/source';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
-import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
 import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
+import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
+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.
+ * Layer that helps show/hide a specific subset of style layers of a [MaplibreLayer](./MaplibreLayer.js~MaplibreLayer.html).
  *
  * @example
- * import { MapboxLayer, MapboxStyleLayer } from 'mobility-toolbox-js/ol';
+ * import { MaplibreLayer, MaplibreStyleLayer } from 'mobility-toolbox-js/ol';
  *
- * const maplibreLayer = new MapboxLayer({
- *   url: 'https://maps.geops.io/styles/travic_v2/style.json?key=[yourApiKey]',
+ * const maplibreLayer = new MaplibreLayer({
+ *   apiKey: 'yourApiKey',
  * });
  *
- * const layer = new MapboxStyleLayer({
+ * const layer = new MaplibreStyleLayer({
  *   maplibreLayer: maplibreLayer,
- *   styleLayersFilter: () => {},
+ *   layersFilter: (layer) => {
+ *     // show/hide only style layers related to stations
+ *     return /station/.test(layer.id);
+ *   },
  * });
  *
- * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @see <a href="/example/ol-maplibre-style-layer">OpenLayers MaplibreStyle layer example</a>
  * @extends {ol/layer/Layer~Layer}
+ * @public
  */
-class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
+class MaplibreStyleLayer extends Layer {
     get beforeId() {
         return this.get('beforeId');
     }
@@ -40,9 +54,11 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     set layersFilter(newValue) {
         this.set('layersFilter', newValue);
     }
+    /**
+     * @deprecated Use MaplibreStyleLayer.maplibreLayer instead.
+     */
     get mapboxLayer() {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use maplibreLayer instead.');
+        deprecated('Deprecated. Use maplibreLayer instead.');
         return this.get('maplibreLayer');
     }
     get maplibreLayer() {
@@ -64,54 +80,82 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         this.set('sources', newValue);
     }
     /**
-     * @deprecated
+     * @deprecated Use MaplibreStyleLayer.layer instead.
      */
     get styleLayer() {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
+        deprecated('Deprecated. Use MaplibreStyleLayer.layer instead.');
         return this.layers[0];
     }
     /**
      * @deprecated
      */
     set styleLayer(newValue) {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
+        deprecated('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
         this.layers = [newValue];
     }
+    /**
+     * Apply visibility to style layers that fits the styleLayersFilter function.
+     */
     /**
      * @deprecated
      */
     get styleLayers() {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
+        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
         return this.layers;
     }
     /**
      * @deprecated
      */
     set styleLayers(newValue) {
-        // eslint-disable-next-line no-console
-        console.warn('Deprecated. Use layers instead.');
+        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
         this.layers = newValue;
     }
     /**
      * Constructor.
      *
      * @param {Object} options
-     * @param {MapboxLayer} [options.maplibreLayer] The MaplibreLayer to use.
-     * @param {maplibregl.SourceSpecification[]} [options.sources] The source to add to the style on load.
+     * @param {string} [options.beforeId] The style layer id to use when the options.layers property is defined, unsused otherwise.
      * @param {maplibregl.AddLayerObject[]} [options.layers] The layers to add to the style on load.
      * @param {FilterFunction} [options.layersFilter] Filter function to decide which style layer to apply visiblity on. If not provided, the 'layers' property is used.
+     * @param {MaplibreLayer} [options.maplibreLayer] The MaplibreLayer to use.
      * @param {FilterFunction} [options.queryRenderedLayersFilter] Filter function to decide which style layer are available for query.
+     * @param {{[id: string]:maplibregl.SourceSpecification}} [options.sources] The sources to add to the style on load.
+     * @public
      */
-    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;
+        }
+        if (options.styleLayers) {
+            deprecated('options.styleLayers is deprecated. Use options.layers instead.');
+            // eslint-disable-next-line no-param-reassign
+            options.layers = options.styleLayers;
+            // eslint-disable-next-line no-param-reassign
+            delete options.styleLayers;
+        }
+        if (options.styleLayersFilter) {
+            deprecated('options.styleLayersFilter is deprecated. Use options.layersFilter instead.');
+            // eslint-disable-next-line no-param-reassign
+            options.layersFilter = options.styleLayersFilter;
+            // eslint-disable-next-line no-param-reassign
+            delete options.styleLayersFilter;
+        }
+        super(Object.assign({ source: new Source({}) }, options));
         this.highlightedFeatures = [];
+        this.olEventsKeys = [];
         this.selectedFeatures = [];
-        /**
-         * @private
-         */
+        // 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) {
             this.layersFilter = (layer) => {
@@ -119,8 +163,62 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             };
         }
     }
-    createRenderer() {
-        return new MaplibreStyleLayerRenderer(this);
+    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();
+        }
+    }
+    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.
@@ -128,38 +226,38 @@ 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 ther e is no target element the maplibreMap is not yet created, we
+        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.olListenersKeys.push(this.map.on('change:target', () => {
+            this.olEventsKeys.push(mapInternal.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 form mobility-toolbox-js
+        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.
@@ -169,136 +267,77 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
                 this.detachFromMap();
                 this.attachToMap(map);
             }
+        }), 
+        // When the style changes we wait that it is loaded to relaunch the onLoad
+        this.maplibreLayer.on('propertychange', (evt) => {
+            if (evt.key === 'style') {
+                evt.target.maplibreMap.once('styledata', () => {
+                    evt.target.maplibreMap.once('idle', () => {
+                        this.onLoad();
+                    });
+                });
+            }
         }));
     }
+    /**
+     * Create a copy of the MaplibreStyleLayer.
+     *
+     * @param {Object} newOptions Options to override. See constructor.
+     * @return {MapboxStyleLayer} A MaplibreStyleLayer.
+     * @public
+     */
+    clone(newOptions) {
+        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.get('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);
+        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();
-    }
-    /** @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.
      * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+     * @deprecated Use getFeatureInfoAtCoordinate([layer], coordinate) from mobility-toolbox-ol package instead.
      */
     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);
+            console.log(layers);
         }
         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 +347,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 +358,145 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         //     return { ...featureInfo, features, layer: this };
         //   });
     }
+    /**
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
+     * @deprecated Use layer.setFeatureState(features, {hover: true|false}) instead.
+     */
+    highlight(features = []) {
+        var _a;
+        deprecated(`Deprecated. Use layer.setFeatureState(features, {hover: 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.
+     */
+    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();
+    }
+    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);
+                }
+            });
+        }
+    }
     // /**
     //  * 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) {
+    //   if (!this.maplibreLayer?.mapLibreMap) {
     //     return;
     //   }
-    //   const { maplibreMap } = this.maplibreLayer;
+    //   const { mapLibreMap } = this.maplibreLayer;
     //   this.styleLayers.forEach(({ id }) => {
-    //     if (id && filter && maplibreMap.getLayer(id)) {
-    //       // @ts-ignore
-    //       maplibreMap.setFilter(id, filter);
+    //     if (id && filter && mapLibreMap.getLayer(id)) {
+    //       // @ts-expect-error
+    //       mapLibreMap.setFilter(id, filter);
     //     }
     //   });
     // }
-    /**
-     * Set if features are hovered or not.
-     * @param {Array<ol/Feature~Feature>} features
-     * @param {boolean} state Is the feature hovered
-     * @private
-     */
-    setHoverState(features, state) {
+    removeSources() {
         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) || !this.sources) {
             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());
+        const { mapLibreMap } = this.maplibreLayer;
+        if (mapLibreMap) {
+            Object.keys(this.sources).forEach((id) => {
+                if (mapLibreMap.getSource(id)) {
+                    mapLibreMap.removeSource(id);
                 }
-                return;
-            }
-            maplibreMap.setFeatureState({
-                id: feature.getId(),
-                source,
-                sourceLayer,
-            }, { hover: state });
-        });
+            });
+        }
     }
     /**
      * Select a list of features.
      * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
-     * @private
+     * @deprecated Use layer.setFeatureState(features, {selected: true|false}) instead.
      */
     select(features = []) {
+        deprecated(`Deprecated. Use layer.setFeatureState(features, {selected: true}) instead.`);
         this.setHoverState(this.selectedFeatures || [], false);
         this.selectedFeatures = features;
         this.setHoverState(this.selectedFeatures || [], true);
     }
     /**
-     * Highlight a list of features.
-     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
-     * @private
-     */
-    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);
-    }
-    /**
-     * Apply visibility to style layers that fits the styleLayersFilter function.
+     * Set the [feature state](https://maplibre.org/maplibre-style-spec/expressions/#feature-state) of the features.
      *
-     * @private
+     * @param {ol/Feature~Feature[]} features
+     * @param {{[key: string]: any}} state The feature state
+     * @public
      */
-    // 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) {
+    setFeatureState(features, state) {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !features.length) {
             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);
-                    }
+        const mapLibreMap = this.maplibreLayer.mapLibreMap;
+        features.forEach((feature) => {
+            const { source, sourceLayer } = feature.get(VECTOR_TILE_FEATURE_PROPERTY) || {};
+            if ((!source && !sourceLayer) || !feature.getId()) {
+                if (!feature.getId()) {
+                    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({
+                id: feature.getId(),
+                source,
+                sourceLayer,
+            }, state);
+        });
     }
     /**
-     * Create a copy of the MapboxStyleLayer.
-     * @param {Object} newOptions Options to override.
-     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
+     * @deprecated Use layer.setFeatureState(features, {hover: true|false}) instead.
      */
-    clone(newOptions) {
-        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    setHoverState(features, state) {
+        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);
+        }
     }
 }
 export default MaplibreStyleLayer;