mobility-toolbox-js 2.3.10 → 2.4.0

package/src/mapbox/layers/RealtimeLayer.ts

@@ -1,350 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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;