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

package/mapbox/Map.js

@@ -1,87 +0,0 @@
-import { Map as MBMap } from 'maplibre-gl';
-import Layer from '../common/layers/Layer';
-import mixin from '../common/mixins/MapMixin';
-import CopyrightControl from './controls/CopyrightControl';
-import getMapboxStyleUrl from '../common/utils/getMapboxStyleUrl';
-
-/**
- * An Mapbox Map](https://docs.mapbox.com/mapbox-gl-js/api/map) for handling mobility layers and controls.
- *
- * @extends {mapboxgl.Map}
- * @implements {MapInterface}
- */
-class Map extends mixin(MBMap) {
-  /**
-   * Constructor.
-   */
-  constructor(options) {
-    const { style } = options;
-    const apiKey = options.apiKey || false;
-    const apiKeyName = options.apiKeyName || 'key';
-    let newStyle = options.style;
-    if (typeof style === 'string') {
-      newStyle = getMapboxStyleUrl(apiKey, apiKeyName, style);
-    }
-    super({
-      attributionControl: false,
-      controls: [new CopyrightControl()],
-      ...options,
-      style: newStyle,
-    });
-  }
-
-  /**
-   * Adds a layer to the map.
-   * @param {Layer|mapboxgl.Layer} layer The layer to add.
-   * @param {number} beforeId See [mapbox-gl-js doc](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer)
-   */
-  addLayer(layer, beforeId) {
-    if (layer instanceof Layer) {
-      this.mobilityLayers.push(layer);
-      this.fire('change:mobilityLayers');
-
-      if (this.isStyleLoaded()) {
-        layer.init(this, beforeId);
-      } else {
-        this.on('load', () => {
-          layer.init(this, beforeId);
-        });
-      }
-    } else {
-      super.addLayer(layer, beforeId);
-    }
-  }
-
-  /**
-   * Removes a given layer from the map.
-   * @param {Layer|number} layer The layer to remove.
-   *    If it's a mapbox-layer, pass the id instead..
-   */
-  removeLayer(layer) {
-    if (layer instanceof Layer) {
-      layer.terminate();
-      this.mobilityLayers = this.mobilityLayers.filter((l) => l !== layer);
-    } else {
-      super.removeLayer(layer);
-    }
-  }
-
-  /**
-   * Adds a given control to the map.
-   * @param {Control|mapboxgl.IControl} control The control to add.
-   * @param {mapboxgl.position} position Position of the control. Only if control parameter is an <mapboxgl.IControl>.
-   */
-  addControl(control, position) {
-    super.addControl(control, position);
-  }
-
-  /**
-   * Removes a given control to the map.
-   * @param {Control|mapboxgl.IControl} control The control to remove.
-   */
-  removeControl(control) {
-    super.removeControl(control);
-  }
-}
-
-export default Map;

package/mapbox/layers/TrackerLayer.test.js

@@ -1,68 +0,0 @@
-import maplibre from 'maplibre-gl';
-import { toLonLat } from 'ol/proj';
-import TrackerLayer from './TrackerLayer';
-
-let layer;
-let onClick;
-
-describe('TrackerLayer', () => {
-  beforeEach(() => {
-    onClick = jest.fn();
-    layer = new TrackerLayer({
-      onClick,
-    });
-  });
-
-  test('should be instanced.', () => {
-    expect(layer).toBeInstanceOf(TrackerLayer);
-    expect(layer.clickCallbacks[0]).toBe(onClick);
-  });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-
-    const 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');
-    document.body.appendChild(mapElement);
-
-    layer.init(
-      new maplibre.Map({
-        container: document.getElementById('map'),
-        style: `path/to/style`,
-        center: toLonLat([831634, 5933959]),
-        zoom: 9,
-      }),
-    );
-
-    expect(spy).toHaveBeenCalledTimes(1);
-    document.body.removeChild(mapElement);
-  });
-
-  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/mapbox/layers/TrajservLayer.js

@@ -1,114 +0,0 @@
-import { fromLonLat } from 'ol/proj';
-import { buffer, getWidth } from 'ol/extent';
-import { unByKey } from 'ol/Observable';
-import TrackerLayer from './TrackerLayer';
-import mixin from '../../common/mixins/TrajservLayerMixin';
-
-/**
- * Responsible for loading and display data from a Trajserv service.
- *
- * @example
- * import { TrajservLayer } from 'mobility-toolbox-js/mapbox';
- *
- * const layer = new TrajservLayer({
- *   url: 'https://api.geops.io/tracker/v1',
- *   apiKey: [yourApiKey],
- * });
- *
- * @see <a href="/api/class/src/api/trajserv/TrajservAPI%20js~TrajservAPI%20html">TrajservAPI</a>
- * @see <a href="/example/mapbox-tracker">Mapbox tracker example</a>
- *
- * @extends {TrackerLayer}
- * @implements {TrajservLayerInterface}
- * @deprecated
- */
-class TrajservLayer extends mixin(TrackerLayer) {
-  constructor(options = {}) {
-    super({ ...options });
-    this.onMove = this.onMove.bind(this);
-    this.onMoveEnd = this.onMoveEnd.bind(this);
-    this.onVisibilityChange = this.onVisibilityChange.bind(this);
-  }
-
-  /**
-   * Remove the mapbox layer and the mapbox source.
-   *
-   * @override
-   */
-  terminate() {
-    if (this.map) {
-      this.listeners.forEach((listener) => {
-        unByKey(listener);
-      });
-      this.map.removeLayer(this.key);
-      this.map.removeSource(this.key);
-    }
-    super.terminate();
-  }
-
-  start() {
-    if (!this.map) {
-      return;
-    }
-    super.start();
-    this.map.on('move', this.onMove);
-    this.map.on('moveend', this.onMoveEnd);
-  }
-
-  stop() {
-    if (this.map) {
-      this.map.off('move', this.onMove);
-      this.map.off('moveend', this.onMoveEnd);
-    }
-    super.stop();
-  }
-
-  /**
-   * Callback on 'moveend' event.
-   * @private
-   */
-  onMoveEnd() {
-    this.updateTrajectories();
-    if (this.selectedVehicleId && this.journeyId) {
-      this.highlightTrajectory();
-    }
-  }
-
-  /**
-   * Returns the URL parameters.
-   * @param {Object} extraParams Extra parameters
-   * @return {Object}
-   * @private
-   */
-  getParams(extraParams = {}) {
-    const bounds = this.map.getBounds().toArray();
-    const southWest = fromLonLat(bounds[0]);
-    const northEast = fromLonLat(bounds[1]);
-    const ext = [...southWest, ...northEast];
-    const bbox = buffer(ext, getWidth(ext) / 10).join(',');
-    const zoom = this.map.getZoom();
-
-    return super.getParams({
-      ...extraParams,
-      bbox,
-      s: zoom < 10 ? 1 : 0,
-      z: zoom,
-    });
-  }
-
-  /**
-   * Draw the trajectory as a line with points for each stop.
-   *
-   * @param {Array} stationsCoords Array of station coordinates in EPSG:4326.
-   * @param {Array<ol/coordinate~Coordinate>} lineCoords A list of coordinates in EPSG:3857.
-   * @param {string} color The color of the line.
-   * @private
-   */
-  // eslint-disable-next-line no-unused-vars,class-methods-use-this
-  drawFullTrajectory(stationsCoords, lineCoords, color) {
-    // eslint-disable-next-line no-console
-    console.log('to be implemented');
-  }
-}
-
-export default TrajservLayer;

package/mapbox/layers/TrajservLayer.test.js

@@ -1,90 +0,0 @@
-import maplibre from 'maplibre-gl';
-import fetch from 'jest-fetch-mock';
-import { toLonLat } from 'ol/proj';
-import TrajservLayer from './TrajservLayer';
-
-let layer;
-let onClick;
-
-describe('TrajservLayer', () => {
-  beforeEach(() => {
-    global.fetch = fetch;
-    fetch.resetMocks();
-
-    onClick = jest.fn();
-    layer = new TrajservLayer({
-      apiKey: 'foo',
-      onClick,
-    });
-  });
-
-  test('should be instanced.', () => {
-    expect(layer).toBeInstanceOf(TrajservLayer);
-    expect(layer.clickCallbacks[0]).toBe(onClick);
-  });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-
-    fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
-
-    const 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');
-    document.body.appendChild(mapElement);
-
-    layer.init(
-      new maplibre.Map({
-        container: document.getElementById('map'),
-        style: `path/to/style`,
-        center: toLonLat([831634, 5933959]),
-        zoom: 9,
-      }),
-    );
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  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);
-  });
-
-  test('should create a default api with default url.', () => {
-    expect(layer).toBeInstanceOf(TrajservLayer);
-    expect(layer.api.url).toBe('https://api.geops.io/tracker/v1');
-    expect(layer.api.apiKey).toBe('foo');
-  });
-
-  test('should create an api with custom url and apiKey.', () => {
-    const layr = new TrajservLayer({
-      url: 'https:foo.ch',
-      apiKey: 'bar',
-    });
-    expect(layr).toBeInstanceOf(TrajservLayer);
-    expect(layr.api.url).toBe('https:foo.ch');
-    expect(layr.api.apiKey).toBe('bar');
-  });
-});

package/mapbox/layers/TralisLayer.js

@@ -1,64 +0,0 @@
-import TrackerLayer from './TrackerLayer';
-import mixin from '../../common/mixins/TralisLayerMixin';
-
-/**
- * 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 {TrackerLayer}
- * @implements {TralisLayerInterface}
- */
-class TralisLayer extends mixin(TrackerLayer) {
-  /**
-   * 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);
-  }
-
-  /**
-   * Send the new BBOX to the websocket.
-   *
-   * @param {ol/MapEvent~MapEvent} evt Moveend event
-   * @private
-   * @override
-   */
-  onMoveEnd(evt) {
-    super.onMoveEnd(evt);
-
-    if (this.visible && this.isUpdateBboxOnMoveEnd) {
-      this.setBbox();
-    }
-  }
-}
-
-export default TralisLayer;

package/ol/Map.js

@@ -1,109 +0,0 @@
-import OLMap from 'ol/Map';
-import { defaults as defaultControls } from 'ol/control';
-import Layer from './layers/Layer';
-import mixin from '../common/mixins/MapMixin';
-import CopyrightControl from './controls/CopyrightControl';
-
-/**
- * An OpenLayers map for handling mobility layers and controls.
- *
- * @example
- * import { Map } from 'mobility-toolbox-js/ol';
- *
- * const map = new Map({
- *   target: 'map',
- *   view: new View({
- *     center: [0, 0],
- *     zoom: 1,
- *  }),
- * });
- *
- * @see <a href="/example/ol-map">Map example</a>
- *
- * @extends {ol/Map~Map}
- */
-class Map extends mixin(OLMap) {
-  /**
-   * Constructor.
-   *
-   * @param {Object} options See [ol/Map~Map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html) options documentation.
-   * @param {Array<Layer|ol/layer/Layer~Layer>} [options.layers] Array of layers.
-   */
-  constructor(options = {}) {
-    super({
-      controls: [
-        ...defaultControls({ attribution: false }).getArray(),
-        new CopyrightControl(),
-      ],
-      ...options,
-    });
-  }
-
-  /**
-   * Get the HTML element containing the map.
-   *
-   * @return {HTMLElement} The HTML element of the container.
-   */
-  getContainer() {
-    return this.getTargetElement();
-  }
-
-  /**
-   * Adds a layer to the map.
-   * @param {Layer|ol/layer/Layer~Layer} layer The layer to add.
-   */
-  addLayer(layer) {
-    if (layer instanceof Layer) {
-      // layer is an mobility layer
-      layer.init(this);
-      this.mobilityLayers.push(layer);
-
-      if (layer.olLayer) {
-        super.addLayer(layer.olLayer);
-      }
-
-      this.dispatchEvent({
-        type: 'change:mobilityLayers',
-        target: this,
-      });
-    } else {
-      // layer is an OpenLayer layer
-      super.addLayer(layer);
-    }
-  }
-
-  /**
-   * Removes a given layer from the map.
-   * @param {Layer|ol/layer/Layer~Layer} layer The layer to remove.
-   */
-  removeLayer(layer) {
-    if (layer instanceof Layer) {
-      layer.terminate();
-      this.mobilityLayers = this.mobilityLayers.filter((l) => l !== layer);
-      if (layer.olLayer) {
-        super.removeLayer(layer);
-      }
-    } else {
-      // layer is an OpenLayer layer
-      super.removeLayer(layer);
-    }
-  }
-
-  /**
-   * Adds a given control to the map.
-   * @param {Control|ol/control/Control~Control} control The control to add.
-   */
-  addControl(control) {
-    super.addControl(control);
-  }
-
-  /**
-   * Removes a given control to the map.
-   * @param {Control|ol/control/Control~Control} control The control to remove.
-   */
-  removeControl(control) {
-    super.removeControl(control);
-  }
-}
-
-export default Map;

package/ol/Map.test.js

@@ -1,34 +0,0 @@
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import Map from './Map';
-import Layer from './layers/Layer';
-
-const olLayer = new VectorLayer({ source: new VectorSource() });
-
-describe('Map', () => {
-  let map;
-
-  beforeEach(() => {
-    map = new Map({ target: document.body });
-  });
-
-  test('should init layer on add.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
-    const spy = jest.spyOn(layer, 'init');
-    map.addLayer(layer);
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(map.getLayers().getLength()).toBe(1);
-  });
-
-  test('should terminate layer on remove.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
-    const spy = jest.spyOn(layer, 'terminate');
-    map.addLayer(layer);
-    expect(map.getLayers().getLength()).toBe(1);
-    expect(spy).toHaveBeenCalledTimes(1);
-    map.removeLayer(layer);
-    expect(spy).toHaveBeenCalledTimes(2);
-    expect(layer.visible).toBe(true);
-    expect(map.getLayers().getLength()).toBe(1);
-  });
-});

package/ol/layers/TrackerLayer.test.js

@@ -1,70 +0,0 @@
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TrackerLayer from './TrackerLayer';
-
-let layer;
-let onClick;
-
-describe('TrackerLayer', () => {
-  beforeEach(() => {
-    onClick = jest.fn();
-    layer = new TrackerLayer({
-      onClick,
-    });
-  });
-
-  test('should be instanced.', () => {
-    expect(layer).toBeInstanceOf(TrackerLayer);
-    expect(layer.clickCallbacks[0]).toBe(onClick);
-  });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init(
-      new Map({
-        view: new View({
-          center: [831634, 5933959],
-          zoom: 9,
-        }),
-      }),
-    );
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  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);
-  });
-
-  describe('#terminate', () => {
-    test('should set container to null', () => {
-      layer.container = 'foo';
-      layer.terminate();
-      expect(layer.container).toBe(null);
-    });
-  });
-
-  test('should clone', () => {
-    const clone = layer.clone({ name: 'clone' });
-    expect(clone).not.toBe(layer);
-    expect(clone.name).toBe('clone');
-    expect(clone).toBeInstanceOf(TrackerLayer);
-  });
-});