mobility-toolbox-js 2.0.0-beta.33 → 2.0.0-beta.36

package/ol/layers/Layer.js

@@ -0,0 +1,148 @@
+import { unByKey } from 'ol/Observable';
+import LayerCommon from '../../common/layers/Layer';
+import userInteractionsMixin from '../../common/mixins/UserInteractionsLayerMixin';
+/**
+ * A class representing a layer to display on an OpenLayers map.
+ *
+ * @example
+ * import { Layer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new Layer({
+ *   olLayer: ...,
+ * });
+ *
+ * @see <a href="/example/ol-map">Map example</a>
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class Layer extends userInteractionsMixin(LayerCommon) {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {ol/layer/Layer~Layer} options.olLayer The layer (required).
+     * @param {string} [options.name=uuid()] Layer name. Default use a generated uuid.
+     * @param {string} [options.key=uuid().toLowerCase()] Layer key, will use options.name.toLowerCase() if not specified.
+     * @param {string} [options.copyright=undefined] Copyright-Statement.
+     * @param {Array<Layer>} [options.children=[]] Sublayers.
+     * @param {Object} [options.properties={}] Application-specific layer properties.
+     * @param {boolean} [options.visible=true] If true this layer is the currently visible layer on the map.
+     */
+    constructor(options) {
+        super(options);
+        if (this.olLayer) {
+            this.olLayer.setVisible(this.visible);
+        }
+    }
+    /**
+     * Define layer's properties.
+     *
+     * @ignore
+     */
+    defineProperties(options) {
+        super.defineProperties(options);
+        Object.defineProperties(this, {
+            olLayer: { value: options.olLayer, writable: true },
+            olListenersKeys: {
+                value: [],
+            },
+        });
+    }
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        var _a, _b, _c, _d;
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
+        }
+        if (this.olLayer &&
+            !((_c = (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.getArray()) === null || _c === void 0 ? void 0 : _c.includes(this.olLayer))) {
+            this.map.addLayer(this.olLayer);
+        }
+        this.olListenersKeys.push(this.on('change:visible', () => {
+            if (this.olLayer) {
+                this.olLayer.setVisible(this.visible);
+            }
+        }));
+        this.olListenersKeys.push(this.map.getLayers().on('remove', (evt) => {
+            if (evt.element === this.olLayer) {
+                this.detachFromMap();
+            }
+        }));
+        this.toggleVisibleListeners();
+        this.olListenersKeys.push(this.on('change:visible', this.toggleVisibleListeners));
+        // We set the copyright to the source used by the layer.
+        if (this.copyrights && this.olLayer) {
+            const attributions = this.copyrights || [];
+            if (this.olLayer.getLayers) {
+                this.olLayer
+                    .getLayers()
+                    .getArray()
+                    .forEach((layer) => {
+                    var _a;
+                    (_a = layer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(attributions);
+                });
+            }
+            else if (this.olLayer.getSource) {
+                (_d = this.olLayer.getSource()) === null || _d === void 0 ? void 0 : _d.setAttributions(attributions);
+            }
+        }
+    }
+    /**
+     * Terminate what was initialized in init function. Remove layer, events...
+     */
+    detachFromMap() {
+        var _a, _b, _c;
+        this.deactivateUserInteractions();
+        unByKey(this.olListenersKeys);
+        if (this.olLayer &&
+            ((_c = (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.getArray()) === null || _c === void 0 ? void 0 : _c.includes(this.olLayer))) {
+            this.map.removeLayer(this.olLayer);
+        }
+        super.detachFromMap();
+    }
+    activateUserInteractions() {
+        this.deactivateUserInteractions();
+        if (this.map &&
+            this.userInteractions &&
+            this.userClickInteractions &&
+            this.userClickCallbacks.length) {
+            this.singleClickListenerKey = this.map.on('singleclick', this.onUserClickCallback);
+            this.olListenersKeys.push(this.singleClickListenerKey);
+        }
+        if (this.map &&
+            this.userInteractions &&
+            this.userHoverInteractions &&
+            this.userHoverCallbacks.length) {
+            this.pointerMoveListenerKey = this.map.on('pointermove', this.onUserMoveCallback);
+        }
+    }
+    deactivateUserInteractions() {
+        unByKey([this.pointerMoveListenerKey, this.singleClickListenerKey]);
+    }
+    /**
+     * Toggle listeners needed when a layer is avisible or not.
+     * @private
+     */
+    toggleVisibleListeners() {
+        if (this.visible) {
+            this.activateUserInteractions();
+        }
+        else {
+            this.deactivateUserInteractions();
+        }
+    }
+    /**
+     * Create a copy of the Layer.
+     * @param {Object} newOptions Options to override
+     * @return {Layer} A Layer
+     */
+    clone(newOptions) {
+        return new Layer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}
+export default Layer;

package/ol/layers/MapboxLayer.d.ts

@@ -21,14 +21,14 @@ export default class MapboxLayer extends Layer {
     /** @ignore */
     renderState: {
         center: any[];
-        zoom: any;
-        rotation: any;
-        visible: any;
-        opacity: any;
+        zoom: null;
+        rotation: null;
+        visible: null;
+        opacity: null;
         size: number[];
-    };
+    } | undefined;
     /** @ignore */
-    copyrights: any[];
+    copyrights: any[] | undefined;
     getOlLayerRender(): (frameState: any) => any;
     getMapboxMapClass(): any;
     /**
@@ -36,7 +36,7 @@ export default class MapboxLayer extends Layer {
      * @param {Object} newOptions Options to override
      * @return {MapboxLayer} A MapboxLayer
      */
-    clone(newOptions: any): MapboxLayer;
+    clone(newOptions: Object): MapboxLayer;
 }
 import Layer from "./Layer";
 //# sourceMappingURL=MapboxLayer.d.ts.map

package/ol/layers/MapboxLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapboxLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxLayer.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;GAaG;AACH;IA2BE;;;OAGG;IACH,kBA0CC;IA/BC,cAAc;IACd;;;;;;;MAOC;IAOC,cAAc;IACd,kBAA0D;IAiB9D,6CAEC;IAGD,yBAEC;IAED;;;;OAIG;IACH,wBAFY,WAAW,CAItB;CACF"}
+{"version":3,"file":"MapboxLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxLayer.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;GAaG;AACH;IA2BE;;;OAGG;IACH,kBA0CC;IA/BC,cAAc;IACd;;;;;;;kBAOC;IAOC,cAAc;IACd,8BAA0D;IAiB9D,6CAEC;IAGD,yBAEC;IAED;;;;OAIG;IACH,kBAHW,MAAM,GACL,WAAW,CAItB;CACF"}

package/ol/layers/MapboxLayer.js

@@ -0,0 +1,101 @@
+/* eslint-disable no-underscore-dangle */
+import { Map } from 'mapbox-gl';
+import Layer from './Layer';
+import mixin from '../../common/mixins/MapboxLayerMixin';
+import { getMapboxMapCopyrights, getMapboxRender } from '../../common/utils';
+/**
+ * A class representing Mapboxlayer to display on BasicMap
+ *
+ * @example
+ * import { MapboxLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json',
+ *   apikey: 'yourApiKey',
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+export default class MapboxLayer extends mixin(Layer) {
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (!this.map || this.mbMap) {
+            return;
+        }
+        this.olListenersKeys.push(this.map.on('change:size', () => {
+            try {
+                if (this.mbMap) {
+                    this.mbMap.resize();
+                }
+            }
+            catch (err) {
+                // ignore render errors
+                // eslint-disable-next-line no-console
+                console.warn(err);
+            }
+        }));
+    }
+    /**
+     * Create the mapbox map.
+     * @private
+     */
+    loadMbMap() {
+        // If the map hasn't been resized, the center could be [NaN,NaN].
+        // We set default good value for the mapbox map, to avoid the app crashes.
+        let [x, y] = this.map.getView().getCenter();
+        if (!x || !y) {
+            x = 0;
+            y = 0;
+        }
+        // Options the last render run did happen. If something changes
+        // we have to render again
+        /** @ignore */
+        this.renderState = {
+            center: [x, y],
+            zoom: null,
+            rotation: null,
+            visible: null,
+            opacity: null,
+            size: [0, 0],
+        };
+        super.loadMbMap();
+        this.mbMap.once('load', () => {
+            var _a;
+            this.mbMap.resize();
+            /** @ignore */
+            this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
+            (_a = this.olLayer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(this.copyrights);
+        });
+        const mapboxCanvas = this.mbMap.getCanvas();
+        if (mapboxCanvas) {
+            if (this.options.tabIndex) {
+                mapboxCanvas.setAttribute('tabindex', this.options.tabIndex);
+            }
+            else {
+                // With a tabIndex='-1' the mouse events works but the map is not focused when we click on it
+                // so we remove completely the tabIndex attribute.
+                mapboxCanvas.removeAttribute('tabindex');
+            }
+        }
+    }
+    getOlLayerRender() {
+        return getMapboxRender(this);
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getMapboxMapClass() {
+        return Map;
+    }
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    clone(newOptions) {
+        return new MapboxLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}

package/ol/layers/MapboxStyleLayer.d.ts

@@ -26,8 +26,8 @@ declare class MapboxStyleLayer extends Layer {
      * @param {Function} [options.styleLayersFilter] Filter function to decide which style layer to display.
      */
     constructor(options?: {
-        mapboxLayer?: MapboxLayer;
-        styleLayersFilter?: Function;
+        mapboxLayer?: any;
+        styleLayersFilter?: Function | undefined;
     });
     /**
      * MapboxLayer provided for the style Layer.
@@ -140,7 +140,7 @@ declare class MapboxStyleLayer extends Layer {
      * @param {Object} newOptions Options to override.
      * @return {MapboxStyleLayer} A MapboxStyleLayer.
      */
-    clone(newOptions: any): MapboxStyleLayer;
+    clone(newOptions: Object): MapboxStyleLayer;
 }
 import Layer from "./Layer";
 //# sourceMappingURL=MapboxStyleLayer.d.ts.map

package/ol/layers/MapboxStyleLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapboxStyleLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxStyleLayer.js"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;;;;OAMG;IACH;QAHiC,WAAW;QACd,iBAAiB;OA4F9C;IAvFC;;;;OAIG;IACH,oBAAsC;IAEtC;;OAEG;IACH,kBAAqB;IAErB;;;;OAIG;IACH,0BAAkD;IAElD;;;;;OAKG;IACH,iBAAgC;IAEhC;;;;OAIG;IACH,0BAAoE;IAEpE;;;;OAIG;IACH,kCAAkE;IAElE;;;;OAIG;IACH,4BAA6B;IAE7B;;;;OAIG;IACH,yBAA0B;IAE1B;;;;OAIG;IACH,oBACyE;IAiG3E,cAAc;IACd,uBAcC;IAiBD;;;OAGG;IACH,eAaC;IAtIG,eAAe;IACf,0BAMC;IAgEL;;;;OAIG;IACH,gDAOC;IAmBD,cAAc;IACd,0BAYC;IAqBD;;;;OAIG;IACH,6CAFY,QAAQ,WAAW,CAAC,CAiC/B;IAED;;;OAGG;IACH,yCAYC;IAED;;;;;OAKG;IACH,sBA8BC;IAED;;;;OAIG;IACH,eAIC;IAED;;;;OAIG;IACH,kBAeC;IAED;;;;OAIG;IAEH,8BA8BC;IAED;;;;OAIG;IACH,wBAFY,gBAAgB,CAI3B;CACF"}
+{"version":3,"file":"MapboxStyleLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxStyleLayer.js"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;;;;OAMG;IACH;QAHiC,WAAW;QACd,iBAAiB;OA4F9C;IAvFC;;;;OAIG;IACH,oBAAsC;IAEtC;;OAEG;IACH,kBAAqB;IAErB;;;;OAIG;IACH,0BAAkD;IAElD;;;;;OAKG;IACH,iBAAgC;IAEhC;;;;OAIG;IACH,0BAAoE;IAEpE;;;;OAIG;IACH,kCAAkE;IAElE;;;;OAIG;IACH,4BAA6B;IAE7B;;;;OAIG;IACH,yBAA0B;IAE1B;;;;OAIG;IACH,oBACyE;IAiG3E,cAAc;IACd,uBAcC;IAiBD;;;OAGG;IACH,eAaC;IAtIG,eAAe;IACf,0BAMC;IAgEL;;;;OAIG;IACH,gDAOC;IAmBD,cAAc;IACd,0BAYC;IAqBD;;;;OAIG;IACH,6CAFY,QAAQ,WAAW,CAAC,CAiC/B;IAED;;;OAGG;IACH,yCAYC;IAED;;;;;OAKG;IACH,sBA8BC;IAED;;;;OAIG;IACH,eAIC;IAED;;;;OAIG;IACH,kBAeC;IAED;;;;OAIG;IAEH,8BA8BC;IAED;;;;OAIG;IACH,kBAHW,MAAM,GACL,gBAAgB,CAI3B;CACF"}

package/ol/layers/MapboxStyleLayer.js

@@ -0,0 +1,340 @@
+/* eslint-disable no-param-reassign */
+import Layer from './Layer';
+/**
+ * Layer for visualizing a specific set of layer from a MapboxLayer.
+ *
+ * @example
+ * import { MapboxLayer, MapboxStyleLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const mapboxLayer = new MapboxLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json?key=[yourApiKey]',
+ * });
+ *
+ * const layer = new MapboxStyleLayer({
+ *   mapboxLayer: mapboxLayer,
+ *   styleLayersFilter: () => {},
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class MapboxStyleLayer extends Layer {
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @param {MapboxLayer} [options.mapboxLayer] The MapboxLayer to use.
+     * @param {Function} [options.styleLayersFilter] Filter function to decide which style layer to display.
+     */
+    constructor(options = {}) {
+        super(options);
+        /**
+         * MapboxLayer provided for the style Layer.
+         * @type {MapboxLayer}
+         * @private
+         */
+        this.mapboxLayer = options.mapboxLayer;
+        /**
+         * Define if the layer has data to display in the current mapbox layer.
+         */
+        this.disabled = false;
+        /**
+         * Function to filter features to be displayed.
+         * @type {function}
+         * @private
+         */
+        this.styleLayersFilter = options.styleLayersFilter;
+        /**
+         * Mapbox style layer id where to add the style layers.
+         * See [mapbox.map.addLayer](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer) documentation.
+         * @type {String}
+         * @private
+         */
+        this.beforeId = options.beforeId;
+        /**
+         * Function to filter features for getFeatureInfoAtCoordinate method.
+         * @type {function}
+         * @private
+         */
+        this.featureInfoFilter = options.featureInfoFilter || ((obj) => obj);
+        /**
+         * Function to query the rendered features.
+         * @type {function}
+         * @private
+         */
+        this.queryRenderedLayersFilter = options.queryRenderedLayersFilter;
+        /**
+         * Array of features to highlight.
+         * @type {Array<ol/Feature~Feature>}
+         * @private
+         */
+        this.highlightedFeatures = [];
+        /**
+         * Array of selected features.
+         * @type {Array<ol/Feature~Feature>}
+         * @private
+         */
+        this.selectedFeatures = [];
+        /**
+         * Array of mapbox style layers to add.
+         * @type {Array<mapboxgl.styleLayer>}
+         * @private
+         */
+        this.styleLayers =
+            (options.styleLayer ? [options.styleLayer] : options.styleLayers) || [];
+        /**
+         * @private
+         */
+        this.addStyleLayers = this.addStyleLayers.bind(this);
+        /**
+         * @private
+         */
+        this.onLoad = this.onLoad.bind(this);
+        if (options.filters) {
+            /** @private */
+            this.addDynamicFilters = () => {
+                this.setFilter(typeof options.filters === 'function'
+                    ? options.filters(this)
+                    : options.filters);
+            };
+        }
+        if (!this.styleLayersFilter && this.styleLayers) {
+            const ids = this.styleLayers.map((s) => s.id);
+            this.styleLayersFilter = (styleLayer) => ids.includes(styleLayer.id);
+        }
+    }
+    /**
+     * Initialize the layer.
+     * @param {mapboxgl.Map} map the mapbox map.
+     * @override
+     */
+    attachToMap(map) {
+        if (!this.mapboxLayer.map) {
+            this.mapboxLayer.attachToMap(map);
+        }
+        super.attachToMap(map);
+        if (!this.map) {
+            return;
+        }
+        // Apply the initial visibiltity.
+        const { mbMap } = this.mapboxLayer;
+        if (!mbMap) {
+            // If the mbMap is not yet created because the  map has no target yet, we
+            // relaunch the initialisation when it's the case.
+            this.olListenersKeys.push(this.map.on('change:target', () => {
+                this.attachToMap(map);
+            }));
+            return;
+        }
+        // mbMap.loaded() and mbMap.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 (this.mapboxLayer.loaded || mbMap.isStyleLoaded() || mbMap.loaded()) {
+            this.onLoad();
+        }
+        else {
+            mbMap.once('load', this.onLoad);
+        }
+        // Apply the visibiltity when layer's visibility change.
+        this.olListenersKeys.push(this.on('change:visible', (evt) => {
+            // Once the map is loaded we can apply vsiiblity without waiting
+            // the style. Mapbox take care of the application of style changes.
+            this.applyLayoutVisibility(evt);
+        }));
+        this.olListenersKeys.push(this.mapboxLayer.on('load', () => {
+            this.onLoad();
+        }));
+    }
+    /**
+     * Terminate the layer.
+     * @param {mapboxgl.Map} map the mapbox map.
+     * @override
+     */
+    detachFromMap(map) {
+        const { mbMap } = this.mapboxLayer;
+        if (mbMap) {
+            mbMap.off('load', this.onLoad);
+            this.removeStyleLayers();
+        }
+        super.detachFromMap(map);
+    }
+    /** @ignore */
+    addStyleLayers() {
+        const { mbMap } = this.mapboxLayer;
+        if (!mbMap) {
+            return;
+        }
+        this.styleLayers.forEach((styleLayer) => {
+            const { id, source } = styleLayer;
+            if (mbMap.getSource(source) && !mbMap.getLayer(id)) {
+                mbMap.addLayer(styleLayer, this.beforeId);
+            }
+        });
+        this.applyLayoutVisibility();
+    }
+    /** @ignore */
+    removeStyleLayers() {
+        const { mbMap } = this.mapboxLayer;
+        if (!mbMap) {
+            return;
+        }
+        this.styleLayers.forEach((styleLayer) => {
+            if (mbMap.getLayer(styleLayer.id)) {
+                mbMap.removeLayer(styleLayer.id);
+            }
+        });
+    }
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @ignore
+     */
+    onLoad() {
+        this.addStyleLayers();
+        if (this.addDynamicFilters) {
+            this.addDynamicFilters();
+        }
+        const { mbMap } = this.mapboxLayer;
+        const style = mbMap.getStyle();
+        if (style && this.styleLayersFilter) {
+            const styles = style.layers.filter(this.styleLayersFilter);
+            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.
+     */
+    getFeatureInfoAtCoordinate(coordinate) {
+        const { mbMap } = this.mapboxLayer;
+        // Ignore the getFeatureInfo until the mapbox map is loaded
+        if (!mbMap || !mbMap.isStyleLoaded()) {
+            return Promise.resolve({ coordinate, features: [], layer: this });
+        }
+        // We query features only on style layers used by this layer.
+        let layers = this.styleLayers || [];
+        if (this.styleLayersFilter) {
+            layers = mbMap.getStyle().layers.filter(this.styleLayersFilter);
+        }
+        if (this.queryRenderedLayersFilter) {
+            layers = mbMap.getStyle().layers.filter(this.queryRenderedLayersFilter);
+        }
+        return this.mapboxLayer
+            .getFeatureInfoAtCoordinate(coordinate, {
+            layers: layers.map((layer) => layer && layer.id),
+            validate: false,
+        })
+            .then((featureInfo) => {
+            const features = featureInfo.features.filter((feature) => this.featureInfoFilter(feature, this.map.getView().getResolution()));
+            this.highlight(features);
+            return Object.assign(Object.assign({}, featureInfo), { features, layer: this });
+        });
+    }
+    /**
+     * Set filter that determines which features should be rendered in a style layer.
+     * @param {mapboxgl.filter} filter Determines which features should be rendered in a style layer.
+     */
+    setFilter(filter) {
+        const { mbMap } = this.mapboxLayer;
+        if (!mbMap) {
+            return;
+        }
+        this.styleLayers.forEach(({ id }) => {
+            if (mbMap.getLayer(id)) {
+                mbMap.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) {
+        const { mbMap } = this.mapboxLayer;
+        if (!features || !mbMap) {
+            return;
+        }
+        features.forEach((feature) => {
+            const { source, sourceLayer } = feature.get('mapboxFeature') || {};
+            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/mapbox/tippecanoe#adding-calculated-attributes.", feature.getId(), feature.getProperties());
+                }
+                return;
+            }
+            mbMap.setFeatureState({
+                id: feature.getId(),
+                source,
+                sourceLayer,
+            }, { hover: state });
+        });
+    }
+    /**
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * @private
+     */
+    select(features = []) {
+        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 = []) {
+        // Filter out selected features
+        const filtered = this.highlightedFeatures.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.
+     * @param {Event} evt Layer's event that has called the function.
+     * @private
+     */
+    // eslint-disable-next-line no-unused-vars
+    applyLayoutVisibility(evt) {
+        const { visible } = this;
+        const { mbMap } = this.mapboxLayer;
+        const filterFunc = this.styleLayersFilter;
+        if (!mbMap) {
+            return;
+        }
+        const style = mbMap.getStyle();
+        if (!style) {
+            return;
+        }
+        if (filterFunc) {
+            const visibilityValue = visible ? 'visible' : 'none';
+            for (let i = 0; i < style.layers.length; i += 1) {
+                const styleLayer = style.layers[i];
+                if (filterFunc(styleLayer)) {
+                    if (mbMap.getLayer(styleLayer.id)) {
+                        mbMap.setLayoutProperty(styleLayer.id, 'visibility', visibilityValue);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Create a copy of the MapboxStyleLayer.
+     * @param {Object} newOptions Options to override.
+     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     */
+    clone(newOptions) {
+        return new MapboxStyleLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}
+export default MapboxStyleLayer;

package/ol/layers/MaplibreLayer.d.ts

@@ -20,7 +20,7 @@ export default class MaplibreLayer extends Layer {
      * @param {Object} newOptions Options to override
      * @return {MapboxLayer} A MapboxLayer
      */
-    clone(newOptions: any): MapboxLayer;
+    clone(newOptions: Object): MapboxLayer;
 }
 import Layer from "./Layer";
 import { Map } from "maplibre-gl";

package/ol/layers/MaplibreLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MaplibreLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MaplibreLayer.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;GAaG;AACH;IACE,6CAEC;IAGD,gCAEC;IAED;;;;OAIG;IACH,oCAEC;CACF"}
+{"version":3,"file":"MaplibreLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MaplibreLayer.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;GAaG;AACH;IACE,6CAEC;IAGD,gCAEC;IAED;;;;OAIG;IACH,kBAHW,MAAM,eAKhB;CACF"}