mobility-toolbox-js 2.3.10 → 2.4.0

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

@@ -1,258 +0,0 @@
-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

@@ -1,466 +0,0 @@
-/* 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;