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

package/{ol → src/ol}/layers/MapboxLayer.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import { toLonLat } from 'ol/proj';
-import mapboxgl from 'maplibre-gl';
+import { Map } from 'mapbox-gl';
 import Source from 'ol/source/Source';
 import OLLayer from 'ol/layer/Layer';
 import GeoJSON from 'ol/format/GeoJSON';
@@ -114,7 +114,7 @@ export default class MapboxLayer extends Layer {
           }
         }
 
-        return canvas;
+        return this.mbMap.getContainer();
       },
     });
 
@@ -186,6 +186,22 @@ export default class MapboxLayer extends Layer {
     );
   }
 
+  /**
+   * Terminate what was initialized in init function. Remove layer, events...
+   */
+  terminate() {
+    if (this.mbMap) {
+      this.mbMap.off('idle', this.updateAttribution);
+      // Some asynchrone repaints are triggered even if the mbMap has been removed,
+      // to avoid display of errors we set an empty function.
+      this.mbMap.triggerRepaint = () => {};
+      this.mbMap.remove();
+      this.mbMap = null;
+    }
+    this.loaded = false;
+    super.terminate();
+  }
+
   /**
    * Returns a style URL with apiKey & apiKeyName infos.
    * @private
@@ -227,28 +243,23 @@ export default class MapboxLayer extends Layer {
       y = 0;
     }
 
-    const style = this.createStyleUrl();
-    try {
-      /**
-       * A mapbox map
-       * @type {mapboxgl.Map}
-       */
-      this.mbMap = new mapboxgl.Map({
-        style,
-        attributionControl: false,
-        boxZoom: false,
-        center: toLonLat([x, y]),
-        container: this.map.getTargetElement(),
-        interactive: false,
-        fadeDuration:
-          'fadeDuration' in this.options ? this.options.fadeDuration : 300,
-        // Needs to be true to able to export the canvas, but could lead to performance issue on mobile.
-        preserveDrawingBuffer: this.options.preserveDrawingBuffer || false,
-      });
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.warn('Failed creating mapbox map: ', err);
-    }
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.width = '100%';
+    container.style.height = '100%';
+
+    /**
+     * A mapbox map
+     * @type {mapboxgl.Map}
+     */
+    this.mbMap = new Map({
+      style: this.createStyleUrl(),
+      container,
+      interactive: false,
+      trackResize: false,
+      attributionControl: false,
+      ...(this.options.mapOptions || {}),
+    });
 
     // Options the last render run did happen. If something changes
     // we have to render again
@@ -263,6 +274,7 @@ export default class MapboxLayer extends Layer {
     };
 
     this.mbMap.once('load', () => {
+      this.mbMap.resize();
       /**
        * Is the map loaded.
        * @type {boolean}
@@ -270,8 +282,7 @@ export default class MapboxLayer extends Layer {
       this.loaded = true;
 
       /** @ignore */
-      this.copyrights =
-        this.copyrights || getMapboxMapCopyrights(this.mbMap) || [];
+      this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
 
       this.olLayer.getSource().setAttributions(this.copyrights);
 
@@ -300,9 +311,9 @@ export default class MapboxLayer extends Layer {
    * @private
    */
   updateAttribution(evt) {
-    const newAttributions =
-      this.copyrights || getMapboxMapCopyrights(evt.target) || [];
+    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
     if (this.copyrights.toString() !== newAttributions.toString()) {
+      this.copyrights = newAttributions;
       this.olLayer.getSource().setAttributions(newAttributions);
     }
   }
@@ -356,22 +367,6 @@ export default class MapboxLayer extends Layer {
     });
   }
 
-  /**
-   * Terminate what was initialized in init function. Remove layer, events...
-   */
-  terminate() {
-    if (this.mbMap) {
-      this.mbMap.off('idle', this.updateAttribution);
-      // Some asynchrone repaints are triggered even if the mbMap has been removed,
-      // to avoid display of errors we set an empty function.
-      this.mbMap.triggerRepaint = () => {};
-      this.mbMap.remove();
-      this.mbMap = null;
-    }
-    this.loaded = false;
-    super.terminate();
-  }
-
   /**
    * Create a copy of the MapboxLayer.
    * @param {Object} newOptions Options to override

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

@@ -1,6 +1,6 @@
-import Map from 'ol/Map';
+import OlMap from 'ol/Map';
 import View from 'ol/View';
-import maplibre from 'maplibre-gl';
+import gllib from 'mapbox-gl';
 import MapboxLayer from './MapboxLayer';
 
 let layer;
@@ -19,7 +19,7 @@ describe('MapboxLayer', () => {
         name: 'Layer',
         url: styleUrl,
       });
-      map = new Map({
+      map = new OlMap({
         target: document.createElement('div'),
         view: new View({ center: [0, 0] }),
       });
@@ -37,7 +37,7 @@ describe('MapboxLayer', () => {
 
     test('should initalized mapbox map and warn the user if there is no api key defined.', () => {
       layer.init(map);
-      expect(layer.mbMap).toBeInstanceOf(maplibre.Map);
+      expect(layer.mbMap).toBeInstanceOf(gllib.Map);
       expect(consoleOutput[0]).toBe(
         'No apiKey is defined for request to foo.com/styles',
       );
@@ -64,7 +64,7 @@ describe('MapboxLayer', () => {
         url: styleUrl,
         apiKey: 'apiKey',
       });
-      map = new Map({
+      map = new OlMap({
         target: document.createElement('div'),
         view: new View({ center: [0, 0] }),
       });

package/{ol → src/ol}/layers/MapboxStyleLayer.js

@@ -127,12 +127,6 @@ class MapboxStyleLayer extends Layer {
   init(map) {
     if (!this.mapboxLayer.map) {
       this.mapboxLayer.init(map);
-      /**
-       * An OpenLayers Layer.
-       * @type {ol/layer/Layer~Layer}
-       * @private
-       */
-      this.olLayer = this.mapboxLayer.olLayer;
     }
     super.init(map);
 

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

@@ -1,8 +1,8 @@
-import Map from 'ol/Map';
+import OlMap from 'ol/Map';
 import View from 'ol/View';
-import maplibre from 'maplibre-gl';
+import gllib from 'maplibre-gl';
 import Layer from './Layer';
-import MapboxLayer from './MapboxLayer';
+import MaplibreLayer from './MaplibreLayer';
 import MapboxStyleLayer from './MapboxStyleLayer';
 
 let source;
@@ -17,7 +17,7 @@ const styleLayer = {
 describe('MapboxStyleLayer', () => {
   beforeEach(() => {
     onClick = jest.fn();
-    source = new MapboxLayer({
+    source = new MaplibreLayer({
       name: 'Layer',
       apiKey: false,
     });
@@ -28,12 +28,21 @@ describe('MapboxStyleLayer', () => {
       styleLayer,
       onClick,
     });
-    map = new Map({
+    map = new OlMap({
       target: document.createElement('div'),
       view: new View({ center: [0, 0] }),
     });
   });
 
+  afterEach(() => {
+    if (layer.map) {
+      layer.terminate(map);
+    }
+    if (source.map) {
+      source.terminate(map);
+    }
+  });
+
   test('should be instanced.', () => {
     expect(layer).toBeInstanceOf(MapboxStyleLayer);
     expect(layer.styleLayers[0]).toBe(styleLayer);
@@ -43,12 +52,15 @@ describe('MapboxStyleLayer', () => {
   test('should not initalized mapbox map.', () => {
     layer.init();
     expect(layer.mbMap).toBe();
+    layer.terminate();
   });
 
   test('should initalized mapbox map.', () => {
     source.init(map);
     layer.init(map);
-    expect(layer.mapboxLayer.mbMap).toBeInstanceOf(maplibre.Map);
+    expect(layer.mapboxLayer.mbMap).toBeInstanceOf(gllib.Map);
+    layer.terminate();
+    source.terminate();
   });
 
   test('should add onClick callback.', () => {
@@ -61,6 +73,7 @@ describe('MapboxStyleLayer', () => {
     const spy = jest.spyOn(layer, 'terminate');
     layer.init();
     expect(spy).toHaveBeenCalledTimes(1);
+    layer.terminate(map);
   });
 
   test('should return coordinates, features and a layer instance.', async () => {
@@ -70,6 +83,8 @@ describe('MapboxStyleLayer', () => {
     expect(data.coordinate).toEqual([50, 50]);
     expect(data.features).toEqual([]);
     expect(data.layer).toBeInstanceOf(MapboxStyleLayer);
+    layer.terminate(map);
+    source.terminate(map);
   });
 
   test('should call onClick callback', async () => {
@@ -81,6 +96,7 @@ describe('MapboxStyleLayer', () => {
     await map.dispatchEvent(evt);
     expect(onClick).toHaveBeenCalledTimes(1);
     expect(onClick).toHaveBeenCalledWith(features, layer, coordinate);
+    layer.terminate();
   });
 
   test('should call super class terminate function.', () => {

package/src/ol/layers/MaplibreLayer.js

@@ -0,0 +1,280 @@
+/* eslint-disable no-underscore-dangle */
+import { toLonLat } from 'ol/proj';
+import { Map } from 'maplibre-gl';
+import Source from 'ol/source/Source';
+import OLLayer from 'ol/layer/Layer';
+import GeoJSON from 'ol/format/GeoJSON';
+import { toDegrees } from 'ol/math';
+import Layer from './Layer';
+import { getMapboxMapCopyrights, getMapboxStyleUrl } from '../../common/utils';
+
+/**
+ * A class representing MaplibreLayer to display on BasicMap
+ *
+ * @example
+ * import { MaplibreLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new MaplibreLayer({
+ *   url: 'https://maps.geops.io/styles/travic_v2/style.json',
+ *   apikey: 'yourApiKey',
+ * });
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+export default class MaplibreLayer extends Layer {
+  /**
+   * Constructor.
+   *
+   * @param {Object} options
+   * @param {boolean} [options.preserveDrawingBuffer=false] If true able to export the canvas.
+   * @param {number} [options.fadeDuration=300] Duration of the fade effect in ms.
+   */
+  constructor(options = {}) {
+    const mbLayer = new OLLayer({
+      source: new Source({}),
+      render: (frameState) => {
+        if (!this.mbMap) {
+          // eslint-disable-next-line no-console
+          console.warn("Mapbox map doesn't exist.");
+          return null;
+        }
+
+        const canvas = this.mbMap.getCanvas();
+        const { viewState } = frameState;
+
+        const opacity = this.olLayer.getOpacity();
+        canvas.style.opacity = opacity;
+
+        // adjust view parameters in mapbox
+        this.mbMap.jumpTo({
+          center: toLonLat(viewState.center),
+          zoom: viewState.zoom - 1,
+          bearing: toDegrees(-viewState.rotation),
+          animate: false,
+        });
+
+        if (!canvas.isConnected) {
+          // The canvas is not connected to the DOM, request a map rendering at the next animation frame
+          // to set the canvas size.
+          this.map.render();
+        } else if (
+          canvas.width !== frameState.size[0] ||
+          canvas.height !== frameState.size[1]
+        ) {
+          this.mbMap.resize();
+        }
+
+        this.mbMap.redraw();
+
+        return this.mbMap.getContainer();
+      },
+    });
+
+    super({
+      ...options,
+      olLayer: mbLayer,
+    });
+
+    /**
+     * Url of the mapbox style.
+     * @type {string}
+     * @private
+     */
+    this.styleUrl = options.url;
+
+    /**
+     * Api key for the url of the mapbox style.
+     * If set to false, the apiKey is not required.
+     * @type {string}
+     * @private
+     */
+    this.apiKey = options.apiKey;
+
+    /**
+     * Name of the apiKey to set in the url request.
+     * Default is 'key'.
+     * @type {string}
+     * @private
+     */
+    this.apiKeyName = options.apiKeyName || 'key';
+
+    /** @ignore */
+    this.updateAttribution = this.updateAttribution.bind(this);
+  }
+
+  /**
+   * Initialize the layer and listen to feature clicks.
+   * @param {ol/Map~Map} map
+   */
+  init(map) {
+    super.init(map);
+
+    if (!this.map) {
+      return;
+    }
+
+    /**
+     * The feature format.
+     * @type {ol/format/GeoJSON}
+     */
+    this.format = new GeoJSON({
+      featureProjection: this.map.getView().getProjection(),
+    });
+
+    this.loadMbMap();
+  }
+
+  /**
+   * Terminate what was initialized in init function. Remove layer, events...
+   */
+  terminate() {
+    if (this.mbMap) {
+      this.mbMap.off('idle', this.updateAttribution);
+      // Some asynchrone repaints are triggered even if the mbMap has been removed,
+      // to avoid display of errors we set an empty function.
+      this.mbMap.triggerRepaint = () => {};
+      this.mbMap.remove();
+      this.mbMap = null;
+    }
+    this.loaded = false;
+    super.terminate();
+  }
+
+  /**
+   * Returns a style URL with apiKey & apiKeyName infos.
+   * @private
+   */
+  createStyleUrl() {
+    return getMapboxStyleUrl(this.apiKey, this.apiKeyName, this.styleUrl);
+  }
+
+  /**
+   * Create the mapbox map.
+   * @private
+   */
+  loadMbMap() {
+    this.olListenersKeys.push(
+      this.map.on('change:target', () => {
+        this.loadMbMap();
+      }),
+    );
+
+    if (!this.map.getTargetElement()) {
+      return;
+    }
+
+    if (!this.visible) {
+      // On next change of visibility we load the map
+      this.olListenersKeys.push(
+        this.once('change:visible', () => {
+          this.loadMbMap();
+        }),
+      );
+      return;
+    }
+
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.width = '100%';
+    container.style.height = '100%';
+
+    /**
+     * A mapbox map
+     * @type {mapboxgl.Map}
+     */
+    this.mbMap = new Map({
+      style: this.createStyleUrl(),
+      container,
+      interactive: false,
+      trackResize: false,
+      attributionControl: false,
+      ...(this.options.mapOptions || {}),
+    });
+
+    this.mbMap.once('load', () => {
+      /**
+       * Is the map loaded.
+       * @type {boolean}
+       */
+      this.loaded = true;
+
+      this.dispatchEvent({
+        type: 'load',
+        target: this,
+      });
+    });
+
+    this.mbMap.on('idle', this.updateAttribution);
+  }
+
+  /**
+   * Update attributions of the source.
+   * @private
+   */
+  updateAttribution(evt) {
+    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
+    if (this.copyrights?.toString() !== newAttributions.toString()) {
+      this.copyrights = newAttributions;
+      this.olLayer.getSource().setAttributions(newAttributions);
+    }
+  }
+
+  /**
+   * Request feature information for a given coordinate.
+   * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
+   * @param {Object} options A [mapboxgl.Map#queryrenderedfeatures](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures) options parameter.
+   * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate. The original Mapbox feature is available as a property named 'mapboxFeature'.
+   */
+  getFeatureInfoAtCoordinate(coordinate, options) {
+    // Ignore the getFeatureInfo until the mapbox map is loaded
+    if (
+      !options ||
+      !this.format ||
+      !this.mbMap ||
+      !this.mbMap.isStyleLoaded()
+    ) {
+      return Promise.resolve({ coordinate, features: [], layer: this });
+    }
+
+    let pixel = coordinate && this.mbMap.project(toLonLat(coordinate));
+
+    if (this.hitTolerance) {
+      const { x, y } = pixel;
+      pixel = [
+        { x: x - this.hitTolerance, y: y - this.hitTolerance },
+        { x: x + this.hitTolerance, y: y + this.hitTolerance },
+      ];
+    }
+
+    // At this point we get GeoJSON Mapbox feature, we transform it to an OpenLayers
+    // feature to be consistent with other layers.
+    const features = this.mbMap
+      .queryRenderedFeatures(pixel, options)
+      .map((feature) => {
+        const olFeature = this.format.readFeature(feature);
+        if (olFeature) {
+          // We save the original mapbox feature to avoid losing informations
+          // potentially needed for other functionnality like highlighting
+          // (id, layer id, source, sourceLayer ...)
+          olFeature.set('mapboxFeature', feature);
+        }
+        return olFeature;
+      });
+
+    return Promise.resolve({
+      layer: this,
+      features,
+      coordinate,
+    });
+  }
+
+  /**
+   * Create a copy of the MapboxLayer.
+   * @param {Object} newOptions Options to override
+   * @return {MapboxLayer} A MapboxLayer
+   */
+  clone(newOptions) {
+    return new MaplibreLayer({ ...this.options, ...newOptions });
+  }
+}

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

@@ -7,7 +7,7 @@ let layer;
 let onClick;
 let olMap;
 
-describe('TrajservLayer', () => {
+describe('RoutingLayer', () => {
   beforeEach(() => {
     global.fetch = fetch;
     fetch.resetMocks();