mobility-toolbox-js 2.0.0 → 2.1.0

package/ol/layers/MapboxLayer.js

@@ -1,12 +1,7 @@
 /* eslint-disable no-underscore-dangle */
-import { toLonLat } from 'ol/proj';
 import { Map } from 'mapbox-gl';
-import Source from 'ol/source/Source';
-import OLLayer from 'ol/layer/Layer';
-import GeoJSON from 'ol/format/GeoJSON';
-import Layer from './Layer';
-import { getMapboxMapCopyrights, getMapboxStyleUrl } from '../../common/utils';
-
+import { getMapboxMapCopyrights, getMapboxRender } from '../../common/utils';
+import MapGlLayer from './MapGlLayer';
 /**
  * A class representing Mapboxlayer to display on BasicMap
  *
@@ -21,358 +16,94 @@ import { getMapboxMapCopyrights, getMapboxStyleUrl } from '../../common/utils';
  * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
  * @extends {Layer}
  */
-export default class MapboxLayer extends Layer {
-  /**
-   * Constructor.
-   *
-   * @param {Object} options
-   * @param {boolean} [options.preserveDrawingBuffer=false] If true able to export the canvas.
-   * @param {number} [options.fadeDuration=300] Duration of the fade effect in ms.
-   */
-  constructor(options = {}) {
-    const mbLayer = new OLLayer({
-      source: new Source({}),
-      render: (frameState) => {
-        if (!this.mbMap) {
-          // eslint-disable-next-line no-console
-          console.warn("Mapbox map doesn't exist.");
-          return null;
-        }
-        let changed = false;
-        const canvas = this.mbMap.getCanvas();
-        const { viewState } = frameState;
-
-        const visible = this.olLayer.getVisible();
-        if (this.renderState.visible !== visible) {
-          canvas.style.display = visible ? 'block' : 'none';
-          this.renderState.visible = visible;
-          // Needed since mapbox-gl 1.9.0.
-          // Without you don't see others ol layers on top.
-          canvas.style.position = 'absolute';
-        }
-
-        const opacity = this.olLayer.getOpacity();
-        if (this.renderState.opacity !== opacity) {
-          canvas.style.opacity = opacity;
-          this.renderState.opacity = opacity;
-        }
-
-        // adjust view parameters in mapbox
-        const { rotation } = viewState;
-        if (this.renderState.rotation !== rotation) {
-          this.mbMap.rotateTo((-(rotation || 0) * 180) / Math.PI, {
-            animate: false,
-          });
-          changed = true;
-          this.renderState.rotation = rotation;
-        }
-
-        if (
-          this.renderState.zoom !== viewState.zoom ||
-          this.renderState.center[0] !== viewState.center[0] ||
-          this.renderState.center[1] !== viewState.center[1]
-        ) {
-          this.mbMap.jumpTo({
-            center: toLonLat(viewState.center),
-            zoom: viewState.zoom - 1,
-            animate: false,
-          });
-          changed = true;
-          this.renderState.zoom = viewState.zoom;
-          this.renderState.center = viewState.center;
-        }
-
-        const size = this.map.getSize();
-        if (
-          this.renderState.size[0] !== size[0] ||
-          this.renderState.size[1] !== size[1]
-        ) {
-          changed = true;
-          this.renderState.size = size;
-        }
-
-        // cancel the scheduled update & trigger synchronous redraw
-        // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
-        // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
-        if (
-          this.mbMap &&
-          this.mbMap.style &&
-          this.mbMap.isStyleLoaded() &&
-          changed
-        ) {
-          try {
-            if (this.mbMap._frame) {
-              this.mbMap._frame.cancel();
-              this.mbMap._frame = null;
-            }
-            this.mbMap._render();
-          } catch (err) {
-            // ignore render errors because it's probably related to
-            // a render during an update of the style.
-            // eslint-disable-next-line no-console
-            console.warn(err);
-          }
-        }
-
-        return this.mbMap.getContainer();
-      },
-    });
-
-    super({
-      ...options,
-      olLayer: mbLayer,
-    });
-
-    /**
-     * Url of the mapbox style.
-     * @type {string}
-     * @private
-     */
-    this.styleUrl = options.url;
-
+export default class MapboxLayer extends MapGlLayer {
     /**
-     * Api key for the url of the mapbox style.
-     * If set to false, the apiKey is not required.
-     * @type {string}
-     * @private
-     */
-    this.apiKey = options.apiKey;
-
-    /**
-     * Name of the apiKey to set in the url request.
-     * Default is 'key'.
-     * @type {string}
-     * @private
+     * Initialize the layer and listen to feature clicks.
+     * @param {ol/Map~Map} map
      */
-    this.apiKeyName = options.apiKeyName || 'key';
-
-    /** @ignore */
-    this.updateAttribution = this.updateAttribution.bind(this);
-  }
-
-  /**
-   * Initialize the layer and listen to feature clicks.
-   * @param {ol/Map~Map} map
-   */
-  init(map) {
-    super.init(map);
-
-    if (!this.map || this.mbMap) {
-      return;
+    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);
+            }
+        }));
     }
-
     /**
-     * The feature format.
-     * @type {ol/format/GeoJSON}
+     * Create the mapbox map.
+     * @private
      */
-    this.format = new GeoJSON({
-      featureProjection: this.map.getView().getProjection(),
-    });
-
-    this.loadMbMap();
-
-    this.olListenersKeys.push(
-      this.map.on('change:size', () => {
-        try {
-          if (this.mbMap) {
+    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
+        /** @ignore */
+        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();
-          }
-        } catch (err) {
-          // ignore render errors
-          // eslint-disable-next-line no-console
-          console.warn(err);
+            /** @ignore */
+            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');
+            }
         }
-      }),
-    );
-  }
-
-  /**
-   * Terminate what was initialized in init function. Remove layer, events...
-   */
-  terminate() {
-    if (this.mbMap) {
-      this.mbMap.off('idle', this.updateAttribution);
-      // Some asynchrone repaints are triggered even if the mbMap has been removed,
-      // to avoid display of errors we set an empty function.
-      this.mbMap.triggerRepaint = () => {};
-      this.mbMap.remove();
-      this.mbMap = null;
     }
-    this.loaded = false;
-    super.terminate();
-  }
-
-  /**
-   * Returns a style URL with apiKey & apiKeyName infos.
-   * @private
-   */
-  createStyleUrl() {
-    return getMapboxStyleUrl(this.apiKey, this.apiKeyName, this.styleUrl);
-  }
-
-  /**
-   * Create the mapbox map.
-   * @private
-   */
-  loadMbMap() {
-    this.olListenersKeys.push(
-      this.map.on('change:target', () => {
-        this.loadMbMap();
-      }),
-    );
-
-    if (!this.map.getTargetElement()) {
-      return;
+    getOlLayerRender() {
+        return getMapboxRender(this);
     }
-
-    if (!this.visible) {
-      // On next change of visibility we load the map
-      this.olListenersKeys.push(
-        this.once('change:visible', () => {
-          this.loadMbMap();
-        }),
-      );
-      return;
+    // eslint-disable-next-line class-methods-use-this
+    getMapboxMapClass() {
+        return Map;
     }
-
-    // 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;
-    }
-
-    const container = document.createElement('div');
-    container.style.position = 'absolute';
-    container.style.width = '100%';
-    container.style.height = '100%';
-
     /**
-     * A mapbox map
-     * @type {mapboxgl.Map}
+     * Create a copy of the MapboxLayer.
+     * @param {Object} newOptions Options to override
+     * @return {MapboxLayer} A MapboxLayer
      */
-    this.mbMap = new Map({
-      style: this.createStyleUrl(),
-      container,
-      interactive: false,
-      trackResize: false,
-      attributionControl: false,
-      ...(this.options.mapOptions || {}),
-    });
-
-    // 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],
-    };
-
-    this.mbMap.once('load', () => {
-      this.mbMap.resize();
-      /**
-       * Is the map loaded.
-       * @type {boolean}
-       */
-      this.loaded = true;
-
-      /** @ignore */
-      this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
-
-      this.olLayer.getSource().setAttributions(this.copyrights);
-
-      this.dispatchEvent({
-        type: 'load',
-        target: this,
-      });
-    });
-
-    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');
-      }
-    }
-
-    this.mbMap.on('idle', this.updateAttribution);
-  }
-
-  /**
-   * Update attributions of the source.
-   * @private
-   */
-  updateAttribution(evt) {
-    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
-    if (this.copyrights.toString() !== newAttributions.toString()) {
-      this.copyrights = newAttributions;
-      this.olLayer.getSource().setAttributions(newAttributions);
+    clone(newOptions) {
+        return new MapboxLayer(Object.assign(Object.assign({}, this.options), newOptions));
     }
-  }
-
-  /**
-   * Request feature information for a given coordinate.
-   * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
-   * @param {Object} options A [mapboxgl.Map#queryrenderedfeatures](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures) options parameter.
-   * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate. The original Mapbox feature is available as a property named 'mapboxFeature'.
-   */
-  getFeatureInfoAtCoordinate(coordinate, options) {
-    // Ignore the getFeatureInfo until the mapbox map is loaded
-    if (
-      !options ||
-      !this.format ||
-      !this.mbMap ||
-      !this.mbMap.isStyleLoaded()
-    ) {
-      return Promise.resolve({ coordinate, features: [], layer: this });
-    }
-
-    let pixel = coordinate && this.mbMap.project(toLonLat(coordinate));
-
-    if (this.hitTolerance) {
-      const { x, y } = pixel;
-      pixel = [
-        { x: x - this.hitTolerance, y: y - this.hitTolerance },
-        { x: x + this.hitTolerance, y: y + this.hitTolerance },
-      ];
-    }
-
-    // At this point we get GeoJSON Mapbox feature, we transform it to an OpenLayers
-    // feature to be consistent with other layers.
-    const features = this.mbMap
-      .queryRenderedFeatures(pixel, options)
-      .map((feature) => {
-        const olFeature = this.format.readFeature(feature);
-        if (olFeature) {
-          // We save the original mapbox feature to avoid losing informations
-          // potentially needed for other functionnality like highlighting
-          // (id, layer id, source, sourceLayer ...)
-          olFeature.set('mapboxFeature', feature);
-        }
-        return olFeature;
-      });
-
-    return Promise.resolve({
-      layer: this,
-      features,
-      coordinate,
-    });
-  }
-
-  /**
-   * Create a copy of the MapboxLayer.
-   * @param {Object} newOptions Options to override
-   * @return {MapboxLayer} A MapboxLayer
-   */
-  clone(newOptions) {
-    return new MapboxLayer({ ...this.options, ...newOptions });
-  }
 }

package/ol/layers/MapboxStyleLayer.d.ts

@@ -0,0 +1,129 @@
+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';
+export type MapboxStyleLayerOptions = OlLayerOptions & {
+    beforeId?: string;
+    mapboxLayer?: AnyMapboxLayer;
+    styleLayer?: {
+        [key: string]: any;
+    };
+    styleLayers?: {
+        [key: string]: any;
+    }[];
+    styleLayersFilter?: FilterFunction;
+    filters?: FilterFunction | {
+        [key: string]: any;
+    }[];
+    featureInfoFilter?: FilterFunction;
+    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;
+    featureInfoFilter?: 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;
+    /** @ignore */
+    addStyleLayers(): void;
+    /** @ignore */
+    removeStyleLayers(): void;
+    /**
+     * On Mapbox map load callback function. Add style layers and dynaimc filters.
+     * @ignore
+     */
+    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;AACxC,OAAO,EAAE,cAAc,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEhD,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,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC,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,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;IA6F5C;;;;OAIG;IACH,WAAW,CAAC,GAAG,EAAE,GAAG;IAoDpB;;;OAGG;IACH,aAAa;IASb,cAAc;IACd,cAAc;IAgBd,cAAc;IACd,iBAAiB;IAcjB;;;OAGG;IACH,MAAM;IAmBN;;;;OAIG;IACH,0BAA0B,CACxB,UAAU,EAAE,UAAU,GACrB,OAAO,CAAC,2BAA2B,CAAC;IA4CvC;;;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"}