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

package/mapbox/layers/Layer.test.js

@@ -1,202 +1,182 @@
-import { Map } from 'maplibre-gl';
-import { toLonLat } from 'ol/proj';
-import Layer from './Layer';
-
+import { Map } from "maplibre-gl";
+import { toLonLat } from "ol/proj";
+import Layer from "./Layer";
 let map;
 let mapElement;
-
-describe('Layer', () => {
+describe("Layer", () => {
   beforeEach(() => {
-    mapElement = document.createElement('div');
+    mapElement = document.createElement("div");
     const { style } = mapElement;
-    style.position = 'absolute';
-    style.left = '0px';
-    style.top = '0px';
-    style.width = '400px';
-    style.height = '400px';
-    mapElement.setAttribute('id', 'map');
+    style.position = "absolute";
+    style.left = "0px";
+    style.top = "0px";
+    style.width = "400px";
+    style.height = "400px";
+    mapElement.setAttribute("id", "map");
     document.body.appendChild(mapElement);
     map = new Map({
-      container: document.getElementById('map'),
+      container: document.getElementById("map"),
       style: `path/to/style`,
       center: toLonLat([831634, 5933959]),
-      zoom: 9,
+      zoom: 9
     });
   });
-
   afterEach(() => {
     document.body.removeChild(mapElement);
   });
-
-  test('should initialize.', () => {
-    const layer = new Layer({ name: 'Layer' });
+  test("should initialize.", () => {
+    const layer = new Layer({ name: "Layer" });
     expect(layer).toBeInstanceOf(Layer);
   });
-
-  test('should be visible by default.', () => {
-    const layer = new Layer({ name: 'Layer' });
+  test("should be visible by default.", () => {
+    const layer = new Layer({ name: "Layer" });
     expect(layer.visible).toBe(true);
   });
-
-  test('should be invisible if defined.', () => {
-    const layer = new Layer({ name: 'Layer', visible: false });
+  test("should be invisible if defined.", () => {
+    const layer = new Layer({ name: "Layer", visible: false });
     expect(layer.visible).toBe(false);
   });
-
-  test('should be invisible if set.', () => {
-    const layer = new Layer({ name: 'Layer' });
+  test("should be invisible if set.", () => {
+    const layer = new Layer({ name: "Layer" });
     layer.setVisible(false);
     expect(layer.visible).toBe(false);
   });
-
-  test('should visibility stay unchanged', () => {
-    const layer = new Layer({ name: 'Layer', visible: false });
+  test("should visibility stay unchanged", () => {
+    const layer = new Layer({ name: "Layer", visible: false });
     layer.setVisible(false);
     expect(layer.visible).toBe(false);
   });
-
-  test('should return its name.', () => {
-    const layer = new Layer({ name: 'Layer', visible: false });
-    expect(layer.name).toEqual('Layer');
+  test("should return its name.", () => {
+    const layer = new Layer({ name: "Layer", visible: false });
+    expect(layer.name).toEqual("Layer");
   });
-
-  test('should call terminate on initialization.', () => {
-    const layer = new Layer({ name: 'Layer' });
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init(map);
+  test("should call terminate on initialization.", () => {
+    const layer = new Layer({ name: "Layer" });
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap(map);
     expect(spy).toHaveBeenCalledTimes(1);
   });
-
-  test('should listen for click/hover events when layer is visible by default then should not when hidden.', async () => {
+  test("should listen for click/hover events when layer is visible by default then should not when hidden.", async () => {
     global.console.error = jest.fn();
-    const layer = new Layer({ name: 'Layer' });
+    const layer = new Layer({ name: "Layer" });
     expect(layer.visible).toBe(true);
     const spy = jest.fn();
     const spy2 = jest.fn();
-    layer.init(map);
+    layer.attachToMap(map);
     layer.onHover(spy);
     layer.onClick(spy2);
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
-
-    await map.fire('mousemove', {
-      type: 'mousemove',
+    await map.fire("mousemove", {
+      type: "mousemove",
       lngLat: { toArray: () => [0, 0] },
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
-    await map.fire('click', {
-      type: 'click',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
     });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     spy.mockReset();
     spy2.mockReset();
-
     layer.setVisible(false);
-    await map.fire('mousemove', {
-      type: 'mousemove',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] }
     });
-    await map.fire('click', {
-      type: 'click',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
     });
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
     global.console.error.mockRestore();
   });
-
-  test('should not listen for click/hover events when layer is not visible by default then should not when visible.', async () => {
+  test("should not listen for click/hover events when layer is not visible by default then should not when visible.", async () => {
     global.console.error = jest.fn();
-    const layer = new Layer({ name: 'Layer', visible: false });
+    const layer = new Layer({ name: "Layer", visible: false });
     expect(layer.visible).toBe(false);
     const spy = jest.fn();
     const spy2 = jest.fn();
-    layer.init(map);
+    layer.attachToMap(map);
     layer.onHover(spy);
     layer.onClick(spy2);
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
-
-    await map.fire('mousemove', {
-      type: 'mousemove',
+    await map.fire("mousemove", {
+      type: "mousemove",
       lngLat: { toArray: () => [0, 0] },
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
-    await map.fire('click', {
-      type: 'click',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
     });
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
     spy.mockReset();
     spy2.mockReset();
-
     layer.setVisible(true);
-    await map.fire('mousemove', {
-      type: 'mousemove',
+    await map.fire("mousemove", {
+      type: "mousemove",
       lngLat: { toArray: () => [0, 0] },
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
-    await map.fire('click', {
-      type: 'click',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
     });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     global.console.error.mockRestore();
   });
-
-  test('should not listen for click/hover events  after layer.terminate()', async () => {
+  test("should not listen for click/hover events  after layer.detachFromMap()", async () => {
     global.console.error = jest.fn();
-    const layer = new Layer({ name: 'Layer', visible: true });
+    const layer = new Layer({ name: "Layer", visible: true });
     expect(layer.visible).toBe(true);
     const spy = jest.fn();
     const spy2 = jest.fn();
-    layer.init(map);
+    layer.attachToMap(map);
     layer.onHover(spy);
     layer.onClick(spy2);
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
-
-    await map.fire('mousemove', {
-      type: 'mousemove',
+    await map.fire("mousemove", {
+      type: "mousemove",
       lngLat: { toArray: () => [0, 0] },
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
-    await map.fire('click', {
-      type: 'click',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
     });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     spy.mockReset();
     spy2.mockReset();
-
-    layer.terminate(map);
-    await map.fire('mousemove', {
-      type: 'mousemove',
+    layer.detachFromMap(map);
+    await map.fire("mousemove", {
+      type: "mousemove",
       lngLat: { toArray: () => [0, 0] },
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
-    await map.fire('click', {
-      type: 'click',
-      lngLat: { toArray: () => [0, 0] },
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
     });
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
     global.console.error.mockRestore();
   });
-
-  test('should clone', () => {
+  test("should clone", () => {
     const layer = new Layer({
-      name: 'Layer',
-      copyrights: ['bar'],
+      name: "Layer",
+      copyrights: ["bar"]
     });
-    const clone = layer.clone({ name: '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(Layer);
   });
 });

package/mapbox/layers/TralisLayer.js

@@ -1,110 +1,61 @@
-import { fromLonLat } from 'ol/proj';
-import { unByKey } from 'ol/Observable';
-import { getWidth, getHeight } from 'ol/extent';
-import transformRotate from '@turf/transform-rotate';
-import { point } from '@turf/helpers';
-import mixin from '../../common/mixins/TralisLayerMixin';
-import Layer from './Layer';
-import { getSourceCoordinates, getMercatorResolution } from '../utils';
-
-/**
- * Responsible for loading and display data from a Tralis service.
- *
- * @example
- * import { TralisLayer } from 'mobility-toolbox-js/mapbox';
- *
- * const layer = new TralisLayer({
- *   url: [yourUrl],
- *   apiKey: [yourApiKey],
- * });
- *
- *
- * @see <a href="/api/class/src/api/tralis/TralisAPI%20js~TralisAPI%20html">TralisAPI</a>
- *
- * @extends {Layer}
- * @implements {TralisLayerInterface}
- */
+import { fromLonLat } from "ol/proj";
+import { unByKey } from "ol/Observable";
+import { getWidth, getHeight } from "ol/extent";
+import transformRotate from "@turf/transform-rotate";
+import { point } from "@turf/helpers";
+import mixin from "../../common/mixins/TralisLayerMixin";
+import Layer from "./Layer";
+import { getSourceCoordinates, getMercatorResolution } from "../utils";
 class TralisLayer extends mixin(Layer) {
   constructor(options = {}) {
     super({
-      ...options,
+      ...options
     });
-
-    /** @ignore */
     this.onLoad = this.onLoad.bind(this);
-
-    /** @ignore */
     this.onMove = this.onMove.bind(this);
-
-    /** @ignore */
     this.onMoveEnd = this.onMoveEnd.bind(this);
-
-    /** @ignore */
     this.onZoomEnd = this.onZoomEnd.bind(this);
-
-    /** @ignore */
     this.onVisibilityChange = this.onVisibilityChange.bind(this);
   }
-
-  /**
-   * Initialize the layer.
-   *
-   * @param {mapboxgl.Map} map A [mapbox Map](https://docs.mapbox.com/mapbox-gl-js/api/map/).
-   * @param {string} beforeId Layer's id before which we want to add the new layer.
-   * @override
-   */
-  init(map, beforeId) {
+  attachToMap(map, beforeId) {
     if (!map) {
       return;
     }
-
     const canvas = map.getCanvas();
-
-    super.init(map, {
+    super.attachToMap(map, {
       width: canvas.width / this.pixelRatio,
-      height: canvas.height / this.pixelRatio,
+      height: canvas.height / this.pixelRatio
     });
-
     this.source = {
-      type: 'canvas',
+      type: "canvas",
       canvas: this.tracker.canvas,
       coordinates: getSourceCoordinates(map, this.pixelRatio),
-      // Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
       animate: true,
-      attribution: this.copyrights && this.copyrights.join(', '),
+      attribution: this.copyrights && this.copyrights.join(", ")
     };
-
     this.beforeId = beforeId;
     this.layer = {
       id: this.key,
-      type: 'raster',
+      type: "raster",
       source: this.key,
       layout: {
-        visibility: this.visible ? 'visible' : 'none',
+        visibility: this.visible ? "visible" : "none"
       },
       paint: {
-        'raster-opacity': 1,
-        'raster-fade-duration': 0,
-        'raster-resampling': 'nearest', // important otherwise it looks blurry
-      },
+        "raster-opacity": 1,
+        "raster-fade-duration": 0,
+        "raster-resampling": "nearest"
+      }
     };
-
     if (map.isStyleLoaded()) {
       this.onLoad();
     }
-
-    this.map.on('load', this.onLoad);
-
-    this.listeners = [this.on('change:visible', this.onVisibilityChange)];
+    this.map.on("load", this.onLoad);
+    this.listeners = [this.on("change:visible", this.onVisibilityChange)];
   }
-
-  /**
-   * Remove listeners from the Mapbox Map.
-   */
-  terminate() {
+  detachFromMap() {
     if (this.map) {
-      this.map.off('load', this.onLoad);
-
+      this.map.off("load", this.onLoad);
       this.listeners.forEach((listener) => {
         unByKey(listener);
       });
@@ -115,38 +66,22 @@ class TralisLayer extends mixin(Layer) {
         this.map.removeSource(this.key);
       }
     }
-    super.terminate();
+    super.detachFromMap();
   }
-
-  /**
-   * Start updating vehicles position.
-   *
-   * @listens {mapboxgl.map.event:zoomend} Listen to zoom end event.
-   * @listens {mapboxgl.map.event:mousemove} Listen to mousemove end.
-   * @override
-   */
   start() {
     super.start();
-
-    this.map.on('move', this.onMove);
-    this.map.on('moveend', this.onMoveEnd);
-    this.map.on('zoomend', this.onZoomEnd);
+    this.map.on("move", this.onMove);
+    this.map.on("moveend", this.onMoveEnd);
+    this.map.on("zoomend", this.onZoomEnd);
   }
-
-  /**
-   * Stop updating vehicles position, and unlisten events.
-   *
-   * @override
-   */
   stop() {
     super.stop();
     if (this.map) {
-      this.map.off('move', this.onMove);
-      this.map.off('moveend', this.onMoveEnd);
-      this.map.off('zoomend', this.onZoomEnd);
+      this.map.off("move", this.onMove);
+      this.map.off("moveend", this.onMoveEnd);
+      this.map.off("zoomend", this.onZoomEnd);
     }
   }
-
   onLoad() {
     if (!this.map.getSource(this.key)) {
       this.map.addSource(this.key, this.source);
@@ -155,66 +90,36 @@ class TralisLayer extends mixin(Layer) {
       this.map.addLayer(this.layer, this.beforeId);
     }
   }
-
-  /**
-   * Function triggered when the user click the map.
-   * @override
-   */
   onUserClickCallback(evt) {
     super.onUserClickCallback({
       coordinate: fromLonLat(evt.lngLat.toArray()),
-      ...evt,
+      ...evt
     });
   }
-
-  /**
-   * Function triggered when the user moves the cursor over the map.
-   * @override
-   */
   onUserMoveCallback(evt) {
     super.onUserMoveCallback({
       coordinate: fromLonLat(evt.lngLat.toArray()),
-      ...evt,
+      ...evt
     });
   }
-
-  /**
-   * Render the trajectories using current map's size, resolution and rotation.
-   * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
-   * @overrides
-   */
   renderTrajectories(noInterpolate) {
     const { width, height } = this.map.getCanvas();
     const center = this.map.getCenter();
-
-    // We use turf here to have good transform.
     const leftBottom = this.map.unproject({
       x: 0,
-      y: height / this.pixelRatio,
-    }); // southWest
-    const rightTop = this.map.unproject({ x: width / this.pixelRatio, y: 0 }); // north east
-
-    const coord0 = transformRotate(
-      point([leftBottom.lng, leftBottom.lat]),
-      -this.map.getBearing(),
-      {
-        pivot: [center.lng, center.lat],
-      },
-    ).geometry.coordinates;
-    const coord1 = transformRotate(
-      point([rightTop.lng, rightTop.lat]),
-      -this.map.getBearing(),
-      {
-        pivot: [center.lng, center.lat],
-      },
-    ).geometry.coordinates;
-
+      y: height / this.pixelRatio
+    });
+    const rightTop = this.map.unproject({ x: width / this.pixelRatio, y: 0 });
+    const coord0 = transformRotate(point([leftBottom.lng, leftBottom.lat]), -this.map.getBearing(), {
+      pivot: [center.lng, center.lat]
+    }).geometry.coordinates;
+    const coord1 = transformRotate(point([rightTop.lng, rightTop.lat]), -this.map.getBearing(), {
+      pivot: [center.lng, center.lat]
+    }).geometry.coordinates;
     const bounds = [...fromLonLat(coord0), ...fromLonLat(coord1)];
     const xResolution = getWidth(bounds) / (width / this.pixelRatio);
     const yResolution = getHeight(bounds) / (height / this.pixelRatio);
     const res = Math.max(xResolution, yResolution);
-
-    // Coordinate of trajectories are in mercator so we have to pass the proper resolution and center in mercator.
     const viewState = {
       size: [width / this.pixelRatio, height / this.pixelRatio],
       center: fromLonLat([center.lng, center.lat]),
@@ -222,57 +127,30 @@ class TralisLayer extends mixin(Layer) {
       resolution: res,
       zoom: this.map.getZoom(),
       rotation: -(this.map.getBearing() * Math.PI) / 180,
-      pixelRatio: this.pixelRatio,
+      pixelRatio: this.pixelRatio
     };
-
     super.renderTrajectories(viewState, noInterpolate);
   }
-
-  /**
-   * Return the delay in ms before the next rendering.
-   */
   getRefreshTimeInMs() {
     return super.getRefreshTimeInMs(this.map.getZoom());
   }
-
   getFeatureInfoAtCoordinate(coordinate, options = {}) {
     const resolution = getMercatorResolution(this.map);
     return super.getFeatureInfoAtCoordinate(coordinate, {
       resolution,
-      ...options,
+      ...options
     });
   }
-
   onVisibilityChange() {
     if (this.visible && !this.map.getLayer(this.key)) {
       this.map.addLayer(this.layer, this.beforeId);
     } else if (this.map.getLayer(this.key)) {
       this.map.removeLayer(this.key);
     }
-    // We can't use setLayoutProperty it triggers an error probably a bug in mapbox
-    // this.map.setLayoutProperty(
-    //   this.key,
-    //   'visibilty',
-    //   this.visible ? 'visible' : 'none',
-    // );
   }
-
-  /**
-   * Remove the trajectory form the list if necessary.
-   *
-   * @private
-   */
   purgeTrajectory(trajectory, extent, zoom) {
-    return super.purgeTrajectory(
-      trajectory,
-      extent || this.getMercatorExtent(),
-      zoom || Math.floor(this.map.getZoom() + 1),
-    );
+    return super.purgeTrajectory(trajectory, extent || this.getMercatorExtent(), zoom || Math.floor(this.map.getZoom() + 1));
   }
-
-  /**
-   * Send the current bbox to the websocket
-   */
   setBbox(extent, zoom) {
     let newExtent = extent;
     let newZoom = zoom;
@@ -282,12 +160,6 @@ class TralisLayer extends mixin(Layer) {
     }
     super.setBbox(newExtent, newZoom);
   }
-
-  /**
-   * Callback on 'move' event.
-   *
-   * @private
-   */
   onMove() {
     const extent = getSourceCoordinates(this.map, this.pixelRatio);
     const source = this.map.getSource(this.key);
@@ -296,34 +168,15 @@ class TralisLayer extends mixin(Layer) {
     }
     this.renderTrajectories();
   }
-
-  /**
-   * Send the new BBOX to the websocket.
-   *
-   * @param {ol/MapEvent~MapEvent} evt Moveend event
-   * @private
-   * @override
-   */
   onMoveEnd() {
     this.renderTrajectories();
-
     if (this.visible && this.isUpdateBboxOnMoveEnd) {
       this.setBbox();
     }
   }
-
-  /**
-   * Update the cursor style when hovering a vehicle.
-   *
-   * @private
-   * @override
-   */
   onFeatureHover(features, layer, coordinate) {
     super.onFeatureHover(features, layer, coordinate);
-    this.map.getCanvasContainer().style.cursor = features.length
-      ? 'pointer'
-      : 'auto';
+    this.map.getCanvasContainer().style.cursor = features.length ? "pointer" : "auto";
   }
 }
-
 export default TralisLayer;