mobility-toolbox-js 2.0.1-beta.13 → 2.1.0

package/ol/layers/MapboxStyleLayer.js

@@ -1,187 +1,378 @@
-import Layer from "./Layer";
+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(options = {}) {
-    super(options);
-    this.mapboxLayer = options.mapboxLayer;
-    this.disabled = false;
-    this.styleLayersFilter = options.styleLayersFilter;
-    this.beforeId = options.beforeId;
-    this.featureInfoFilter = options.featureInfoFilter || ((obj) => obj);
-    this.queryRenderedLayersFilter = options.queryRenderedLayersFilter;
-    this.highlightedFeatures = [];
-    this.selectedFeatures = [];
-    this.styleLayers = (options.styleLayer ? [options.styleLayer] : options.styleLayers) || [];
-    this.addStyleLayers = this.addStyleLayers.bind(this);
-    this.onLoad = this.onLoad.bind(this);
-    if (options.filters) {
-      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);
-    }
-  }
-  attachToMap(map) {
-    if (!this.mapboxLayer.map) {
-      this.mapboxLayer.attachToMap(map);
-    }
-    super.attachToMap(map);
-    if (!this.map) {
-      return;
-    }
-    const { mbMap } = this.mapboxLayer;
-    if (!mbMap) {
-      this.olListenersKeys.push(this.map.on("change:target", () => {
-        this.attachToMap(map);
-      }));
-      return;
-    }
-    if (this.mapboxLayer.loaded || mbMap.isStyleLoaded() || mbMap.loaded()) {
-      this.onLoad();
-    } else {
-      mbMap.once("load", this.onLoad);
-    }
-    this.olListenersKeys.push(this.on("change:visible", (evt) => {
-      this.applyLayoutVisibility(evt);
-    }));
-    this.olListenersKeys.push(this.mapboxLayer.on("load", () => {
-      this.onLoad();
-    }));
-  }
-  detachFromMap(map) {
-    const { mbMap } = this.mapboxLayer;
-    if (mbMap) {
-      mbMap.off("load", this.onLoad);
-      this.removeStyleLayers();
+    /**
+     * 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) {
+            this.styleLayersFilter = (styleLayer) => {
+                var _a;
+                return !!((_a = this.styleLayers) === null || _a === void 0 ? void 0 : _a.find((sl) => styleLayer.id === sl.id));
+            };
+        }
     }
-    super.detachFromMap(map);
-  }
-  addStyleLayers() {
-    const { mbMap } = this.mapboxLayer;
-    if (!mbMap) {
-      return;
+    /**
+     * 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();
+        }));
     }
-    this.styleLayers.forEach((styleLayer) => {
-      const { id, source } = styleLayer;
-      if (mbMap.getSource(source) && !mbMap.getLayer(id)) {
-        mbMap.addLayer(styleLayer, this.beforeId);
-      }
-    });
-    this.applyLayoutVisibility();
-  }
-  removeStyleLayers() {
-    const { mbMap } = this.mapboxLayer;
-    if (!mbMap) {
-      return;
+    /**
+     * 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();
     }
-    this.styleLayers.forEach((styleLayer) => {
-      if (mbMap.getLayer(styleLayer.id)) {
-        mbMap.removeLayer(styleLayer.id);
-      }
-    });
-  }
-  onLoad() {
-    this.addStyleLayers();
-    if (this.addDynamicFilters) {
-      this.addDynamicFilters();
+    /** @ignore */
+    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();
     }
-    const { mbMap } = this.mapboxLayer;
-    const style = mbMap.getStyle();
-    if (style && this.styleLayersFilter) {
-      const styles = style.layers.filter(this.styleLayersFilter);
-      this.disabled = !styles.length;
+    /** @ignore */
+    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);
+            }
+        });
     }
-  }
-  getFeatureInfoAtCoordinate(coordinate) {
-    const { mbMap } = this.mapboxLayer;
-    if (!mbMap || !mbMap.isStyleLoaded()) {
-      return Promise.resolve({ coordinate, features: [], layer: this });
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @ignore
+     */
+    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;
+        }
     }
-    let layers = this.styleLayers || [];
-    if (this.styleLayersFilter) {
-      layers = mbMap.getStyle().layers.filter(this.styleLayersFilter);
+    /**
+     * 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,
+        })
+            .then((featureInfo) => {
+            const features = featureInfo.features.filter((feature) => {
+                var _a;
+                // @ts-ignore
+                return this.featureInfoFilter(feature, (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView().getResolution());
+            });
+            this.highlight(features);
+            return Object.assign(Object.assign({}, featureInfo), { features, layer: this });
+        });
     }
-    if (this.queryRenderedLayersFilter) {
-      layers = mbMap.getStyle().layers.filter(this.queryRenderedLayersFilter);
+    /**
+     * 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);
+            }
+        });
     }
-    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 { ...featureInfo, features, layer: this };
-    });
-  }
-  setFilter(filter) {
-    const { mbMap } = this.mapboxLayer;
-    if (!mbMap) {
-      return;
+    /**
+     * 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 });
+        });
     }
-    this.styleLayers.forEach(({ id }) => {
-      if (mbMap.getLayer(id)) {
-        mbMap.setFilter(id, filter);
-      }
-    });
-  }
-  setHoverState(features, state) {
-    const { mbMap } = this.mapboxLayer;
-    if (!features || !mbMap) {
-      return;
+    /**
+     * 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);
     }
-    features.forEach((feature) => {
-      const { source, sourceLayer } = feature.get("mapboxFeature") || {};
-      if (!source && !sourceLayer || !feature.getId()) {
-        if (!feature.getId()) {
-          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(features = []) {
-    this.setHoverState(this.selectedFeatures, false);
-    this.selectedFeatures = features;
-    this.setHoverState(this.selectedFeatures, true);
-  }
-  highlight(features = []) {
-    const filtered = this.highlightedFeatures.filter((feature) => !this.selectedFeatures.map((feat) => feat.getId()).includes(feature.getId()));
-    this.setHoverState(filtered, false);
-    this.highlightedFeatures = features;
-    this.setHoverState(this.highlightedFeatures, true);
-  }
-  applyLayoutVisibility(evt) {
-    const { visible } = this;
-    const { mbMap } = this.mapboxLayer;
-    const filterFunc = this.styleLayersFilter;
-    if (!mbMap) {
-      return;
+    /**
+     * 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);
     }
-    const style = mbMap.getStyle();
-    if (!style) {
-      return;
+    /**
+     * 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);
+                        }
+                    }
+                }
+            }
+        }
     }
-    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));
     }
-  }
-  clone(newOptions) {
-    return new MapboxStyleLayer({ ...this.options, ...newOptions });
-  }
 }
 export default MapboxStyleLayer;

package/ol/layers/MaplibreLayer.d.ts

@@ -0,0 +1,28 @@
+import { Map } from 'maplibre-gl';
+import MapGlLayer, { MapGlLayerOptions } 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 {
+    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"}