mobility-toolbox-js 2.0.0 → 2.0.1-beta.13

package/ol/layers/MaplibreLayer.js

@@ -1,217 +1,106 @@
-/* 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}
- */
+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";
 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,
+          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]
-        ) {
+        } 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,
+      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.apiKeyName = options.apiKeyName || "key";
     this.updateAttribution = this.updateAttribution.bind(this);
   }
-
-  /**
-   * Initialize the layer and listen to feature clicks.
-   * @param {ol/Map~Map} map
-   */
-  init(map) {
-    super.init(map);
-
+  attachToMap(map) {
+    super.attachToMap(map);
     if (!this.map) {
       return;
     }
-
-    /**
-     * The feature format.
-     * @type {ol/format/GeoJSON}
-     */
     this.format = new GeoJSON({
-      featureProjection: this.map.getView().getProjection(),
+      featureProjection: this.map.getView().getProjection()
     });
-
     this.loadMbMap();
   }
-
-  /**
-   * Terminate what was initialized in init function. Remove layer, events...
-   */
-  terminate() {
+  detachFromMap() {
     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.off("idle", this.updateAttribution);
+      this.mbMap.triggerRepaint = () => {
+      };
       this.mbMap.remove();
       this.mbMap = null;
     }
     this.loaded = false;
-    super.terminate();
+    super.detachFromMap();
   }
-
-  /**
-   * 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();
-      }),
-    );
-
+    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();
-        }),
-      );
+      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}
-     */
+    const container = document.createElement("div");
+    container.style.position = "absolute";
+    container.style.width = "100%";
+    container.style.height = "100%";
     this.mbMap = new Map({
       style: this.createStyleUrl(),
       container,
       interactive: false,
       trackResize: false,
       attributionControl: false,
-      ...(this.options.mapOptions || {}),
+      ...this.options.mapOptions || {}
     });
-
-    this.mbMap.once('load', () => {
-      /**
-       * Is the map loaded.
-       * @type {boolean}
-       */
+    this.mbMap.once("load", () => {
       this.loaded = true;
-
       this.dispatchEvent({
-        type: 'load',
-        target: this,
+        type: "load",
+        target: this
       });
     });
-
-    this.mbMap.on('idle', this.updateAttribution);
+    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()) {
@@ -219,61 +108,31 @@ export default class MaplibreLayer extends Layer {
       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()
-    ) {
+    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 },
+        { 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;
-      });
-
+    const features = this.mbMap.queryRenderedFeatures(pixel, options).map((feature) => {
+      const olFeature = this.format.readFeature(feature);
+      if (olFeature) {
+        olFeature.set("mapboxFeature", feature);
+      }
+      return olFeature;
+    });
     return Promise.resolve({
       layer: this,
       features,
-      coordinate,
+      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/layers/RoutingLayer.js

@@ -1,91 +1,61 @@
-import { Circle, Fill, Stroke, Style } from 'ol/style';
-import { Vector as VectorSource } from 'ol/source';
-import { Vector } from 'ol/layer';
-import Layer from './Layer';
-
+import { Circle, Fill, Stroke, Style } from "ol/style";
+import { Vector as VectorSource } from "ol/source";
+import { Vector } from "ol/layer";
+import Layer from "./Layer";
 const circleStyle = new Circle({
   radius: 6,
   fill: new Fill({
-    color: [255, 0, 0, 1],
+    color: [255, 0, 0, 1]
   }),
   stroke: new Stroke({
     color: [0, 0, 0, 1],
-    width: 1,
-  }),
+    width: 1
+  })
 });
-
 const blackBorder = new Style({
   stroke: new Stroke({
     color: [0, 0, 0, 1],
-    width: 5,
-  }),
+    width: 5
+  })
 });
-
 const redLine = new Style({
   image: circleStyle,
   stroke: new Stroke({
     color: [255, 0, 0, 1],
-    width: 3,
-  }),
+    width: 3
+  })
 });
-
 const dashedRedLine = new Style({
   image: circleStyle,
   stroke: new Stroke({
     color: [255, 0, 0, 1],
     width: 3,
-    lineDash: [1, 10],
-  }),
+    lineDash: [1, 10]
+  })
 });
-
 const defaultStyleFunction = (feature, resolution) => {
-  const minResolution = feature.get('minResolution');
-  const maxResolution = feature.get('maxResolution');
+  const minResolution = feature.get("minResolution");
+  const maxResolution = feature.get("maxResolution");
   const inRange = resolution <= minResolution && resolution > maxResolution;
-
   if (minResolution && maxResolution && !inRange) {
     return null;
   }
-  const mot = feature.get('mot');
-
-  if (mot !== 'foot') {
+  const mot = feature.get("mot");
+  if (mot !== "foot") {
     return [blackBorder, redLine];
   }
-
   return [dashedRedLine];
 };
-
-/**
- * A class use to display vector data.
- *
- * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
- * @extends {Layer}
- */
 class RoutingLayer extends Layer {
-  /**
-   * Constructor.
-   * @param {Object} [options]
-   * @param {ol/style/Style~StyleLike} [options.style] Style to be used for routes, uses (ol/StyleLike) [https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike] instances
-   */
   constructor(options = {}) {
     super(options);
-
-    this.olLayer =
-      options.olLayer ||
-      new Vector({
-        source: new VectorSource(),
-        style: options.style || defaultStyleFunction,
-      });
+    this.olLayer = options.olLayer || new Vector({
+      source: new VectorSource(),
+      style: options.style || defaultStyleFunction
+    });
   }
-
-  /**
-   * Create a copy of the RoutingLayer.
-   * @param {Object} newOptions Options to override
-   * @return {RoutingLayer} A RoutingLayer
-   */
   clone(newOptions) {
     return new RoutingLayer({ ...this.options, ...newOptions });
   }
 }
-
 export default RoutingLayer;

package/ol/layers/RoutingLayer.test.js

@@ -1,49 +1,40 @@
-import fetch from 'jest-fetch-mock';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import RoutingLayer from './RoutingLayer';
-
+import fetch from "jest-fetch-mock";
+import Map from "ol/Map";
+import View from "ol/View";
+import RoutingLayer from "./RoutingLayer";
 let layer;
 let onClick;
 let olMap;
-
-describe('RoutingLayer', () => {
+describe("RoutingLayer", () => {
   beforeEach(() => {
     global.fetch = fetch;
     fetch.resetMocks();
-
     onClick = jest.fn();
     layer = new RoutingLayer({
       onClick,
-      apiKey: 'apiKey',
+      apiKey: "apiKey"
     });
-
     olMap = new Map({
       view: new View({
         center: [831634, 5933959],
-        zoom: 9,
-      }),
+        zoom: 9
+      })
     });
   });
-
-  test('should be instanced.', () => {
+  test("should be instanced.", () => {
     expect(layer).toBeInstanceOf(RoutingLayer);
     expect(layer.clickCallbacks[0]).toBe(onClick);
   });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-
+  test("should called terminate on initalization.", () => {
+    const spy = jest.spyOn(layer, "detachFromMap");
     fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
-
-    layer.init(olMap);
+    layer.attachToMap(olMap);
     expect(spy).toHaveBeenCalledTimes(1);
   });
-
-  test('should clone', () => {
-    const clone = layer.clone({ name: 'clone' });
+  test("should clone", () => {
+    const clone = layer.clone({ name: "clone" });
     expect(clone).not.toBe(layer);
-    expect(clone.name).toBe('clone');
+    expect(clone.name).toBe("clone");
     expect(clone).toBeInstanceOf(RoutingLayer);
   });
 });