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

package/{mapbox/layers/TrackerLayer.js → src/mapbox/layers/TralisLayer.js}

@@ -3,22 +3,36 @@ 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 mixin from '../../common/mixins/TrackerLayerMixin';
 import { getSourceCoordinates, getMercatorResolution } from '../utils';
+
 /**
- * Responsible for loading tracker data.
+ * 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>
  *
- * @classproperty {mapboxgl.Map} map - The map where the layer is displayed.
  * @extends {Layer}
- * @implements {TrackerLayerInterface}
+ * @implements {TralisLayerInterface}
  */
-class TrackerLayer extends mixin(Layer) {
+class TralisLayer extends mixin(Layer) {
   constructor(options = {}) {
     super({
       ...options,
     });
 
+    /** @ignore */
+    this.onLoad = this.onLoad.bind(this);
+
     /** @ignore */
     this.onMove = this.onMove.bind(this);
 
@@ -51,7 +65,7 @@ class TrackerLayer extends mixin(Layer) {
       height: canvas.height / this.pixelRatio,
     });
 
-    const source = {
+    this.source = {
       type: 'canvas',
       canvas: this.tracker.canvas,
       coordinates: getSourceCoordinates(map, this.pixelRatio),
@@ -74,8 +88,12 @@ class TrackerLayer extends mixin(Layer) {
         'raster-resampling': 'nearest', // important otherwise it looks blurry
       },
     };
-    map.addSource(this.key, source);
-    map.addLayer(this.layer, this.beforeId);
+
+    if (map.isStyleLoaded()) {
+      this.onLoad();
+    }
+
+    this.map.on('load', this.onLoad);
 
     this.listeners = [this.on('change:visible', this.onVisibilityChange)];
   }
@@ -85,6 +103,8 @@ class TrackerLayer extends mixin(Layer) {
    */
   terminate() {
     if (this.map) {
+      this.map.off('load', this.onLoad);
+
       this.listeners.forEach((listener) => {
         unByKey(listener);
       });
@@ -127,6 +147,15 @@ class TrackerLayer extends mixin(Layer) {
     }
   }
 
+  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
@@ -206,19 +235,6 @@ class TrackerLayer extends mixin(Layer) {
     return super.getRefreshTimeInMs(this.map.getZoom());
   }
 
-  /**
-   * Returns an array of vehicles located at the given coordinate.
-   *
-   * @param {Array<number>} coordinate
-   * @param {number} nb Number of vehicles to return;
-   * @return {Array<ol/Feature~Feature>} Array of vehicle.
-   * @override
-   */
-  getVehiclesAtCoordinate(coordinate, nb) {
-    const resolution = getMercatorResolution(this.map);
-    return super.getVehiclesAtCoordinate(coordinate, resolution, nb);
-  }
-
   getFeatureInfoAtCoordinate(coordinate, options = {}) {
     const resolution = getMercatorResolution(this.map);
     return super.getFeatureInfoAtCoordinate(coordinate, {
@@ -241,6 +257,32 @@ class TrackerLayer extends mixin(Layer) {
     // );
   }
 
+  /**
+   * 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),
+    );
+  }
+
+  /**
+   * Send the current bbox to the websocket
+   */
+  setBbox(extent, zoom) {
+    let newExtent = extent;
+    let newZoom = zoom;
+    if (!newExtent && this.isUpdateBboxOnMoveEnd) {
+      newExtent = extent || this.getMercatorExtent();
+      newZoom = Math.floor(this.getOlZoom());
+    }
+    super.setBbox(newExtent, newZoom);
+  }
+
   /**
    * Callback on 'move' event.
    *
@@ -256,13 +298,18 @@ class TrackerLayer extends mixin(Layer) {
   }
 
   /**
-   * Callback on 'moveend' event.
+   * Send the new BBOX to the websocket.
    *
+   * @param {ol/MapEvent~MapEvent} evt Moveend event
    * @private
+   * @override
    */
-  // eslint-disable-next-line class-methods-use-this
   onMoveEnd() {
     this.renderTrajectories();
+
+    if (this.visible && this.isUpdateBboxOnMoveEnd) {
+      this.setBbox();
+    }
   }
 
   /**
@@ -279,4 +326,4 @@ class TrackerLayer extends mixin(Layer) {
   }
 }
 
-export default TrackerLayer;
+export default TralisLayer;

package/src/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/{ol → src/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 → src/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 → src/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 → src/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 → src/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 → src/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 → src/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 → src/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();
   }
 

package/{ol → src/ol}/layers/Layer.test.js

@@ -52,13 +52,12 @@ describe('Layer', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
-  test('should call terminate when the layer is removed.', () => {
+  test('should remove the layer when we call terminate.', () => {
     const layer = new Layer({ name: 'Layer', olLayer });
     const spy = jest.spyOn(layer, 'terminate');
     layer.init(map);
-    map.addLayer(olLayer);
     expect(spy).toHaveBeenCalledTimes(1);
-    map.removeLayer(olLayer);
+    layer.terminate(map);
     expect(spy).toHaveBeenCalledTimes(2);
   });
 
@@ -153,16 +152,32 @@ describe('Layer', () => {
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
 
-    await map.dispatchEvent({ type: 'pointermove', map, coordinate: [0, 0] });
-    await map.dispatchEvent({ type: 'singleclick', map, coordinate: [0, 0] });
+    await map.dispatchEvent({
+      type: 'pointermove',
+      map,
+      coordinate: [0, 0],
+    });
+    await map.dispatchEvent({
+      type: 'singleclick',
+      map,
+      coordinate: [0, 0],
+    });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     spy.mockReset();
     spy2.mockReset();
 
     layer.terminate(map);
-    await map.dispatchEvent({ type: 'pointermove', map, coordinate: [0, 0] });
-    await map.dispatchEvent({ type: 'singleclick', map, coordinate: [0, 0] });
+    await map.dispatchEvent({
+      type: 'pointermove',
+      map,
+      coordinate: [0, 0],
+    });
+    await map.dispatchEvent({
+      type: 'singleclick',
+      map,
+      coordinate: [0, 0],
+    });
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
     global.console.error.mockRestore();