mobility-toolbox-js 2.3.10 → 2.4.0

package/src/ol/layers/MapGlLayer.ts

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

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

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