mobility-toolbox-js 2.0.0 → 2.0.1-beta.13

package/ol/layers/MapboxLayer.js

@@ -1,105 +1,57 @@
-/* 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';
-
-/**
- * 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}
- */
+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";
 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';
+          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';
+          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,
+          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]
-        ) {
+        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,
+            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]
-        ) {
+        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
-        ) {
+        if (this.mbMap && this.mbMap.style && this.mbMap.isStyleLoaded() && changed) {
           try {
             if (this.mbMap._frame) {
               this.mbMap._frame.cancel();
@@ -107,209 +59,112 @@ export default class MapboxLayer extends Layer {
             }
             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,
+      olLayer: mbLayer
     });
-
-    /**
-     * 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';
-
-    /** @ignore */
+    this.apiKeyName = options.apiKeyName || "key";
     this.updateAttribution = this.updateAttribution.bind(this);
   }
-
-  /**
-   * Initialize the layer and listen to feature clicks.
-   * @param {ol/Map~Map} map
-   */
-  init(map) {
-    super.init(map);
-
+  attachToMap(map) {
+    super.attachToMap(map);
     if (!this.map || this.mbMap) {
       return;
     }
-
-    /**
-     * The feature format.
-     * @type {ol/format/GeoJSON}
-     */
     this.format = new GeoJSON({
-      featureProjection: this.map.getView().getProjection(),
+      featureProjection: this.map.getView().getProjection()
     });
-
     this.loadMbMap();
-
-    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);
+    this.olListenersKeys.push(this.map.on("change:size", () => {
+      try {
+        if (this.mbMap) {
+          this.mbMap.resize();
         }
-      }),
-    );
+      } catch (err) {
+        console.warn(err);
+      }
+    }));
   }
-
-  /**
-   * Terminate what was initialized in init function. Remove layer, events...
-   */
-  terminate() {
+  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.off("idle", this.updateAttribution);
+      this.mbMap.triggerRepaint = () => {
+      };
       this.mbMap.remove();
       this.mbMap = null;
     }
     this.loaded = false;
-    super.terminate();
+    super.detachFromMap();
   }
-
-  /**
-   * 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();
-      }),
-    );
-
+    this.olListenersKeys.push(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(
-        this.once('change:visible', () => {
-          this.loadMbMap();
-        }),
-      );
+      this.olListenersKeys.push(this.once("change:visible", () => {
+        this.loadMbMap();
+      }));
       return;
     }
-
-    // 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}
-     */
+    const container = document.createElement("div");
+    container.style.position = "absolute";
+    container.style.width = "100%";
+    container.style.height = "100%";
     this.mbMap = new Map({
       style: this.createStyleUrl(),
       container,
       interactive: false,
       trackResize: false,
       attributionControl: false,
-      ...(this.options.mapOptions || {}),
+      ...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],
+      size: [0, 0]
     };
-
-    this.mbMap.once('load', () => {
+    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,
+        type: "load",
+        target: this
       });
     });
-
     const mapboxCanvas = this.mbMap.getCanvas();
     if (mapboxCanvas) {
       if (this.options.tabIndex) {
-        mapboxCanvas.setAttribute('tabindex', 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');
+        mapboxCanvas.removeAttribute("tabindex");
       }
     }
-
-    this.mbMap.on('idle', this.updateAttribution);
+    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()) {
@@ -317,61 +172,31 @@ export default class MapboxLayer extends Layer {
       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, options) {
-    // Ignore the getFeatureInfo until the mapbox map is loaded
-    if (
-      !options ||
-      !this.format ||
-      !this.mbMap ||
-      !this.mbMap.isStyleLoaded()
-    ) {
+    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 },
+        { 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;
-      });
-
+    const features = this.mbMap.queryRenderedFeatures(pixel, options).map((feature) => {
+      const olFeature = this.format.readFeature(feature);
+      if (olFeature) {
+        olFeature.set("mapboxFeature", feature);
+      }
+      return olFeature;
+    });
     return Promise.resolve({
       layer: this,
       features,
-      coordinate,
+      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/MapboxLayer.test.js

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