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

package/ol/layers/TrajservLayer.js

@@ -1,190 +0,0 @@
-import Feature from 'ol/Feature';
-import { fromLonLat } from 'ol/proj';
-import { buffer, getWidth } from 'ol/extent';
-import { MultiPoint, LineString } from 'ol/geom';
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-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/ol-tracker">OL tracker example</a>
- *
- * @extends {TrackerLayer}
- * @implements {TrajservLayerInterface}
- * @deprecated Use {@link TralisLayer} instead.
- */
-class TrajservLayer extends mixin(TrackerLayer) {
-  /**
-   * Start the layer.
-   * @override
-   */
-  start() {
-    if (!this.map) {
-      return;
-    }
-    super.start();
-    /**
-     * Array of ol events key, returned by on() or once().
-     * @type {Array<ol/events~EventsKey>}
-     * @ignore
-     */
-    this.olEventsKeys = [
-      this.map.on('movestart', () => {
-        this.abortFetchTrajectories();
-      }),
-      this.map.on('moveend', this.onMoveEnd.bind(this)),
-    ];
-  }
-
-  stop() {
-    unByKey(this.olEventsKeys);
-    super.stop();
-  }
-
-  /**
-   * Callback on 'moveend' event.
-   * @private
-   */
-  onMoveEnd() {
-    const z = this.map.getView().getZoom();
-
-    if (z !== this.currentZoom) {
-      /**
-       * Current value of the zoom.
-       * @type {number}
-       * @ignore
-       */
-      this.currentZoom = z;
-
-      // This will restart the timeouts.
-      // TODO maybe find a calculation a bit less approximative.
-      /** @ignore */
-      this.requestIntervalSeconds = 200 / z || 1000;
-    }
-
-    this.abortFetchTrajectories();
-    if (
-      !this.map.getView().getAnimating() &&
-      !this.map.getView().getInteracting()
-    ) {
-      this.updateTrajectories();
-    }
-
-    if (this.selectedVehicleId && this.journeyId) {
-      this.highlightTrajectory();
-    }
-  }
-
-  /**
-   * 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.
-   * @param {string} color The color of the line.
-   * @private
-   */
-  drawFullTrajectory(stationsCoords, lineCoords, color) {
-    const vectorSource = this.vectorLayer.getSource();
-    vectorSource.clear();
-
-    // Add station points
-    if (stationsCoords) {
-      const geometry = new MultiPoint(
-        stationsCoords.map((coords) => fromLonLat(coords)),
-      );
-      const aboveStationsFeature = new Feature(geometry);
-      aboveStationsFeature.setStyle(
-        new Style({
-          zIndex: 1,
-          image: new Circle({
-            radius: 5,
-            fill: new Fill({
-              color: '#000000',
-            }),
-          }),
-        }),
-      );
-      const belowStationsFeature = new Feature(geometry);
-      belowStationsFeature.setStyle(
-        new Style({
-          zIndex: 4,
-          image: new Circle({
-            radius: 4,
-            fill: new Fill({
-              color,
-            }),
-          }),
-        }),
-      );
-      vectorSource.addFeatures([aboveStationsFeature, belowStationsFeature]);
-    }
-
-    // Add line.
-    if (lineCoords) {
-      const lineFeat = new Feature({
-        geometry: new LineString(lineCoords),
-      });
-      lineFeat.setStyle([
-        new Style({
-          zIndex: 2,
-          stroke: new Stroke({
-            color: '#000000',
-            width: 6,
-          }),
-        }),
-        new Style({
-          zIndex: 3,
-          stroke: new Stroke({
-            color,
-            width: 4,
-          }),
-        }),
-      ]);
-      vectorSource.addFeature(lineFeat);
-    }
-  }
-
-  /**
-   * @override
-   * * Returns the URL parameters.
-   * @param {Object} extraParams Extra parameters
-   * @return {Object}
-   * @private
-   */
-  getParams(extraParams = {}) {
-    const ext = this.map.getView().calculateExtent();
-    const bbox = buffer(ext, getWidth(ext) / 10).join(',');
-    const zoom = this.map.getView().getZoom();
-
-    return super.getParams({
-      ...extraParams,
-      bbox,
-      s: zoom < 10 ? 1 : 0,
-      z: zoom,
-    });
-  }
-
-  /**
-   * Create a copy of the TrajservLayer.
-   * @param {Object} newOptions Options to override
-   * @return {TrajservLayer} A TrajservLayer
-   */
-  clone(newOptions) {
-    return new TrajservLayer({ ...this.options, ...newOptions });
-  }
-}
-
-export default TrajservLayer;

package/ol/layers/TrajservLayer.test.js

@@ -1,113 +0,0 @@
-import fetch from 'jest-fetch-mock';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TrajservLayer from './TrajservLayer';
-
-let layer;
-let onClick;
-let olMap;
-
-describe('TrajservLayer', () => {
-  beforeEach(() => {
-    global.fetch = fetch;
-    fetch.resetMocks();
-
-    onClick = jest.fn();
-    layer = new TrajservLayer({
-      apiKey: 'apiKey',
-      onClick,
-    });
-
-    olMap = new Map({
-      view: new View({
-        center: [831634, 5933959],
-        zoom: 9,
-      }),
-    });
-  });
-
-  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));
-
-    layer.init(olMap);
-    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("map events should be called if zoom doesn't change", () => {
-    const spy2 = jest.spyOn(layer, 'onMoveEnd');
-
-    // Mock response for the following calls
-    fetch.mockResponse(JSON.stringify(global.fetchTrajectoriesResponse));
-
-    // init uses mockResponse
-    layer.init(olMap);
-
-    // Start uses mockResponse
-    layer.start();
-
-    // dispatchEvent uses mockResponse
-    const evt2 = { type: 'moveend', olMap };
-    olMap.dispatchEvent(evt2);
-    expect(spy2).toHaveBeenCalledTimes(2);
-    olMap.dispatchEvent(evt2);
-    expect(spy2).toHaveBeenCalledTimes(4);
-  });
-
-  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('apiKey');
-  });
-
-  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');
-  });
-
-  test('should clone', () => {
-    const layr = new TrajservLayer({
-      name: 'test',
-      url: 'https:foo.ch',
-      apiKey: 'bar',
-    });
-    const clone = layr.clone({ name: 'clone' });
-    expect(layr.name).toBe('test');
-    expect(clone).not.toBe(layr);
-    expect(clone.name).toBe('clone');
-    expect(clone).toBeInstanceOf(TrajservLayer);
-  });
-});

package/ol/layers/TralisLayer.js

@@ -1,177 +0,0 @@
-import GeoJSON from 'ol/format/GeoJSON';
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-import TrackerLayer from './TrackerLayer';
-import mixin from '../../common/mixins/TralisLayerMixin';
-import { getBgColor } from '../../common/trackerConfig';
-
-const format = new GeoJSON();
-
-/**
- * Responsible for loading and display data from a Tralis service.
- *
- * @example
- * import { TralisLayer } from 'mobility-toolbox-js/ol';
- *
- * 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.map.getView().calculateExtent(),
-      zoom || this.map.getView().getZoom(),
-    );
-  }
-
-  /**
-   * Send the current bbox to the websocket
-   *
-   * @private
-   */
-  setBbox(extent, zoom) {
-    let newExtent = extent;
-    let newZoom = zoom;
-    if (!newExtent && this.isUpdateBboxOnMoveEnd) {
-      newExtent = extent || this.map.getView().calculateExtent();
-      newZoom = Math.floor(this.map.getView().getZoom());
-    }
-    super.setBbox(newExtent, newZoom);
-  }
-
-  /**
-   * On move end we update the websocket with the new bbox.
-   *
-   * @param {ol/MapEvent~MapEvent} evt Moveend event
-   * @private
-   * @override
-   */
-  onMoveEnd(evt) {
-    super.onMoveEnd(evt);
-
-    if (this.visible && this.isUpdateBboxOnMoveEnd) {
-      this.setBbox();
-    }
-
-    if (
-      this.visible &&
-      this.isUpdateBboxOnMoveEnd &&
-      this.isClickActive &&
-      this.selectedVehicleId
-    ) {
-      this.highlightTrajectory(this.selectedVehicleId);
-    }
-  }
-
-  /**
-   * Callback when user clicks on the map.
-   * It sets the layer's selectedVehicleId property with the current selected vehicle's id.
-   *
-   * @private
-   * @override
-   */
-  onFeatureClick(features, layer, coordinate) {
-    super.onFeatureClick(features, layer, coordinate);
-    if (this.selectedVehicleId) {
-      this.highlightTrajectory(this.selectedVehicleId);
-    }
-  }
-
-  /**
-   * Highlight the trajectory of journey.
-   * @private
-   */
-  highlightTrajectory(id) {
-    this.api
-      .getFullTrajectory(id, this.mode, this.generalizationLevel)
-      .then((fullTrajectory) => {
-        const vectorSource = this.vectorLayer.getSource();
-        vectorSource.clear();
-
-        if (
-          !fullTrajectory ||
-          !fullTrajectory.features ||
-          !fullTrajectory.features.length
-        ) {
-          return;
-        }
-
-        let lineColor = '#ffffff'; // white
-
-        if (this.useDelayStyle) {
-          lineColor = '#a0a0a0'; // grey
-        } else {
-          const props = fullTrajectory.features[0].properties;
-          const { type } = props;
-          let { stroke } = props;
-
-          if (stroke && stroke[0] !== '#') {
-            stroke = `#${stroke}`;
-          }
-
-          lineColor = stroke || getBgColor(type);
-
-          // Don't allow white lines, use red instead.
-          lineColor = /#ffffff/i.test(lineColor) ? '#ff0000' : lineColor;
-        }
-        const style = [
-          new Style({
-            zIndex: 2,
-            image: new Circle({
-              radius: 5,
-              fill: new Fill({
-                color: '#000000',
-              }),
-            }),
-            stroke: new Stroke({
-              color: '#000000',
-              width: 6,
-            }),
-          }),
-          new Style({
-            zIndex: 3,
-            image: new Circle({
-              radius: 4,
-              fill: new Fill({
-                color: lineColor,
-              }),
-            }),
-            stroke: new Stroke({
-              color: lineColor,
-              width: 4,
-            }),
-          }),
-        ];
-        this.vectorLayer.setStyle(style);
-        const features = format.readFeatures(fullTrajectory);
-        features.forEach((feature) => {
-          feature.setStyle(style);
-        });
-        this.vectorLayer.getSource().addFeatures(features);
-      });
-  }
-
-  /**
-   * Create a copy of the TralisLayer.
-   * @param {Object} newOptions Options to override
-   * @return {TralisLayer} A TralisLayer
-   */
-  clone(newOptions) {
-    return new TralisLayer({ ...this.options, ...newOptions });
-  }
-}
-
-export default TralisLayer;