mobility-toolbox-js 2.3.9 → 2.3.10

package/src/ol/layers/MapGlLayer.ts

@@ -0,0 +1,294 @@
+/* eslint-disable max-classes-per-file */
+import { toLonLat } from 'ol/proj';
+import OlLayer, { RenderFunction } from 'ol/layer/Layer';
+import Source from 'ol/source/Source';
+import GeoJSON from 'ol/format/GeoJSON';
+import OlMap from 'ol/Map';
+import { Coordinate } from 'ol/coordinate';
+import BaseEvent from 'ol/events/Event';
+import { Feature } from 'ol';
+import { getUrlWithParams, getMapboxMapCopyrights } from '../../common/utils';
+import {
+  AnyMapboxMap,
+  AnyMapboxMapClass,
+  LayerGetFeatureInfoResponse,
+} from '../../types';
+import Layer, { OlLayerOptions } from './Layer';
+
+export type MapGlLayerOptions = OlLayerOptions & {
+  url?: string;
+  apiKey?: string;
+  apiKeyName?: string;
+  mapOptions?: any;
+  tabIndex?: number;
+};
+
+/**
+ * Common class for Mapbox and Maplibre and potential other fork from Mapbox.
+ * It's used to share code between Mapbox and Maplibre layers without importing both libs.
+ */
+class MapGlLayer extends Layer {
+  mbMap?: AnyMapboxMap;
+
+  styleUrl?: string;
+
+  apiKey?: string;
+
+  apiKeyName!: string;
+
+  format!: GeoJSON;
+
+  loaded!: boolean;
+
+  options!: MapGlLayerOptions;
+
+  constructor(options: MapGlLayerOptions) {
+    super(options);
+
+    this.olLayer = new OlLayer({
+      source: new Source({}),
+      render: this.getOlLayerRender(),
+    });
+
+    /**
+     * Url of the mapbox style.
+     * @type {string}
+     * @private
+     */
+    this.styleUrl = options.url;
+
+    /**
+     * 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
+     */
+    this.apiKeyName = options.apiKeyName || 'key';
+
+    /** @private */
+    this.updateAttribution = this.updateAttribution.bind(this);
+  }
+
+  /**
+   * Initialize the layer and listen to feature clicks.
+   * @param {ol/Map~Map} map
+   */
+  attachToMap(map: OlMap) {
+    super.attachToMap(map);
+
+    if (!this.map) {
+      return;
+    }
+
+    /**
+     * The feature format.
+     * @type {ol/format/GeoJSON}
+     */
+    this.format = new GeoJSON({
+      featureProjection: this.map.getView().getProjection(),
+    });
+
+    this.loadMbMap();
+  }
+
+  /**
+   * Terminate what was initialized in init function. Remove layer, events...
+   */
+  detachFromMap() {
+    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 = undefined;
+    }
+    this.loaded = false;
+    super.detachFromMap();
+  }
+
+  /**
+   * Create the mapbox map.
+   * @private
+   */
+  loadMbMap() {
+    this.olListenersKeys.push(
+      // @ts-ignore
+      this.map?.on('change:target', () => {
+        this.loadMbMap();
+      }),
+    );
+
+    if (!this.map?.getTargetElement()) {
+      return;
+    }
+
+    if (!this.visible) {
+      // On next change of visibility we load the map
+      this.olListenersKeys.push(
+        // @ts-ignore
+        this.once('change:visible', () => {
+          this.loadMbMap();
+        }),
+      );
+      return;
+    }
+
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.width = '100%';
+    container.style.height = '100%';
+
+    if (!this.styleUrl) {
+      // eslint-disable-next-line no-console
+      console.error(`No styleUrl defined for mapbox layer: ${this.styleUrl}`);
+      return;
+    }
+
+    if (!this.apiKey && !this.styleUrl?.includes(this.apiKeyName)) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `No apiKey defined for mapbox layer with style url to ${this.styleUrl}`,
+      );
+    }
+
+    const Map = this.getMapboxMapClass();
+
+    /**
+     * A mapbox map
+     * @type {mapboxgl.Map}
+     */
+    this.mbMap = new Map({
+      style: getUrlWithParams(this.styleUrl, {
+        [this.apiKeyName]: this.apiKey,
+      }).toString(),
+      container,
+      interactive: false,
+      trackResize: false,
+      attributionControl: false,
+      ...(this.options.mapOptions || {}),
+    });
+
+    this.mbMap.once('load', () => {
+      /**
+       * Is the map loaded.
+       * @type {boolean}
+       */
+      this.loaded = true;
+
+      this.dispatchEvent(new BaseEvent('load'));
+    });
+
+    this.mbMap.on('idle', this.updateAttribution);
+  }
+
+  /**
+   * Update attributions of the source.
+   * @private
+   */
+  updateAttribution(evt: maplibregl.MapLibreEvent | mapboxgl.MapboxEvent) {
+    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
+    if (this.copyrights?.toString() !== newAttributions.toString()) {
+      this.copyrights = newAttributions;
+      // @ts-ignore
+      this.olLayer?.getSource()?.setAttributions(newAttributions);
+    }
+  }
+
+  /**
+   * 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: Coordinate,
+    options: any,
+  ): Promise<LayerGetFeatureInfoResponse> {
+    // 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 });
+    }
+
+    const pixel =
+      coordinate &&
+      this.mbMap.project(toLonLat(coordinate) as [number, number]);
+    let pixels: [mapboxgl.PointLike, mapboxgl.PointLike];
+
+    if (this.hitTolerance) {
+      const { x, y } = pixel;
+      pixels = [
+        {
+          x: x - this.hitTolerance,
+          y: y - this.hitTolerance,
+        } as mapboxgl.PointLike,
+        {
+          x: x + this.hitTolerance,
+          y: y + this.hitTolerance,
+        } as mapboxgl.PointLike,
+      ];
+    }
+
+    // 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
+      // @ts-ignore
+      .queryRenderedFeatures(pixels || pixel, options)
+      .map((feature) => {
+        const olFeature = this.format.readFeature(feature) as 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,
+    } as LayerGetFeatureInfoResponse);
+  }
+
+  /**
+   * Return the render function function for the ol layer.
+   *
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getOlLayerRender(): RenderFunction {
+    // eslint-disable-next-line no-console
+    console.error('This function must be implemented in subclasses');
+    const div = document.createElement('div');
+    return () => div;
+  }
+
+  /**
+   * Return the Class to instanciate for the mapbox map.
+   *
+   * @return {mapboxgl.Map|maplibregl.Map} map
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getMapboxMapClass(): AnyMapboxMapClass {
+    // eslint-disable-next-line no-console
+    console.error('This function must be implemented in subclasses');
+    // @ts-ignore
+    return null;
+  }
+}
+
+export default MapGlLayer;

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

@@ -0,0 +1,190 @@
+import OlMap from 'ol/Map';
+import View from 'ol/View';
+import gllib from 'mapbox-gl';
+import MapboxLayer from './MapboxLayer';
+
+let layer;
+let map;
+let consoleOutput;
+const styleUrl = 'http://foo.com/styles';
+
+describe('MapboxLayer', () => {
+  describe('without apiKey', () => {
+    beforeEach(() => {
+      // Mock console statement
+      consoleOutput = [];
+      // eslint-disable-next-line no-console
+      console.error = (message) => consoleOutput.push(message);
+      layer = new MapboxLayer({
+        name: 'Layer',
+        url: styleUrl,
+      });
+      map = new OlMap({
+        target: document.createElement('div'),
+        view: new View({ center: [0, 0] }),
+      });
+    });
+
+    test('should be instanced.', () => {
+      expect(layer).toBeInstanceOf(MapboxLayer);
+      expect(layer.styleUrl).toBe(styleUrl);
+    });
+
+    test('should not initalized mapbox map.', () => {
+      layer.attachToMap();
+      expect(layer.mbMap).toBe();
+    });
+
+    test('should initalized mapbox map and warn the user if there is no api key defined.', () => {
+      layer.attachToMap(map);
+      expect(layer.mbMap).toBeInstanceOf(gllib.Map);
+      expect(consoleOutput[0]).toBe(
+        'No apiKey defined for mapbox layer with style url to http://foo.com/styles',
+      );
+    });
+
+    test('should called terminate on initalization.', () => {
+      const spy = jest.spyOn(layer, 'detachFromMap');
+      layer.attachToMap();
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    test('should clone', () => {
+      const clone = layer.clone({ name: 'clone' });
+      expect(clone).not.toBe(layer);
+      expect(clone.name).toBe('clone');
+      expect(clone).toBeInstanceOf(MapboxLayer);
+    });
+  });
+
+  describe('with apiKey', () => {
+    beforeEach(() => {
+      layer = new MapboxLayer({
+        name: 'Layer',
+        url: styleUrl,
+        apiKey: 'apiKey',
+      });
+      map = new OlMap({
+        target: document.createElement('div'),
+        view: new View({ center: [0, 0] }),
+      });
+    });
+
+    test('should be instanced with apiKey.', () => {
+      expect(layer).toBeInstanceOf(MapboxLayer);
+      expect(layer.styleUrl).toBe(styleUrl);
+    });
+
+    test('should not initalized mapbox map.', () => {
+      layer.attachToMap();
+      expect(layer.mbMap).toBe();
+    });
+
+    test("should initalized mapbox map, with 'apiKey' prop", () => {
+      const layer1 = new MapboxLayer({
+        name: 'Layer',
+        url: styleUrl,
+        apiKey: 'apiKeyVal',
+      });
+      layer1.attachToMap(map);
+      expect(layer1.mbMap.options.style).toBe(
+        'http://foo.com/styles?key=apiKeyVal',
+      );
+    });
+
+    test("should initalized mapbox map, with 'apiKeyName' prop", () => {
+      const layer1 = new MapboxLayer({
+        name: 'Layer',
+        url: styleUrl,
+        apiKey: 'test',
+        apiKeyName: 'apiKey',
+      });
+      layer1.attachToMap(map);
+      expect(layer1.mbMap.options.style).toBe(
+        'http://foo.com/styles?apiKey=test',
+      );
+    });
+  });
+
+  describe('#getFeatureInfoAtCoordinate()', () => {
+    let layer1;
+    beforeEach(() => {
+      layer1 = new MapboxLayer({
+        name: 'Layer',
+        url: styleUrl,
+        apiKey: 'test',
+        apiKeyName: 'apiKey',
+      });
+      layer1.attachToMap(map);
+      layer1.mbMap.isStyleLoaded = jest.fn(() => true);
+      layer1.mbMap.getSource = jest.fn(() => true);
+    });
+
+    afterEach(() => {
+      layer1.mbMap.getSource.mockRestore();
+      layer1.mbMap.isStyleLoaded.mockRestore();
+    });
+
+    test('should set the mapboxFeature as a property', (done) => {
+      const mapboxFeature = {
+        id: '2',
+        type: 'Feature',
+        properties: {
+          foo: 'bar',
+        },
+        source: 'barr',
+        sourceLayer: 'fooo',
+      };
+      layer1.mbMap.project = jest.fn((coord) => ({ x: coord[0], y: coord[1] }));
+      layer1.mbMap.queryRenderedFeatures = jest.fn(() => [mapboxFeature]);
+      layer1.getFeatureInfoAtCoordinate([0, 0], {}).then((featureInfo) => {
+        expect(featureInfo.features[0].get('mapboxFeature')).toBe(
+          mapboxFeature,
+        );
+        done();
+      });
+      layer1.mbMap.project.mockRestore();
+      layer1.mbMap.queryRenderedFeatures.mockRestore();
+    });
+    describe('should use hitTolerance property', () => {
+      beforeEach(() => {
+        layer1.mbMap.project = jest.fn((coord) => ({
+          x: coord[0],
+          y: coord[1],
+        }));
+      });
+
+      afterEach(() => {
+        layer1.mbMap.project.mockRestore();
+        layer1.mbMap.queryRenderedFeatures.mockRestore();
+      });
+
+      test('when hitTolerance is not set', (done) => {
+        layer1.mbMap.queryRenderedFeatures = jest.fn((pixelBounds) => {
+          // Use default hoitTolerance
+          expect(pixelBounds).toEqual([
+            { x: -5, y: -5 },
+            { x: 5, y: 5 },
+          ]);
+          done();
+          return [];
+        });
+        layer1.getFeatureInfoAtCoordinate([0, 0], {});
+      });
+
+      test('when hitTolerance is set to 10', (done) => {
+        layer1.hitTolerance = 10;
+        layer1.mbMap.queryRenderedFeatures = jest.fn((pixelBounds) => {
+          // Use default hoitTolerance
+          expect(pixelBounds).toEqual([
+            { x: -10, y: -10 },
+            { x: 10, y: 10 },
+          ]);
+          done();
+          return [];
+        });
+        layer1.getFeatureInfoAtCoordinate([0, 0], {});
+      });
+    });
+  });
+});

package/src/ol/layers/MapboxLayer.ts

@@ -0,0 +1,136 @@
+/* eslint-disable no-underscore-dangle */
+import { Map } from 'mapbox-gl';
+import { Coordinate } from 'ol/coordinate';
+import type OlMap from 'ol/Map';
+import { Size } from 'ol/size';
+import { getMapboxMapCopyrights, getMapboxRender } from '../../common/utils';
+import MapGlLayer, { MapGlLayerOptions } from './MapGlLayer';
+
+/**
+ * A class representing Mapboxlayer to display on BasicMap
+ *
+ * @example
+ * import { MapboxLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MapboxLayer({
+ *   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 MapboxLayer extends MapGlLayer {
+  renderState?: {
+    center?: Coordinate;
+    zoom?: number;
+    visible?: boolean;
+    opacity?: number;
+    resolution?: number;
+    rotation?: number;
+    size?: Size;
+  };
+
+  tabIndex?: number;
+
+  /**
+   * Initialize the layer and listen to feature clicks.
+   * @param {ol/Map~Map} map
+   */
+  attachToMap(map: OlMap) {
+    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);
+        }
+      }),
+    );
+  }
+
+  /**
+   * Create the mapbox map.
+   * @private
+   */
+  loadMbMap() {
+    // 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;
+    }
+
+    // Options the last render run did happen. If something changes
+    // we have to render again
+    /** @private */
+    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', () => {
+      if (!this.mbMap) {
+        return;
+      }
+      this.mbMap.resize();
+
+      /** @private */
+      this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
+
+      // @ts-ignore
+      this.olLayer?.getSource()?.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');
+      }
+    }
+  }
+
+  getOlLayerRender() {
+    return getMapboxRender(this);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getMapboxMapClass() {
+    return Map;
+  }
+
+  /**
+   * Create a copy of the MapboxLayer.
+   * @param {Object} newOptions Options to override
+   * @return {MapboxLayer} A MapboxLayer
+   */
+  clone(newOptions: MapGlLayerOptions) {
+    return new MapboxLayer({ ...this.options, ...newOptions });
+  }
+}