mobility-toolbox-js 2.3.9 → 2.3.10

package/src/mapbox/layers/RealtimeLayer.ts

@@ -0,0 +1,350 @@
+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 { Coordinate } from 'ol/coordinate';
+import { Feature } from 'ol';
+import mixin from '../../common/mixins/RealtimeLayerMixin';
+import Layer from './Layer';
+import { getSourceCoordinates, getMercatorResolution } from '../utils';
+import type {
+  AnyMapboxMap,
+  LayerGetFeatureInfoResponse,
+  ViewState,
+} from '../../types';
+import type { RealtimeTrajectory } from '../../api/typedefs';
+
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/mapbox';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {RealtimeLayerInterface}
+ */
+// @ts-ignore
+class RealtimeLayer extends mixin(Layer) {
+  constructor(options = {}) {
+    super({
+      ...options,
+    });
+
+    /** @private */
+    this.onLoad = this.onLoad.bind(this);
+
+    /** @private */
+    this.onMove = this.onMove.bind(this);
+
+    /** @private */
+    this.onMoveEnd = this.onMoveEnd.bind(this);
+
+    /** @private */
+    this.onZoomEnd = this.onZoomEnd.bind(this);
+
+    /** @private */
+    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
+   */
+  // @ts-ignore
+  attachToMap(map: AnyMapboxMap, beforeId: string) {
+    if (!map) {
+      return;
+    }
+    super.attachToMap(map);
+
+    this.source = {
+      type: 'canvas',
+      canvas: this.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.
+   */
+  detachFromMap() {
+    if (this.map) {
+      this.map.off('load', this.onLoad);
+
+      // @ts-ignore
+      this.listeners.forEach((listener) => {
+        unByKey(listener);
+      });
+      if (this.map.style && this.map.getLayer(this.key)) {
+        this.map.removeLayer(this.key);
+      }
+      if (this.map.style && this.map.getSource(this.key)) {
+        this.map.removeSource(this.key);
+      }
+    }
+    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);
+  }
+
+  /**
+   * 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 moves the cursor over the map.
+   * @override
+   */
+  onUserMoveCallback(
+    evt: mapboxgl.MapLayerMouseEvent | maplibregl.MapMouseEvent,
+  ) {
+    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
+   */
+  // @ts-ignore
+  renderTrajectories(noInterpolate?: boolean = false) {
+    if (!this.map) {
+      return;
+    }
+    if (!this.pixelRatio) {
+      this.pixelRatio = 1;
+    }
+
+    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.getOlZoom(),
+      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: Coordinate,
+    options = {},
+  ): Promise<LayerGetFeatureInfoResponse> {
+    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.
+   *
+   * @private
+   */
+  purgeTrajectory(
+    trajectory: RealtimeTrajectory,
+    extent: [number, number, number, number],
+    zoom: number,
+  ) {
+    return super.purgeTrajectory(
+      trajectory,
+      extent || this.getMercatorExtent(),
+      zoom || Math.floor(this.getOlZoom()),
+    );
+  }
+
+  /**
+   * Send the current bbox to the websocket
+   */
+  setBbox(extent?: [number, number, number, number], zoom?: number) {
+    super.setBbox(extent || this.getMercatorExtent(), zoom || this.getOlZoom());
+  }
+
+  /**
+   * Callback on 'move' event.
+   *
+   * @private
+   */
+  onMove() {
+    this.renderTrajectories();
+  }
+
+  renderTrajectoriesInternal(
+    viewState: ViewState,
+    noInterpolate: boolean = false,
+  ) {
+    const render = super.renderTrajectoriesInternal(viewState, noInterpolate);
+    if (render && this.map.style) {
+      const extent = getSourceCoordinates(this.map, this.pixelRatio);
+      const source = this.map.getSource(this.key);
+      if (source) {
+        source.setCoordinates(extent);
+      }
+    }
+    return render;
+  }
+
+  /**
+   * Send the new BBOX to the websocket.
+   *
+   * @private
+   * @override
+   */
+  onMoveEnd() {
+    this.renderTrajectories();
+
+    if (this.visible && this.isUpdateBboxOnMoveEnd) {
+      this.setBbox();
+    }
+  }
+
+  /**
+   * Update the cursor style when hovering a vehicle.
+   *
+   * @private
+   * @override
+   */
+  onFeatureHover(
+    features: Feature[],
+    layer: RealtimeLayer,
+    coordinate: Coordinate,
+  ) {
+    super.onFeatureHover(features, layer, coordinate);
+    this.map.getCanvasContainer().style.cursor = features.length
+      ? 'pointer'
+      : 'auto';
+  }
+}
+
+export default RealtimeLayer;

package/src/mapbox/utils/getMercatorResolution.ts

@@ -0,0 +1,21 @@
+import { getWidth, getHeight } from 'ol/extent';
+import { fromLonLat } from 'ol/proj';
+import { AnyMapboxMap } from '../../types';
+
+/**
+ * Get the current resolution of a Mapbox map.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+const getMercatorResolution = (map: AnyMapboxMap) => {
+  const bounds = map.getBounds().toArray();
+  const a = fromLonLat(bounds[0]);
+  const b = fromLonLat(bounds[1]);
+  const extent = [...a, ...b];
+  const { width, height } = map.getCanvas();
+  const xResolution = getWidth(extent) / width;
+  const yResolution = getHeight(extent) / height;
+  return Math.max(xResolution, yResolution);
+};
+
+export default getMercatorResolution;

package/src/mapbox/utils/getSourceCoordinates.ts

@@ -0,0 +1,34 @@
+import { AnyMapboxMap } from '../../types';
+
+/**
+ * Get the canvas source coordinates of the current map's extent.
+ * @param {mapboxgl.Map} map A map object.
+ * @private
+ */
+export const getSourceCoordinates = (
+  map: AnyMapboxMap,
+  pixelRatio: number = 1,
+) => {
+  // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
+  const { width, height } = map.getCanvas();
+  // @ts-ignore
+  const leftTop = map.unproject({ x: 0, y: 0 });
+  // @ts-ignore
+  const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
+
+  // @ts-ignore
+  const rightBottom = map.unproject({
+    x: width / pixelRatio,
+    y: height / pixelRatio,
+  });
+  // @ts-ignore
+  const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
+  return [
+    [leftTop.lng, leftTop.lat],
+    [rightTop.lng, rightTop.lat],
+    [rightBottom.lng, rightBottom.lat],
+    [leftBottom.lng, leftBottom.lat],
+  ];
+};
+
+export default getSourceCoordinates;

package/src/ol/controls/CopyrightControl.test.js

@@ -0,0 +1,211 @@
+import View from 'ol/View';
+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 'ol';
+import Layer from '../layers/Layer';
+import CopyrightControl from './CopyrightControl';
+
+const tileLoadFunction = () => {
+  const tile = new Tile([0, 0, -1], 2 /* LOADED */);
+  tile.getImage = () => {
+    const image = new Image();
+    image.width = 256;
+    image.height = 256;
+    return image;
+  };
+  return tile;
+};
+
+const getOLTileLayer = () => {
+  const layer = new TileLayer({
+    source: new TileSource({
+      projection: 'EPSG:3857',
+      tileGrid: createXYZ(),
+    }),
+  });
+  layer.getSource().getTile = tileLoadFunction;
+  return layer;
+};
+
+const getLayer = (copyrights, visible = true) =>
+  new Layer({
+    visible,
+    copyrights,
+    olLayer: getOLTileLayer(),
+  });
+
+describe('CopyrightControl', () => {
+  let map;
+
+  beforeEach(() => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    map = new Map({
+      target,
+      view: new View({
+        center: [0, 0],
+        zoom: 0,
+      }),
+    });
+    getLayer(true, 'bar').attachToMap(map);
+    map.setSize([200, 200]);
+    map.renderSync();
+  });
+
+  afterEach(() => {
+    if (map) {
+      map.setTarget(null);
+      map = null;
+    }
+  });
+
+  test('should be activate by default', () => {
+    const control = new CopyrightControl();
+    expect(control.active).toBe(true);
+  });
+
+  test('renders a string copyright', () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe('');
+    getLayer('copyright').attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('copyright');
+  });
+
+  test('renders an array of copyrights', () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe('');
+    getLayer(['copyright 1', 'copyright 2']).attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('copyright 1 | copyright 2');
+  });
+
+  test('renders unique copyrights', () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe('');
+    getLayer(['copyright 1', 'copyright 2']).attachToMap(map);
+    getLayer('copyright 1').attachToMap(map);
+    getLayer(['copyright 2']).attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('copyright 1 | copyright 2');
+  });
+
+  test("doesn't render copyright of an hidden layer", () => {
+    const control = new CopyrightControl();
+    control.attachToMap(map);
+    expect(control.element.innerHTML).toBe('');
+    const layer1 = getLayer('copyright hidden', false);
+    layer1.attachToMap(map);
+    const layer2 = getLayer('copyright', true);
+    layer2.attachToMap(map);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('copyright');
+
+    // the we update visibility of both layers
+    layer1.visible = true;
+    map.renderSync();
+    layer2.visible = false;
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('copyright hidden');
+  });
+
+  test('should activate the control on construction then deactivate it', () => {
+    getLayer('copyright 1').attachToMap(map);
+    const control = new CopyrightControl({ active: true });
+    control.attachToMap(map);
+    map.renderSync();
+
+    expect(control.element.parentNode).toBe(map.getTargetElement());
+
+    // Should be activated by default.
+    expect(control.active).toBe(true);
+    expect(control.element.innerHTML).toBe('copyright 1');
+
+    // on deactivation
+    control.active = false;
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('');
+  });
+
+  test('should deactivate the control on constrcution then activate it', () => {
+    getLayer('copyright 1').attachToMap(map);
+    const control = new CopyrightControl({ active: false });
+    control.attachToMap(map);
+    map.renderSync();
+
+    expect(control.element.parentNode).toBe(map.getTargetElement());
+
+    // Should be activated by default.
+    expect(control.active).toBe(false);
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('');
+
+    // on deactivation
+    control.active = true;
+    map.renderSync();
+    expect(control.element.innerHTML).toBe('copyright 1');
+  });
+
+  test('should add copyrights in the map container element then remove it.', () => {
+    getLayer('copyright value').attachToMap(map);
+    map.renderSync();
+
+    const control = new CopyrightControl();
+
+    // Add control
+    control.attachToMap(map);
+    expect(control.element.parentNode).toBe(map.getTargetElement());
+
+    // Remove control
+    control.detachFromMap();
+    expect(control.element.parentNode).toBe(null);
+  });
+
+  test('should add copyrights in the target element then remove it.', () => {
+    getLayer(['copyright value']).attachToMap(map);
+    map.renderSync();
+
+    const target = document.createElement('div');
+    target.setAttribute('id', 'copyright');
+    document.body.appendChild(target);
+
+    const control = new CopyrightControl({
+      target: document.getElementById('copyright'),
+    });
+
+    // Add control
+    control.attachToMap(map);
+    expect(control.element.parentNode).toBe(target);
+
+    // Remove control
+    control.detachFromMap();
+    expect(control.element.parentNode).toBe(null);
+  });
+
+  test('renders custom copyrights with the render method ', () => {
+    const control = new CopyrightControl({
+      active: true,
+      render() {
+        if (!this.element) {
+          return;
+        }
+        this.element.innerHTML = this.active
+          ? this.getCopyrights().join(', ')
+          : '';
+      },
+    });
+    control.attachToMap(map);
+    getLayer(['copyright 1', 'copyright 2', 'copyright 3']).attachToMap(map);
+    map.renderSync();
+
+    // Add control
+    expect(control.element.innerHTML).toBe(
+      'copyright 1, copyright 2, copyright 3',
+    );
+  });
+});

package/src/ol/controls/CopyrightControl.ts

@@ -0,0 +1,82 @@
+import { MapEvent } from 'ol';
+import { inView } from 'ol/layer/Layer';
+import type { FrameState } from 'ol/Map';
+import CopyrightControlCommon from '../../common/controls/CopyrightControlCommon';
+import removeDuplicate from '../../common/utils/removeDuplicate';
+
+/**
+ * Display layer's copyrights.
+ *
+ * @example
+ * import { Map } from 'ol';
+ * import { CopyrightControl } from 'mobility-toolbox-js/ol';
+ *
+ * const map = new Map({
+ *   target: 'map',
+ * });
+ * const control = new CopyrightControl();
+ * control.attachToMap(map)
+ *
+ *
+ * @see <a href="/example/ol-copyright">Openlayers copyright example</a>
+ *
+ * @extends {CopyrightControlCommon}
+ */
+class CopyrightControl extends CopyrightControlCommon {
+  frameState?: FrameState;
+
+  constructor(options: any) {
+    super(options);
+    this.onPostRender = this.onPostRender.bind(this);
+  }
+
+  getCopyrights() {
+    if (!this.frameState) {
+      return [];
+    }
+    let copyrights: string[] = [];
+
+    // This code loop comes mainly from ol.
+    this.frameState?.layerStatesArray.forEach((layerState: any) => {
+      const { layer } = layerState;
+      if (
+        this.frameState &&
+        inView(layerState, this.frameState.viewState) &&
+        layer &&
+        layer.getSource &&
+        layer.getSource() &&
+        layer.getSource().getAttributions()
+      ) {
+        copyrights = copyrights.concat(
+          layer.getSource().getAttributions()(this.frameState),
+        );
+      }
+    });
+    return removeDuplicate(copyrights);
+  }
+
+  activate() {
+    super.activate();
+    if (this.map) {
+      this.map.on('postrender', this.onPostRender);
+    }
+  }
+
+  deactivate() {
+    if (this.map) {
+      this.map.un('postrender', this.onPostRender);
+    }
+  }
+
+  onPostRender(evt: MapEvent) {
+    if (this.map && this.element) {
+      /**
+       * @private
+       */
+      this.frameState = evt.frameState || undefined;
+      this.render();
+    }
+  }
+}
+
+export default CopyrightControl;