mobility-toolbox-js 2.0.0-beta.1 → 2.0.0

package/mapbox/controls/CopyrightControl.js

@@ -6,7 +6,8 @@ import { getMapboxMapCopyrights } from '../../common/utils';
  * Display layer's copyrights.
  *
  * @example
- * import { Map, CopyrightControl } from 'mobility-toolbox-js/mapbox';
+ * import { Map } from 'mapbox-gl';
+ * import { CopyrightControl } from 'mobility-toolbox-js/mapbox';
  *
  * const map = new Map({
  *   container: 'map',
@@ -16,6 +17,9 @@ import { getMapboxMapCopyrights } from '../../common/utils';
  *   ]
  * });
  *
+ * const control = new CopyrightControl();
+ * control.map = map;
+ *
  *
  * @see <a href="/example/mb-copyright">Mapbox copyright example</a>
  *

package/mapbox/index.js

@@ -1,5 +1,3 @@
 // eslint-disable-next-line import/prefer-default-export
-export { default as Map } from './Map';
 export { default as TralisLayer } from './layers/TralisLayer';
-export { default as TrajservLayer } from './layers/TrajservLayer';
 export { default as CopyrightControl } from './controls/CopyrightControl';

package/mapbox/layers/Layer.test.js

@@ -1,4 +1,4 @@
-import maplibre from 'maplibre-gl';
+import { Map } from 'maplibre-gl';
 import { toLonLat } from 'ol/proj';
 import Layer from './Layer';
 
@@ -16,7 +16,7 @@ describe('Layer', () => {
     style.height = '400px';
     mapElement.setAttribute('id', 'map');
     document.body.appendChild(mapElement);
-    map = new maplibre.Map({
+    map = new Map({
       container: document.getElementById('map'),
       style: `path/to/style`,
       center: toLonLat([831634, 5933959]),

package/mapbox/layers/TralisLayer.js

@@ -1,5 +1,11 @@
-import TrackerLayer from './TrackerLayer';
+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.
@@ -15,10 +21,242 @@ import mixin from '../../common/mixins/TralisLayerMixin';
  *
  * @see <a href="/api/class/src/api/tralis/TralisAPI%20js~TralisAPI%20html">TralisAPI</a>
  *
- * @extends {TrackerLayer}
+ * @extends {Layer}
  * @implements {TralisLayerInterface}
  */
-class TralisLayer extends mixin(TrackerLayer) {
+class TralisLayer extends mixin(Layer) {
+  constructor(options = {}) {
+    super({
+      ...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) {
+    if (!map) {
+      return;
+    }
+
+    const canvas = map.getCanvas();
+
+    super.init(map, {
+      width: canvas.width / this.pixelRatio,
+      height: canvas.height / this.pixelRatio,
+    });
+
+    this.source = {
+      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(', '),
+    };
+
+    this.beforeId = beforeId;
+    this.layer = {
+      id: this.key,
+      type: 'raster',
+      source: this.key,
+      layout: {
+        visibility: this.visible ? 'visible' : 'none',
+      },
+      paint: {
+        'raster-opacity': 1,
+        'raster-fade-duration': 0,
+        'raster-resampling': 'nearest', // important otherwise it looks blurry
+      },
+    };
+
+    if (map.isStyleLoaded()) {
+      this.onLoad();
+    }
+
+    this.map.on('load', this.onLoad);
+
+    this.listeners = [this.on('change:visible', this.onVisibilityChange)];
+  }
+
+  /**
+   * Remove listeners from the Mapbox Map.
+   */
+  terminate() {
+    if (this.map) {
+      this.map.off('load', this.onLoad);
+
+      this.listeners.forEach((listener) => {
+        unByKey(listener);
+      });
+      if (this.map.getLayer(this.key)) {
+        this.map.removeLayer(this.key);
+      }
+      if (this.map.getSource(this.key)) {
+        this.map.removeSource(this.key);
+      }
+    }
+    super.terminate();
+  }
+
+  /**
+   * 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);
+  }
+
+  /**
+   * 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);
+    }
+  }
+
+  onLoad() {
+    if (!this.map.getSource(this.key)) {
+      this.map.addSource(this.key, this.source);
+    }
+    if (!this.map.getLayer(this.key)) {
+      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,
+    });
+  }
+
+  /**
+   * Function triggered when the user moves the cursor over the map.
+   * @override
+   */
+  onUserMoveCallback(evt) {
+    super.onUserMoveCallback({
+      coordinate: fromLonLat(evt.lngLat.toArray()),
+      ...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;
+
+    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]),
+      extent: bounds,
+      resolution: res,
+      zoom: this.map.getZoom(),
+      rotation: -(this.map.getBearing() * Math.PI) / 180,
+      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,
+    });
+  }
+
+  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.
    *
@@ -45,6 +283,20 @@ class TralisLayer extends mixin(TrackerLayer) {
     super.setBbox(newExtent, newZoom);
   }
 
+  /**
+   * Callback on 'move' event.
+   *
+   * @private
+   */
+  onMove() {
+    const extent = getSourceCoordinates(this.map, this.pixelRatio);
+    const source = this.map.getSource(this.key);
+    if (source) {
+      source.setCoordinates(extent);
+    }
+    this.renderTrajectories();
+  }
+
   /**
    * Send the new BBOX to the websocket.
    *
@@ -52,13 +304,26 @@ class TralisLayer extends mixin(TrackerLayer) {
    * @private
    * @override
    */
-  onMoveEnd(evt) {
-    super.onMoveEnd(evt);
+  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';
+  }
 }
 
 export default TralisLayer;

package/mapbox/layers/TralisLayer.test.js

@@ -0,0 +1,40 @@
+import TralisLayer from './TralisLayer';
+
+let layer;
+let onClick;
+
+describe('TralisLayer', () => {
+  beforeEach(() => {
+    onClick = jest.fn();
+    layer = new TralisLayer({
+      onClick,
+    });
+  });
+
+  test('should be instanced.', () => {
+    expect(layer).toBeInstanceOf(TralisLayer);
+    expect(layer.clickCallbacks[0]).toBe(onClick);
+  });
+
+  test('#onClick', () => {
+    const f = () => {};
+    layer.onClick(f);
+    expect(layer.clickCallbacks[1]).toBe(f);
+    expect(layer.clickCallbacks.length).toBe(2);
+    layer.onClick(f);
+    expect(layer.clickCallbacks.length).toBe(2);
+  });
+
+  test('#unClick', () => {
+    const foo = () => {};
+    const bar = () => {};
+    layer.onClick(foo);
+    layer.onClick(bar);
+    expect(layer.clickCallbacks[1]).toBe(foo);
+    expect(layer.clickCallbacks[2]).toBe(bar);
+    expect(layer.clickCallbacks.length).toBe(3);
+    layer.unClick(foo);
+    expect(layer.clickCallbacks[1]).toBe(bar);
+    expect(layer.clickCallbacks.length).toBe(2);
+  });
+});

package/module.js

@@ -1,28 +1,20 @@
-import Map from './ol/Map';
 import {
   Layer as olLayer,
   WMSLayer as olWMSLayer,
   MapboxLayer as olMapboxLayer,
-  TrajservLayer as olTrajservLayer,
   TralisLayer as olTralisLayer,
   VectorLayer as olVectorLayer,
 } from './ol';
-import {
-  TrajservLayer as mbTrajservLayer,
-  TralisLayer as mbTralisLayer,
-} from './mapbox';
+import { TralisLayer as mbTralisLayer } from './mapbox';
 
 const exports = {
   mapbox: {
-    TrajservLayer: mbTrajservLayer,
     TralisLayer: mbTralisLayer,
   },
   ol: {
-    Map,
     Layer: olLayer,
     WMSLayer: olWMSLayer,
     MapboxLayer: olMapboxLayer,
-    TrajservLayer: olTrajservLayer,
     TralisLayer: olTralisLayer,
     VectorLayer: olVectorLayer,
   },

package/ol/controls/CopyrightControl.js

@@ -7,14 +7,14 @@ import removeDuplicate from '../../common/utils/removeDuplicate';
  * Display layer's copyrights.
  *
  * @example
- * import { Map, CopyrightControl } from 'mobility-toolbox-js/ol';
+ * import { Map } from 'ol';
+ * import { CopyrightControl } from 'mobility-toolbox-js/ol';
  *
  * const map = new Map({
  *   target: 'map',
- *   controls: [
- *     new CopyrightControl()
- *   ]
  * });
+ * const control = new CopyrightControl();
+ * control.map = map
  *
  *
  * @see <a href="/example/ol-copyright">Openlayers copyright example</a>

package/ol/controls/CopyrightControl.test.js

@@ -3,7 +3,7 @@ import Tile from 'ol/Tile';
 import TileLayer from 'ol/layer/Tile';
 import TileSource from 'ol/source/Tile';
 import { createXYZ } from 'ol/tilegrid';
-import Map from '../Map';
+import { Map } from 'ol';
 import Layer from '../layers/Layer';
 import CopyrightControl from './CopyrightControl';
 
@@ -48,8 +48,8 @@ describe('CopyrightControl', () => {
         center: [0, 0],
         zoom: 0,
       }),
-      layers: [getLayer(true, 'bar')],
     });
+    getLayer(true, 'bar').init(map);
     map.setSize([200, 200]);
     map.renderSync();
   });
@@ -70,7 +70,7 @@ describe('CopyrightControl', () => {
     const control = new CopyrightControl();
     control.map = map;
     expect(control.element.innerHTML).toBe('');
-    map.addLayer(getLayer('copyright'));
+    getLayer('copyright').init(map);
     map.renderSync();
     expect(control.element.innerHTML).toBe('copyright');
   });
@@ -79,7 +79,7 @@ describe('CopyrightControl', () => {
     const control = new CopyrightControl();
     control.map = map;
     expect(control.element.innerHTML).toBe('');
-    map.addLayer(getLayer(['copyright 1', 'copyright 2']));
+    getLayer(['copyright 1', 'copyright 2']).init(map);
     map.renderSync();
     expect(control.element.innerHTML).toBe('copyright 1 | copyright 2');
   });
@@ -88,9 +88,9 @@ describe('CopyrightControl', () => {
     const control = new CopyrightControl();
     control.map = map;
     expect(control.element.innerHTML).toBe('');
-    map.addLayer(getLayer(['copyright 1', 'copyright 2']));
-    map.addLayer(getLayer('copyright 1'));
-    map.addLayer(getLayer(['copyright 2']));
+    getLayer(['copyright 1', 'copyright 2']).init(map);
+    getLayer('copyright 1').init(map);
+    getLayer(['copyright 2']).init(map);
     map.renderSync();
     expect(control.element.innerHTML).toBe('copyright 1 | copyright 2');
   });
@@ -100,9 +100,9 @@ describe('CopyrightControl', () => {
     control.map = map;
     expect(control.element.innerHTML).toBe('');
     const layer1 = getLayer('copyright hidden', false);
+    layer1.init(map);
     const layer2 = getLayer('copyright', true);
-    map.addLayer(layer1);
-    map.addLayer(layer2);
+    layer2.init(map);
     map.renderSync();
     expect(control.element.innerHTML).toBe('copyright');
 
@@ -115,7 +115,7 @@ describe('CopyrightControl', () => {
   });
 
   test('should activate the control on construction then deactivate it', () => {
-    map.addLayer(getLayer('copyright 1'));
+    getLayer('copyright 1').init(map);
     const control = new CopyrightControl({ active: true });
     control.map = map;
     map.renderSync();
@@ -133,12 +133,12 @@ describe('CopyrightControl', () => {
   });
 
   test('should deactivate the control on constrcution then activate it', () => {
-    map.addLayer(getLayer('copyright 1'));
+    getLayer('copyright 1').init(map);
     const control = new CopyrightControl({ active: false });
     control.map = map;
     map.renderSync();
 
-    expect(control.element.parentNode).toBe(map.getContainer());
+    expect(control.element.parentNode).toBe(map.getTargetElement());
 
     // Should be activated by default.
     expect(control.active).toBe(false);
@@ -152,14 +152,14 @@ describe('CopyrightControl', () => {
   });
 
   test('should add copyrights in the map container element then remove it.', () => {
-    map.addLayer(getLayer('copyright value'));
+    getLayer('copyright value').init(map);
     map.renderSync();
 
     const control = new CopyrightControl();
 
     // Add control
     control.map = map;
-    expect(control.element.parentNode).toBe(map.getContainer());
+    expect(control.element.parentNode).toBe(map.getTargetElement());
 
     // Remove control
     control.map = null;
@@ -167,7 +167,7 @@ describe('CopyrightControl', () => {
   });
 
   test('should add copyrights in the target element then remove it.', () => {
-    map.addLayer(getLayer(['copyright value']));
+    getLayer(['copyright value']).init(map);
     map.renderSync();
 
     const target = document.createElement('div');
@@ -200,7 +200,7 @@ describe('CopyrightControl', () => {
       },
     });
     control.map = map;
-    map.addLayer(getLayer(['copyright 1', 'copyright 2', 'copyright 3']));
+    getLayer(['copyright 1', 'copyright 2', 'copyright 3']).init(map);
     map.renderSync();
 
     // Add control

package/ol/controls/RoutingControl.js

@@ -45,15 +45,17 @@ const getFlatCoordinatesFromSegments = (segmentArray) => {
  * Display a route of a specified mean of transport.
  *
  * @example
- * import { Map, RoutingControl } from 'mobility-toolbox-js/ol';
+ * import { Map } from 'ol';
+ * import { RoutingControl } from 'mobility-toolbox-js/ol';
  *
  * const map = new Map({
- *   target: 'map',
- *   controls: [
- *     new RoutingControl()
- *   ]
+ *   target: 'map'
  * });
  *
+ * const control = new RoutingControl();
+ *
+ * control.map = map
+ *
  * @classproperty {string} apiKey - Key used for RoutingApi requests.
  * @classproperty {string} stopsApiKey - Key used for Stop lookup requests (defaults to apiKey).
  * @classproperty {string} stopsApiUrl - Url used for Stop lookup requests (defaults to https://api.geops.io/stops/v1/lookup/).
@@ -724,7 +726,7 @@ class RoutingControl extends Control {
       this.map.removeInteraction(this.modifyInteraction);
 
       // Add modify interaction, RoutingLayer and listeners
-      this.map.addLayer(this.routingLayer);
+      this.routingLayer.init(this.map);
       this.map.addInteraction(this.modifyInteraction);
       this.modifyInteraction.setActive(this.modify);
       this.addListeners();
@@ -738,7 +740,7 @@ class RoutingControl extends Control {
   deactivate() {
     if (this.map) {
       // Remove modify interaction, RoutingLayer, listeners and viaPoints
-      this.map.removeLayer(this.routingLayer.olLayer);
+      this.routingLayer.terminate(this.map);
       this.map.removeInteraction(this.modifyInteraction);
       this.removeListeners();
       this.reset();

package/ol/controls/RoutingControl.test.js

@@ -1,7 +1,7 @@
 import fetch from 'jest-fetch-mock';
 import View from 'ol/View';
 import qs from 'query-string';
-import Map from '../Map';
+import Map from 'ol/Map';
 import RoutingControl from './RoutingControl';
 
 import RoutingControlStation1 from './snapshots/RoutingControlStation1.json';

package/ol/controls/StopFinderControl.js

@@ -6,17 +6,19 @@ import mixin from '../../common/mixins/SearchMixin';
  * Search stations.
  *
  * @example
- * import { Map, StopFinderControl } from 'mobility-toolbox-js/ol';
+ * import { Map } from 'ol';
+ * import { StopFinderControl } from 'mobility-toolbox-js/ol';
  *
  * const map = new Map({
  *   target: 'map',
- *   controls: [
- *     new StopFinderControl({
- *       apiKey: [yourApiKey]
- *     })
- *   ]
  * });
  *
+ * const control = new StopFinderControl({
+ *   apiKey: [yourApiKey]
+ * });
+ *
+ * control.map = map;
+ *
  *
  * @see <a href="/example/ol-search">Openlayers search example</a>
  *

package/ol/controls/StopFinderControl.test.js

@@ -1,6 +1,6 @@
 import fetch from 'jest-fetch-mock';
 import View from 'ol/View';
-import Map from '../Map';
+import Map from 'ol/Map';
 import StopFinderControl from './StopFinderControl';
 
 describe('StopFinderControl', () => {

package/ol/index.js

@@ -1,13 +1,13 @@
-export { default as Map } from './Map';
 export { default as Layer } from './layers/Layer';
 export { default as MapboxLayer } from './layers/MapboxLayer';
+export { default as MaplibreLayer } from './layers/MaplibreLayer';
 export { default as MapboxStyleLayer } from './layers/MapboxStyleLayer';
 export { default as RoutingLayer } from './layers/RoutingLayer';
-export { default as TrackerLayer } from './layers/TrackerLayer';
-export { default as TrajservLayer } from './layers/TrajservLayer';
 export { default as TralisLayer } from './layers/TralisLayer';
 export { default as VectorLayer } from './layers/VectorLayer';
 export { default as WMSLayer } from './layers/WMSLayer';
 export { default as CopyrightControl } from './controls/CopyrightControl';
 export { default as RoutingControl } from './controls/RoutingControl';
 export { default as StopFinderControl } from './controls/StopFinderControl';
+export * from '../common/styles';
+export * from './styles';

package/ol/layers/Layer.js

@@ -67,6 +67,10 @@ class Layer extends LayerCommon {
       return;
     }
 
+    if (this.map && this.olLayer) {
+      this.map.addLayer(this.olLayer);
+    }
+
     this.olListenersKeys.push(
       this.map.getLayers().on('remove', (evt) => {
         if (evt.element === this.olLayer) {
@@ -103,6 +107,11 @@ class Layer extends LayerCommon {
    */
   terminate() {
     unByKey(this.olListenersKeys);
+
+    if (this.map && this.olLayer) {
+      this.map.removeLayer(this.olLayer);
+    }
+
     super.terminate();
   }