mobility-toolbox-js 3.0.0-beta.19 → 3.0.0-beta.20

package/ol/layers/MaplibreStyleLayer.js

@@ -1,8 +1,8 @@
 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';
 /**
  * Layer for visualizing a specific set of layer from a MapboxLayer.
  *
@@ -22,79 +22,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('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
-        return this.layers[0];
-    }
-    /**
-     * @deprecated
-     */
-    set styleLayer(newValue) {
-        // eslint-disable-next-line no-console
-        console.warn('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
-        this.layers = [newValue];
-    }
-    /**
-     * @deprecated
-     */
-    get styleLayers() {
-        // eslint-disable-next-line no-console
-        console.warn('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
-        return this.layers;
-    }
-    /**
-     * @deprecated
-     */
-    set styleLayers(newValue) {
-        // eslint-disable-next-line no-console
-        console.warn('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
-        this.layers = newValue;
-    }
     /**
      * Constructor.
      *
@@ -106,7 +33,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @param {FilterFunction} [options.queryRenderedLayersFilter] Filter function to decide which style layer are available for query.
      */
     constructor(options = {
-        mapLibreOptions: { style: { version: 8, sources: {}, layers: [] } },
+        mapLibreOptions: { style: { layers: [], sources: {}, version: 8 } },
     }) {
         /** Manage renamed property for backward compatibility with v2  */
         if (options.mapboxLayer) {
@@ -130,8 +57,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.
@@ -170,7 +153,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         }
         // Apply the visibiltity when layer's visibility change.
         this.olEventsKeys.push(
-        // @ts-expect-error 'load' is a custom event
+        // @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.
@@ -182,6 +165,17 @@ 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
@@ -195,90 +189,138 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         }
         super.detachFromMap();
     }
-    /** @private */
-    addSources() {
+    /**
+     * 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.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
-            return;
+        // eslint-disable-next-line no-console
+        console.warn(`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;
-        if (mapLibreMap) {
-            Object.entries(this.sources).forEach(([id, source]) => {
-                if (!mapLibreMap.getSource(id)) {
-                    mapLibreMap.addSource(id, source);
-                }
-            });
+        // Ignore the getFeatureInfo until the Maplibre map is loaded
+        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);
+        }
+        if (this.queryRenderedLayersFilter) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            layers = mapLibreMap
+                .getStyle()
+                .layers.filter(this.queryRenderedLayersFilter);
         }
+        return Promise.resolve({
+            coordinate,
+            features: [],
+            layer: this,
+        });
+        // this.maplibreLayer
+        //   .getFeatureInfoAtCoordinate(coordinate, {
+        //     layers: layers.map((layer) => layer && layer.id),
+        //     validate: false,
+        //   })
+        //   .then((featureInfo: LayerGetFeatureInfoResponse) => {
+        //     const features: Feature[] = featureInfo.features.filter(
+        //       (feature: Feature) => {
+        //         // @ts-expect-error
+        //         return this.featureInfoFilter(
+        //           feature,
+        //           this.map?.getView().getResolution(),
+        //         ) as Feature[];
+        //       },
+        //     );
+        //     this.highlight(features);
+        //     return { ...featureInfo, features, layer: this };
+        //   });
     }
-    /** @private */
-    removeSources() {
+    /**
+     * Highlight a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
+     * @private
+     */
+    highlight(features = []) {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
+        // eslint-disable-next-line no-console
+        console.warn(`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;
-        if (mapLibreMap) {
-            Object.keys(this.sources).forEach((id) => {
-                if (mapLibreMap.getSource(id)) {
-                    mapLibreMap.removeSource(id);
-                }
-            });
+        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 */
-    addLayers() {
+    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((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.layers.forEach((styleLayer) => {
+                const { id } = styleLayer;
+                if (id && mapLibreMap.getLayer(id)) {
+                    mapLibreMap.removeLayer(id);
                 }
             });
-            this.applyLayoutVisibility();
         }
     }
     /** @private */
-    removeLayers() {
+    removeSources() {
         var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
             return;
         }
         const { mapLibreMap } = this.maplibreLayer;
         if (mapLibreMap) {
-            this.layers.forEach((styleLayer) => {
-                const { id } = styleLayer;
-                if (id && mapLibreMap.getLayer(id)) {
-                    mapLibreMap.removeLayer(id);
+            Object.keys(this.sources).forEach((id) => {
+                if (mapLibreMap.getSource(id)) {
+                    mapLibreMap.removeSource(id);
                 }
             });
         }
     }
     /**
-     * On Maplibre map load callback function. Add style layers and dynaimc filters.
+     * Select a list of features.
+     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
      * @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();
+    select(features = []) {
+        // eslint-disable-next-line no-console
+        console.warn(`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.
@@ -309,57 +351,53 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         });
     }
     /**
-     * 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.
+     * Set if features are hovered or not.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {boolean} state Is the feature hovered
+     * @private
      */
-    getFeatureInfoAtCoordinate(coordinate) {
-        var _a;
+    setHoverState(features, state) {
         // eslint-disable-next-line no-console
-        console.warn(`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;
-        // Ignore the getFeatureInfo until the Maplibre map is loaded
-        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);
-        }
-        if (this.queryRenderedLayersFilter) {
-            // @ts-ignore
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            layers = mapLibreMap
-                .getStyle()
-                .layers.filter(this.queryRenderedLayersFilter);
-        }
-        return Promise.resolve({
-            features: [],
-            layer: this,
-            coordinate,
-        });
-        // this.maplibreLayer
-        //   .getFeatureInfoAtCoordinate(coordinate, {
-        //     layers: layers.map((layer) => layer && layer.id),
-        //     validate: false,
-        //   })
-        //   .then((featureInfo: LayerGetFeatureInfoResponse) => {
-        //     const features: Feature[] = featureInfo.features.filter(
-        //       (feature: Feature) => {
-        //         // @ts-ignore
-        //         return this.featureInfoFilter(
-        //           feature,
-        //           this.map?.getView().getResolution(),
-        //         ) as Feature[];
-        //       },
-        //     );
-        //     this.highlight(features);
-        //     return { ...featureInfo, features, layer: this };
-        //   });
+        console.warn(`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() {
+        // 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 filter that determines which features should be rendered in a style layer.
@@ -372,87 +410,48 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     //   const { mapLibreMap } = this.maplibreLayer;
     //   this.styleLayers.forEach(({ id }) => {
     //     if (id && filter && mapLibreMap.getLayer(id)) {
-    //       // @ts-ignore
+    //       // @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) {
-        // eslint-disable-next-line no-console
-        console.warn(`Deprecated. Use layer.setFeatureState(features, {hover: ${state}}) instead.`);
-        this.setFeatureState(features, { hover: state });
+    set sources(newValue) {
+        this.set('sources', newValue);
     }
     /**
-     * Select a list of features.
-     * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
-     * @private
+     * @deprecated
      */
-    select(features = []) {
+    get styleLayer() {
         // eslint-disable-next-line no-console
-        console.warn(`Deprecated. Use layer.setFeatureState(features, {selected: true}) instead.`);
-        this.setHoverState(this.selectedFeatures || [], false);
-        this.selectedFeatures = features;
-        this.setHoverState(this.selectedFeatures || [], true);
+        console.warn('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
+        return this.layers[0];
     }
     /**
-     * Highlight a list of features.
-     * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
-     * @private
+     * @deprecated
      */
-    highlight(features = []) {
-        var _a;
+    set styleLayer(newValue) {
         // eslint-disable-next-line no-console
-        console.warn(`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);
+        console.warn('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
+        this.layers = [newValue];
     }
     /**
      * Apply visibility to style layers that fits the styleLayersFilter function.
      */
-    // 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() {
+        // eslint-disable-next-line no-console
+        console.warn('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) {
+        // eslint-disable-next-line no-console
+        console.warn('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
+        this.layers = newValue;
     }
 }
 export default MaplibreStyleLayer;