mobility-toolbox-js 2.3.10 → 2.3.11

package/ol/layers/MapboxLayer.js

@@ -0,0 +1,109 @@
+/* eslint-disable no-underscore-dangle */
+import { Map } from 'mapbox-gl';
+import { getMapboxMapCopyrights, getMapboxRender } from '../../common/utils';
+import MapGlLayer from './MapGlLayer';
+/**
+ * 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 MapGlLayer {
+    /**
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
+     */
+    attachToMap(map) {
+        super.attachToMap(map);
+        if (!this.map) {
+            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() {
+        var _a;
+        // 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] = ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView().getCenter()) || [];
+        if (!x || !y) {
+            x = 0;
+            y = 0;
+        }
+        // Options the last render run did happen. If something changes
+        // we have to render again
+        /** @private */
+        this.renderState = {
+            center: [x, y],
+            zoom: undefined,
+            rotation: undefined,
+            visible: undefined,
+            opacity: undefined,
+            size: [0, 0],
+        };
+        super.loadMbMap();
+        if (!this.mbMap) {
+            // mbMap could ne bull if the map is not in the dom yet.
+            return;
+        }
+        this.mbMap.once('load', () => {
+            var _a, _b;
+            if (!this.mbMap) {
+                return;
+            }
+            this.mbMap.resize();
+            /** @private */
+            this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
+            // @ts-ignore
+            (_b = (_a = this.olLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.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

@@ -0,0 +1,128 @@
+import { Feature, Map } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { ObjectEvent } from 'ol/Object';
+import { AnyMapboxLayer, LayerGetFeatureInfoResponse } from '../../types';
+import Layer, { OlLayerOptions } from './Layer';
+import { FilterFunction } from '../../common/typedefs';
+export type MapboxStyleLayerOptions = OlLayerOptions & {
+    beforeId?: string;
+    mapboxLayer?: AnyMapboxLayer;
+    styleLayer?: {
+        [key: string]: any;
+    };
+    styleLayers?: {
+        [key: string]: any;
+    }[];
+    styleLayersFilter?: FilterFunction;
+    filters?: FilterFunction | {
+        [key: string]: any;
+    }[];
+    queryRenderedLayersFilter?: FilterFunction;
+};
+export type StyleLayer = {
+    id?: string;
+    [key: string]: any;
+};
+/**
+ * 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}
+ */
+declare class MapboxStyleLayer extends Layer {
+    beforeId?: string;
+    mapboxLayer?: AnyMapboxLayer;
+    styleLayersFilter?: FilterFunction;
+    queryRenderedLayersFilter?: FilterFunction;
+    selectedFeatures?: Feature[];
+    highlightedFeatures?: Feature[];
+    styleLayer?: StyleLayer;
+    styleLayers: StyleLayer[];
+    addDynamicFilters?: () => void;
+    /**
+     * 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: MapboxStyleLayerOptions);
+    /**
+     * Initialize the layer.
+     * @param {ol/Map~Map} map the mapbox map.
+     * @override
+     */
+    attachToMap(map: Map): void;
+    /**
+     * Terminate the layer.
+     * @override
+     */
+    detachFromMap(): void;
+    /** @private */
+    addStyleLayers(): void;
+    /** @private */
+    removeStyleLayers(): void;
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @private
+     */
+    onLoad(): void;
+    /**
+     * 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: Coordinate): Promise<LayerGetFeatureInfoResponse>;
+    /**
+     * 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: {
+        [key: string]: any;
+    }): void;
+    /**
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
+     * @private
+     */
+    setHoverState(features: Feature[], state: boolean): void;
+    /**
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
+     * @private
+     */
+    select(features?: Feature[]): void;
+    /**
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
+     * @private
+     */
+    highlight(features?: Feature[]): void;
+    /**
+     * Apply visibility to style layers that fits the styleLayersFilter function.
+     * @param {Event} evt Layer's event that has called the function.
+     * @private
+     */
+    applyLayoutVisibility(evt?: ObjectEvent): void;
+    /**
+     * Create a copy of the MapboxStyleLayer.
+     * @param {Object} newOptions Options to override.
+     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     */
+    clone(newOptions: MapboxStyleLayerOptions): MapboxStyleLayer;
+}
+export default MapboxStyleLayer;
+//# sourceMappingURL=MapboxStyleLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapboxStyleLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MapboxStyleLayer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,cAAc,GAAG;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,UAAU,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACpC,WAAW,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IACvC,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,cAAc,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IACpD,yBAAyB,CAAC,EAAE,cAAc,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,cAAM,gBAAiB,SAAQ,KAAK;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B,iBAAiB,CAAC,EAAE,cAAc,CAAC;IAEnC,yBAAyB,CAAC,EAAE,cAAc,CAAC;IAE3C,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC;IAE7B,mBAAmB,CAAC,EAAE,OAAO,EAAE,CAAC;IAEhC,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,WAAW,EAAE,UAAU,EAAE,CAAC;IAE1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;;;;;OAMG;gBACS,OAAO,EAAE,uBAAuB;IAsF5C;;;;OAIG;IACH,WAAW,CAAC,GAAG,EAAE,GAAG;IAoDpB;;;OAGG;IACH,aAAa;IASb,eAAe;IACf,cAAc;IAgBd,eAAe;IACf,iBAAiB;IAcjB;;;OAGG;IACH,MAAM;IAmBN;;;;OAIG;IACH,0BAA0B,CACxB,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,2BAA2B,CAAC;IA8BvC;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAcxC;;;;;OAKG;IACH,aAAa,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO;IAmCjD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,GAAE,OAAO,EAAO;IAM/B;;;;OAIG;IACH,SAAS,CAAC,QAAQ,GAAE,OAAO,EAAO;IAkBlC;;;;OAIG;IAEH,qBAAqB,CAAC,GAAG,CAAC,EAAE,WAAW;IAwCvC;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,uBAAuB;CAG1C;AAED,eAAe,gBAAgB,CAAC"}

package/ol/layers/MapboxStyleLayer.js

@@ -0,0 +1,362 @@
+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 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) {
+            this.styleLayersFilter = (styleLayer) => {
+                var _a;
+                return !!((_a = this.styleLayers) === null || _a === void 0 ? void 0 : _a.find((sl) => styleLayer.id === sl.id));
+            };
+        }
+    }
+    /**
+     * Initialize the layer.
+     * @param {ol/Map~Map} map the mapbox map.
+     * @override
+     */
+    attachToMap(map) {
+        var _a;
+        if (this.mapboxLayer && !this.mapboxLayer.map) {
+            (_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.attachToMap(map);
+        }
+        super.attachToMap(map);
+        if (!this.map || !this.mapboxLayer) {
+            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(
+        // @ts-ignore
+        this.on('change:visible', (evt) => {
+            // Once the map is loaded we can apply visiblity without waiting
+            // the style. Mapbox take care of the application of style changes.
+            this.applyLayoutVisibility(evt);
+        }));
+        this.olListenersKeys.push(
+        // @ts-ignore
+        this.mapboxLayer.on('load', () => {
+            this.onLoad();
+        }));
+    }
+    /**
+     * Terminate the layer.
+     * @override
+     */
+    detachFromMap() {
+        var _a;
+        if ((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap) {
+            const { mbMap } = this.mapboxLayer;
+            mbMap.off('load', this.onLoad);
+            this.removeStyleLayers();
+        }
+        super.detachFromMap();
+    }
+    /** @private */
+    addStyleLayers() {
+        var _a;
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return;
+        }
+        const { mbMap } = this.mapboxLayer;
+        this.styleLayers.forEach((styleLayer) => {
+            const { id, source } = styleLayer;
+            if (mbMap.getSource(source) && id && !mbMap.getLayer(id)) {
+                // @ts-ignore
+                mbMap.addLayer(styleLayer, this.beforeId);
+            }
+        });
+        this.applyLayoutVisibility();
+    }
+    /** @private */
+    removeStyleLayers() {
+        var _a;
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return;
+        }
+        const { mbMap } = this.mapboxLayer;
+        this.styleLayers.forEach((styleLayer) => {
+            const { id } = styleLayer;
+            if (id && mbMap.getLayer(id)) {
+                mbMap.removeLayer(id);
+            }
+        });
+    }
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @private
+     */
+    onLoad() {
+        var _a;
+        this.addStyleLayers();
+        if (this.addDynamicFilters) {
+            this.addDynamicFilters();
+        }
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return;
+        }
+        const { mbMap } = this.mapboxLayer;
+        const style = mbMap.getStyle();
+        if (style && this.styleLayersFilter) {
+            // @ts-ignore
+            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) {
+        var _a;
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return Promise.resolve({ coordinate, features: [], layer: this });
+        }
+        const { mbMap } = this.mapboxLayer;
+        // Ignore the getFeatureInfo until the mapbox map is loaded
+        if (!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) {
+            // @ts-ignore
+            layers = mbMap.getStyle().layers.filter(this.styleLayersFilter);
+        }
+        if (this.queryRenderedLayersFilter) {
+            // @ts-ignore
+            layers = mbMap.getStyle().layers.filter(this.queryRenderedLayersFilter);
+        }
+        return this.mapboxLayer.getFeatureInfoAtCoordinate(coordinate, {
+            layers: layers.map((layer) => layer && layer.id),
+            validate: false,
+        });
+    }
+    /**
+     * 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) {
+        var _a;
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return;
+        }
+        const { mbMap } = this.mapboxLayer;
+        this.styleLayers.forEach(({ id }) => {
+            if (id && filter && mbMap.getLayer(id)) {
+                // @ts-ignore
+                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) {
+        var _a;
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return;
+        }
+        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 = []) {
+        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.
+     * @param {Event} evt Layer's event that has called the function.
+     * @private
+     */
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    applyLayoutVisibility(evt) {
+        var _a;
+        const { visible } = this;
+        const filterFunc = this.styleLayersFilter;
+        if (!((_a = this.mapboxLayer) === null || _a === void 0 ? void 0 : _a.mbMap)) {
+            return;
+        }
+        const { mbMap } = this.mapboxLayer;
+        const style = mbMap.getStyle();
+        if (!style) {
+            return;
+        }
+        if (filterFunc) {
+            const visibilityValue = visible ? 'visible' : 'none';
+            const layers = style.layers || [];
+            for (let i = 0; i < layers.length; i += 1) {
+                const styleLayer = layers[i];
+                if (filterFunc(styleLayer)) {
+                    if (mbMap.getLayer(styleLayer.id)) {
+                        mbMap.setLayoutProperty(styleLayer.id, 'visibility', visibilityValue);
+                        if (this.get('minZoom') || this.get('maxZoom')) {
+                            mbMap.setLayerZoomRange(styleLayer.id, this.get('minZoom') ? this.get('minZoom') - 1 : 0, // mapbox zoom = ol zoom - 1
+                            this.get('maxZoom') ? this.get('maxZoom') - 1 : 24);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * 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/{src/ol/layers/MaplibreLayer.ts → ol/layers/MaplibreLayer.d.ts}

@@ -1,7 +1,5 @@
 import { Map } from 'maplibre-gl';
-import { getMaplibreRender } from '../../common/utils';
 import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
-
 /**
  * A class representing MaplibreLayer to display on BasicMap
  *
@@ -17,23 +15,14 @@ import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
  * @extends {Layer}
  */
 export default class MaplibreLayer extends MapGlLayer {
-  mbMap?: maplibregl.Map;
-
-  getOlLayerRender() {
-    return getMaplibreRender(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: MapGlLayerOptions) {
-    return new MaplibreLayer({ ...this.options, ...newOptions });
-  }
+    mbMap?: maplibregl.Map;
+    getOlLayerRender(): import("ol/layer/Layer").RenderFunction;
+    getMapboxMapClass(): typeof Map;
+    /**
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
+     */
+    clone(newOptions: MapGlLayerOptions): MaplibreLayer;
 }
+//# sourceMappingURL=MaplibreLayer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MaplibreLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/MaplibreLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,UAAU,EAAE,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,UAAU;IACnD,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC;IAEvB,gBAAgB;IAKhB,iBAAiB;IAIjB;;;;OAIG;IACH,KAAK,CAAC,UAAU,EAAE,iBAAiB;CAGpC"}

package/ol/layers/MaplibreLayer.js

@@ -0,0 +1,34 @@
+import { Map } from 'maplibre-gl';
+import { getMaplibreRender } from '../../common/utils';
+import MapGlLayer from './MapGlLayer';
+/**
+ * A class representing MaplibreLayer to display on BasicMap
+ *
+ * @example
+ * import { MaplibreLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MaplibreLayer({
+ *   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 MaplibreLayer extends MapGlLayer {
+    getOlLayerRender() {
+        return getMaplibreRender(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 MaplibreLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}