mobility-toolbox-js 2.3.9-beta.1 → 2.3.10

package/src/ol/layers/MapboxStyleLayer.test.js

@@ -0,0 +1,258 @@
+import OlMap from 'ol/Map';
+import View from 'ol/View';
+import gllib from 'maplibre-gl';
+import Layer from './Layer';
+import MaplibreLayer from './MaplibreLayer';
+import MapboxStyleLayer from './MapboxStyleLayer';
+
+let source;
+let layer;
+let map;
+let onClick;
+
+const styleLayer = {
+  id: 'layer',
+};
+
+describe('MapboxStyleLayer', () => {
+  beforeEach(() => {
+    onClick = jest.fn();
+    source = new MaplibreLayer({
+      name: 'Layer',
+      apiKey: 'foo',
+      url: 'https://foo.com/styles',
+    });
+    layer = new MapboxStyleLayer({
+      name: 'mapbox layer',
+      visible: true,
+      mapboxLayer: source,
+      styleLayer,
+      onClick,
+    });
+    map = new OlMap({
+      target: document.createElement('div'),
+      view: new View({ center: [0, 0] }),
+    });
+  });
+
+  afterEach(() => {
+    if (layer.map) {
+      layer.detachFromMap(map);
+    }
+    if (source.map) {
+      source.detachFromMap(map);
+    }
+  });
+
+  test('should be instanced.', () => {
+    expect(layer).toBeInstanceOf(MapboxStyleLayer);
+    expect(layer.styleLayers[0]).toBe(styleLayer);
+  });
+
+  test('should not initalized mapbox map.', () => {
+    layer.attachToMap();
+    expect(layer.mbMap).toBe();
+    layer.detachFromMap();
+  });
+
+  test('should initalized mapbox map.', () => {
+    source.attachToMap(map);
+    layer.attachToMap(map);
+    expect(layer.mapboxLayer.mbMap).toBeInstanceOf(gllib.Map);
+    layer.detachFromMap();
+    source.detachFromMap();
+  });
+
+  test('should called terminate on initalization.', () => {
+    const spy = jest.spyOn(layer, 'detachFromMap');
+    layer.attachToMap();
+    expect(spy).toHaveBeenCalledTimes(1);
+    layer.detachFromMap(map);
+  });
+
+  test('should return coordinates, features and a layer instance.', async () => {
+    source.attachToMap(map);
+    layer.attachToMap(map);
+    const data = await layer.getFeatureInfoAtCoordinate([50, 50]);
+    expect(data.coordinate).toEqual([50, 50]);
+    expect(data.features).toEqual([]);
+    expect(data.layer).toBeInstanceOf(MapboxStyleLayer);
+    layer.detachFromMap(map);
+    source.detachFromMap(map);
+  });
+
+  test('should call onClick callback', async () => {
+    const coordinate = [500, 500];
+    const features = [];
+    const evt = { type: 'singleclick', map, coordinate };
+    layer.attachToMap(map);
+    expect(onClick).toHaveBeenCalledTimes(0);
+    await map.dispatchEvent(evt);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0][0]).toEqual(features);
+    expect(onClick.mock.calls[0][1]).toBe(layer);
+    expect(onClick.mock.calls[0][2]).toBe(coordinate);
+    layer.detachFromMap();
+  });
+
+  test('should call super class terminate function.', () => {
+    layer.attachToMap(map);
+    const spy = jest.spyOn(Layer.prototype, 'detachFromMap');
+    layer.detachFromMap(map);
+    expect(spy).toHaveBeenCalledTimes(1);
+    spy.mockRestore();
+  });
+
+  test('should call super class terminate if the mapboxLayer associated has been terminated before.', () => {
+    layer.attachToMap(map);
+    source.detachFromMap(map);
+    const spy = jest.spyOn(Layer.prototype, 'detachFromMap');
+    layer.detachFromMap(map);
+    expect(spy).toHaveBeenCalledTimes(1);
+    spy.mockRestore();
+  });
+
+  test('should clone', () => {
+    const clone = layer.clone({ name: 'clone' });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe('clone');
+    expect(clone).toBeInstanceOf(MapboxStyleLayer);
+  });
+
+  test('should add layer on load', () => {
+    const style = { layers: [] };
+    layer.mapboxLayer.mbMap = {
+      getStyle: () => style,
+      getSource: () => ({}),
+      getLayer: () => null,
+      setLayoutProperty: () => null,
+      addLayer: (styleLayerr) => style.layers.push(styleLayerr),
+    };
+    layer.onLoad();
+    expect(style.layers[0]).toBe(styleLayer);
+  });
+
+  describe('should set disabled property to false on load', () => {
+    test('when layer uses styleLayer property', () => {
+      const styles = { layers: [] };
+      layer.mapboxLayer.mbMap = {
+        getStyle: () => styles,
+        getSource: () => ({}),
+        getLayer: () => null,
+        setLayoutProperty: () => null,
+        addLayer: (styleLayerr) => styles.layers.push(styleLayerr),
+      };
+      expect(layer).toBeInstanceOf(MapboxStyleLayer);
+      layer.onLoad();
+      expect(layer.disabled).toBe(false);
+    });
+  });
+
+  describe('should set disabled property to true on load', () => {
+    test('when layer uses styleLayersFilter property', () => {
+      const styles = { layers: [styleLayer] };
+      const layer2 = new MapboxStyleLayer({
+        name: 'mapbox layer',
+        mapboxLayer: source,
+        styleLayersFilter: () => false,
+      });
+      layer2.mapboxLayer.mbMap = {
+        getStyle: () => styles,
+        getSource: () => ({}),
+        getLayer: () => null,
+        setLayoutProperty: () => null,
+        addLayer: () => ({}),
+      };
+      layer2.onLoad();
+      expect(layer2.disabled).toBe(true);
+    });
+  });
+
+  describe('#getFeatureInfoAtCoordinate()', () => {
+    beforeEach(() => {
+      source.attachToMap(map);
+      source.mbMap.isStyleLoaded = jest.fn(() => true);
+      source.mbMap.getSource = jest.fn(() => true);
+    });
+    afterEach(() => {
+      source.mbMap.getSource.mockRestore();
+      source.mbMap.isStyleLoaded.mockRestore();
+    });
+
+    test('should request features on layers ids from styleLayers property', () => {
+      source.mbMap.getStyle = jest.fn(() => ({
+        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }],
+      }));
+      layer.attachToMap(map);
+      layer.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
+        Promise.resolve({ features: [] }),
+      );
+      layer.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
+      expect(layer.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith(
+        [0, 0],
+        { layers: ['layer'], validate: false },
+      );
+      layer.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
+      source.mbMap.getStyle.mockRestore();
+    });
+
+    test('should request features on layers ids from styleLayersFilter property', () => {
+      source.mbMap.getStyle = jest.fn(() => ({
+        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }, { id: 'foo2' }],
+      }));
+      const layer2 = new MapboxStyleLayer({
+        name: 'mapbox layer',
+        visible: true,
+        mapboxLayer: source,
+        styleLayer,
+        styleLayersFilter: ({ id }) => /foo/.test(id),
+      });
+      layer2.attachToMap(map);
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
+        Promise.resolve({ features: [] }),
+      );
+      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
+      expect(
+        layer2.mapboxLayer.getFeatureInfoAtCoordinate,
+      ).toHaveBeenCalledWith([0, 0], {
+        layers: ['foo', 'foo2'],
+        validate: false,
+      });
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
+      source.mbMap.getStyle.mockRestore();
+    });
+
+    test('should request features on layers ids from queryRenderedLayersFilter property', () => {
+      source.mbMap.getStyle = jest.fn(() => ({
+        layers: [
+          { id: 'foo' },
+          { id: 'bar2' },
+          { id: 'layer' },
+          { id: 'bar' },
+          { id: 'foo2' },
+        ],
+      }));
+      const layer2 = new MapboxStyleLayer({
+        name: 'mapbox layer',
+        visible: true,
+        mapboxLayer: source,
+        styleLayer,
+        styleLayersFilter: ({ id }) => /foo/.test(id),
+        queryRenderedLayersFilter: ({ id }) => /bar/.test(id),
+      });
+      layer2.attachToMap(map);
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
+        Promise.resolve({ features: [] }),
+      );
+      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
+      expect(
+        layer2.mapboxLayer.getFeatureInfoAtCoordinate,
+      ).toHaveBeenCalledWith([0, 0], {
+        layers: ['bar2', 'bar'],
+        validate: false,
+      });
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
+      source.mbMap.getStyle.mockRestore();
+    });
+  });
+});

package/src/ol/layers/MapboxStyleLayer.ts

@@ -0,0 +1,466 @@
+/* eslint-disable no-param-reassign */
+import { Feature, Map } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { ObjectEvent } from 'ol/Object';
+import { feature } from 'topojson-client';
+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}
+ */
+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) {
+    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: StyleLayer) => {
+        return !!this.styleLayers?.find((sl) => styleLayer.id === sl.id);
+      };
+    }
+  }
+
+  /**
+   * Initialize the layer.
+   * @param {ol/Map~Map} map the mapbox map.
+   * @override
+   */
+  attachToMap(map: Map) {
+    if (this.mapboxLayer && !this.mapboxLayer.map) {
+      this.mapboxLayer?.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() {
+    if (this.mapboxLayer?.mbMap) {
+      const { mbMap } = this.mapboxLayer;
+      mbMap.off('load', this.onLoad);
+      this.removeStyleLayers();
+    }
+    super.detachFromMap();
+  }
+
+  /** @private */
+  addStyleLayers() {
+    if (!this.mapboxLayer?.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() {
+    if (!this.mapboxLayer?.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() {
+    this.addStyleLayers();
+
+    if (this.addDynamicFilters) {
+      this.addDynamicFilters();
+    }
+
+    if (!this.mapboxLayer?.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: Coordinate,
+  ): Promise<LayerGetFeatureInfoResponse> {
+    if (!this.mapboxLayer?.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: { [key: string]: any }) {
+    if (!this.mapboxLayer?.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: Feature[], state: boolean) {
+    if (!this.mapboxLayer?.mbMap) {
+      return;
+    }
+    const { mbMap } = this.mapboxLayer;
+
+    if (!features || !mbMap) {
+      return;
+    }
+
+    features.forEach((feature: 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: Feature[] = []) {
+    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: Feature[] = []) {
+    // Filter out selected features
+    const filtered: Feature[] =
+      this.highlightedFeatures?.filter(
+        (feature) =>
+          !(this.selectedFeatures || [])
+            .map((feat: Feature) => 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?: ObjectEvent) {
+    const { visible } = this;
+    const filterFunc = this.styleLayersFilter;
+
+    if (!this.mapboxLayer?.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: MapboxStyleLayerOptions) {
+    return new MapboxStyleLayer({ ...this.options, ...newOptions });
+  }
+}
+
+export default MapboxStyleLayer;