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

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

@@ -1,180 +1,162 @@
-import OlMap from 'ol/Map';
-import View from 'ol/View';
-import gllib from 'maplibre-gl';
-import Layer from './Layer';
-import MaplibreLayer from './MaplibreLayer';
-import MapboxStyleLayer from './MapboxStyleLayer';
-
+import OlMap from "ol/Map";
+import View from "ol/View";
+import gllib from "maplibre-gl";
+import Layer from "./Layer";
+import MaplibreLayer from "./MaplibreLayer";
+import MapboxStyleLayer from "./MapboxStyleLayer";
 let source;
 let layer;
 let map;
 let onClick;
-
 const styleLayer = {
-  id: 'layer',
+  id: "layer"
 };
-
-describe('MapboxStyleLayer', () => {
+describe("MapboxStyleLayer", () => {
   beforeEach(() => {
     onClick = jest.fn();
     source = new MaplibreLayer({
-      name: 'Layer',
-      apiKey: false,
+      name: "Layer",
+      apiKey: false
     });
     layer = new MapboxStyleLayer({
-      name: 'mapbox layer',
+      name: "mapbox layer",
       visible: true,
       mapboxLayer: source,
       styleLayer,
-      onClick,
+      onClick
     });
     map = new OlMap({
-      target: document.createElement('div'),
-      view: new View({ center: [0, 0] }),
+      target: document.createElement("div"),
+      view: new View({ center: [0, 0] })
     });
   });
-
   afterEach(() => {
     if (layer.map) {
-      layer.terminate(map);
+      layer.detachFromMap(map);
     }
     if (source.map) {
-      source.terminate(map);
+      source.detachFromMap(map);
     }
   });
-
-  test('should be instanced.', () => {
+  test("should be instanced.", () => {
     expect(layer).toBeInstanceOf(MapboxStyleLayer);
     expect(layer.styleLayers[0]).toBe(styleLayer);
     expect(layer.clickCallbacks[0]).toBe(onClick);
   });
-
-  test('should not initalized mapbox map.', () => {
-    layer.init();
+  test("should not initalized mapbox map.", () => {
+    layer.attachToMap();
     expect(layer.mbMap).toBe();
-    layer.terminate();
+    layer.detachFromMap();
   });
-
-  test('should initalized mapbox map.', () => {
-    source.init(map);
-    layer.init(map);
+  test("should initalized mapbox map.", () => {
+    source.attachToMap(map);
+    layer.attachToMap(map);
     expect(layer.mapboxLayer.mbMap).toBeInstanceOf(gllib.Map);
-    layer.terminate();
-    source.terminate();
+    layer.detachFromMap();
+    source.detachFromMap();
   });
-
-  test('should add onClick callback.', () => {
+  test("should add onClick callback.", () => {
     const onClick2 = jest.fn();
     layer.onClick(onClick2);
     expect(layer.clickCallbacks[1]).toBe(onClick2);
   });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init();
+  test("should called terminate on initalization.", () => {
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap();
     expect(spy).toHaveBeenCalledTimes(1);
-    layer.terminate(map);
+    layer.detachFromMap(map);
   });
-
-  test('should return coordinates, features and a layer instance.', async () => {
-    source.init(map);
-    layer.init(map);
+  test("should return coordinates, features and a layer instance.", async () => {
+    source.attachToMap(map);
+    layer.attachToMap(map);
     const data = await layer.getFeatureInfoAtCoordinate([50, 50]);
     expect(data.coordinate).toEqual([50, 50]);
     expect(data.features).toEqual([]);
     expect(data.layer).toBeInstanceOf(MapboxStyleLayer);
-    layer.terminate(map);
-    source.terminate(map);
+    layer.detachFromMap(map);
+    source.detachFromMap(map);
   });
-
-  test('should call onClick callback', async () => {
+  test("should call onClick callback", async () => {
     const coordinate = [500, 500];
     const features = [];
-    const evt = { type: 'singleclick', map, coordinate };
-    layer.init(map);
+    const evt = { type: "singleclick", map, coordinate };
+    layer.attachToMap(map);
     expect(onClick).toHaveBeenCalledTimes(0);
     await map.dispatchEvent(evt);
     expect(onClick).toHaveBeenCalledTimes(1);
     expect(onClick).toHaveBeenCalledWith(features, layer, coordinate);
-    layer.terminate();
+    layer.detachFromMap();
   });
-
-  test('should call super class terminate function.', () => {
-    layer.init(map);
-    const spy = jest.spyOn(Layer.prototype, 'terminate');
-    layer.terminate(map);
+  test("should call super class terminate function.", () => {
+    layer.attachToMap(map);
+    const spy = jest.spyOn(Layer.prototype, "detachFromMap");
+    layer.detachFromMap(map);
     expect(spy).toHaveBeenCalledTimes(1);
     spy.mockRestore();
   });
-
-  test('should call super class terminate if the mapboxLayer associated has been terminated before.', () => {
-    layer.init(map);
-    source.terminate(map);
-    const spy = jest.spyOn(Layer.prototype, 'terminate');
-    layer.terminate(map);
+  test("should call super class terminate if the mapboxLayer associated has been terminated before.", () => {
+    layer.attachToMap(map);
+    source.detachFromMap(map);
+    const spy = jest.spyOn(Layer.prototype, "detachFromMap");
+    layer.detachFromMap(map);
     expect(spy).toHaveBeenCalledTimes(1);
     spy.mockRestore();
   });
-
-  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(MapboxStyleLayer);
   });
-
-  test('should add layer on load', () => {
+  test("should add layer on load", () => {
     const style = { layers: [] };
     layer.mapboxLayer.mbMap = {
       getStyle: () => style,
       getSource: () => ({}),
       getLayer: () => null,
       setLayoutProperty: () => null,
-      addLayer: (styleLayerr) => style.layers.push(styleLayerr),
+      addLayer: (styleLayerr) => style.layers.push(styleLayerr)
     };
     layer.onLoad();
     expect(style.layers[0]).toBe(styleLayer);
   });
-
-  describe('should set disabled property to false on load', () => {
-    test('when layer uses styleLayer property', () => {
+  describe("should set disabled property to false on load", () => {
+    test("when layer uses styleLayer property", () => {
       const styles = { layers: [] };
       layer.mapboxLayer.mbMap = {
         getStyle: () => styles,
         getSource: () => ({}),
         getLayer: () => null,
         setLayoutProperty: () => null,
-        addLayer: (styleLayerr) => styles.layers.push(styleLayerr),
+        addLayer: (styleLayerr) => styles.layers.push(styleLayerr)
       };
       expect(layer).toBeInstanceOf(MapboxStyleLayer);
       layer.onLoad();
       expect(layer.disabled).toBe(false);
     });
   });
-
-  describe('should set disabled property to true on load', () => {
-    test('when layer uses styleLayersFilter property', () => {
+  describe("should set disabled property to true on load", () => {
+    test("when layer uses styleLayersFilter property", () => {
       const styles = { layers: [styleLayer] };
       const layer2 = new MapboxStyleLayer({
-        name: 'mapbox layer',
+        name: "mapbox layer",
         mapboxLayer: source,
-        styleLayersFilter: () => false,
+        styleLayersFilter: () => false
       });
       layer2.mapboxLayer.mbMap = {
         getStyle: () => styles,
         getSource: () => ({}),
         getLayer: () => null,
         setLayoutProperty: () => null,
-        addLayer: () => ({}),
+        addLayer: () => ({})
       };
       layer2.onLoad();
       expect(layer2.disabled).toBe(true);
     });
   });
-
-  describe('#getFeatureInfoAtCoordinate()', () => {
+  describe("#getFeatureInfoAtCoordinate()", () => {
     beforeEach(() => {
-      source.init(map);
+      source.attachToMap(map);
       source.mbMap.isStyleLoaded = jest.fn(() => true);
       source.mbMap.getSource = jest.fn(() => true);
     });
@@ -182,78 +164,65 @@ describe('MapboxStyleLayer', () => {
       source.mbMap.getSource.mockRestore();
       source.mbMap.isStyleLoaded.mockRestore();
     });
-
-    test('should request features on layers ids from styleLayers property', () => {
+    test("should request features on layers ids from styleLayers property", () => {
       source.mbMap.getStyle = jest.fn(() => ({
-        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }],
+        layers: [{ id: "foo" }, { id: "layer" }, { id: "bar" }]
       }));
-      layer.init(map);
-      layer.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
-        Promise.resolve({ features: [] }),
-      );
-      layer.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(layer.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith(
-        [0, 0],
-        { layers: ['layer'], validate: false },
-      );
+      layer.attachToMap(map);
+      layer.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() => Promise.resolve({ features: [] }));
+      layer.getFeatureInfoAtCoordinate([0, 0]).then(() => {
+      });
+      expect(layer.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith([0, 0], { layers: ["layer"], validate: false });
       layer.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
       source.mbMap.getStyle.mockRestore();
     });
-
-    test('should request features on layers ids from styleLayersFilter property', () => {
+    test("should request features on layers ids from styleLayersFilter property", () => {
       source.mbMap.getStyle = jest.fn(() => ({
-        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }, { id: 'foo2' }],
+        layers: [{ id: "foo" }, { id: "layer" }, { id: "bar" }, { id: "foo2" }]
       }));
       const layer2 = new MapboxStyleLayer({
-        name: 'mapbox layer',
+        name: "mapbox layer",
         visible: true,
         mapboxLayer: source,
         styleLayer,
-        styleLayersFilter: ({ id }) => /foo/.test(id),
+        styleLayersFilter: ({ id }) => /foo/.test(id)
       });
-      layer2.init(map);
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
-        Promise.resolve({ features: [] }),
-      );
-      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(
-        layer2.mapboxLayer.getFeatureInfoAtCoordinate,
-      ).toHaveBeenCalledWith([0, 0], {
-        layers: ['foo', 'foo2'],
-        validate: false,
+      layer2.attachToMap(map);
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() => Promise.resolve({ features: [] }));
+      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {
+      });
+      expect(layer2.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith([0, 0], {
+        layers: ["foo", "foo2"],
+        validate: false
       });
       layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
       source.mbMap.getStyle.mockRestore();
     });
-
-    test('should request features on layers ids from queryRenderedLayersFilter property', () => {
+    test("should request features on layers ids from queryRenderedLayersFilter property", () => {
       source.mbMap.getStyle = jest.fn(() => ({
         layers: [
-          { id: 'foo' },
-          { id: 'bar2' },
-          { id: 'layer' },
-          { id: 'bar' },
-          { id: 'foo2' },
-        ],
+          { id: "foo" },
+          { id: "bar2" },
+          { id: "layer" },
+          { id: "bar" },
+          { id: "foo2" }
+        ]
       }));
       const layer2 = new MapboxStyleLayer({
-        name: 'mapbox layer',
+        name: "mapbox layer",
         visible: true,
         mapboxLayer: source,
         styleLayer,
         styleLayersFilter: ({ id }) => /foo/.test(id),
-        queryRenderedLayersFilter: ({ id }) => /bar/.test(id),
+        queryRenderedLayersFilter: ({ id }) => /bar/.test(id)
+      });
+      layer2.attachToMap(map);
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() => Promise.resolve({ features: [] }));
+      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {
       });
-      layer2.init(map);
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
-        Promise.resolve({ features: [] }),
-      );
-      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(
-        layer2.mapboxLayer.getFeatureInfoAtCoordinate,
-      ).toHaveBeenCalledWith([0, 0], {
-        layers: ['bar2', 'bar'],
-        validate: false,
+      expect(layer2.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith([0, 0], {
+        layers: ["bar2", "bar"],
+        validate: false
       });
       layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
       source.mbMap.getStyle.mockRestore();

package/ol/layers/MaplibreLayer.js

@@ -0,0 +1,139 @@
+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(options = {}) {
+    const mbLayer = new OLLayer({
+      source: new Source({}),
+      render: (frameState) => {
+        if (!this.mbMap) {
+          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;
+        this.mbMap.jumpTo({
+          center: toLonLat(viewState.center),
+          zoom: viewState.zoom - 1,
+          bearing: toDegrees(-viewState.rotation),
+          animate: false
+        });
+        if (!canvas.isConnected) {
+          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
+    });
+    this.styleUrl = options.url;
+    this.apiKey = options.apiKey;
+    this.apiKeyName = options.apiKeyName || "key";
+    this.updateAttribution = this.updateAttribution.bind(this);
+  }
+  attachToMap(map) {
+    super.attachToMap(map);
+    if (!this.map) {
+      return;
+    }
+    this.format = new GeoJSON({
+      featureProjection: this.map.getView().getProjection()
+    });
+    this.loadMbMap();
+  }
+  detachFromMap() {
+    if (this.mbMap) {
+      this.mbMap.off("idle", this.updateAttribution);
+      this.mbMap.triggerRepaint = () => {
+      };
+      this.mbMap.remove();
+      this.mbMap = null;
+    }
+    this.loaded = false;
+    super.detachFromMap();
+  }
+  createStyleUrl() {
+    return getMapboxStyleUrl(this.apiKey, this.apiKeyName, this.styleUrl);
+  }
+  loadMbMap() {
+    this.olListenersKeys.push(this.map.on("change:target", () => {
+      this.loadMbMap();
+    }));
+    if (!this.map.getTargetElement()) {
+      return;
+    }
+    if (!this.visible) {
+      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%";
+    this.mbMap = new Map({
+      style: this.createStyleUrl(),
+      container,
+      interactive: false,
+      trackResize: false,
+      attributionControl: false,
+      ...this.options.mapOptions || {}
+    });
+    this.mbMap.once("load", () => {
+      this.loaded = true;
+      this.dispatchEvent({
+        type: "load",
+        target: this
+      });
+    });
+    this.mbMap.on("idle", this.updateAttribution);
+  }
+  updateAttribution(evt) {
+    const newAttributions = getMapboxMapCopyrights(evt.target) || [];
+    if (this.copyrights?.toString() !== newAttributions.toString()) {
+      this.copyrights = newAttributions;
+      this.olLayer.getSource().setAttributions(newAttributions);
+    }
+  }
+  getFeatureInfoAtCoordinate(coordinate, options) {
+    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 }
+      ];
+    }
+    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
+    });
+  }
+  clone(newOptions) {
+    return new MaplibreLayer({ ...this.options, ...newOptions });
+  }
+}

package/ol/layers/RoutingLayer.js

@@ -0,0 +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";
+const circleStyle = new Circle({
+  radius: 6,
+  fill: new Fill({
+    color: [255, 0, 0, 1]
+  }),
+  stroke: new Stroke({
+    color: [0, 0, 0, 1],
+    width: 1
+  })
+});
+const blackBorder = new Style({
+  stroke: new Stroke({
+    color: [0, 0, 0, 1],
+    width: 5
+  })
+});
+const redLine = new Style({
+  image: circleStyle,
+  stroke: new Stroke({
+    color: [255, 0, 0, 1],
+    width: 3
+  })
+});
+const dashedRedLine = new Style({
+  image: circleStyle,
+  stroke: new Stroke({
+    color: [255, 0, 0, 1],
+    width: 3,
+    lineDash: [1, 10]
+  })
+});
+const defaultStyleFunction = (feature, resolution) => {
+  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") {
+    return [blackBorder, redLine];
+  }
+  return [dashedRedLine];
+};
+class RoutingLayer extends Layer {
+  constructor(options = {}) {
+    super(options);
+    this.olLayer = options.olLayer || new Vector({
+      source: new VectorSource(),
+      style: options.style || defaultStyleFunction
+    });
+  }
+  clone(newOptions) {
+    return new RoutingLayer({ ...this.options, ...newOptions });
+  }
+}
+export default RoutingLayer;

package/{src/ol → 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);
   });
 });