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

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

@@ -1,180 +1,154 @@
-import OlMap from 'ol/Map';
-import View from 'ol/View';
-import gllib from 'mapbox-gl';
-import MapboxLayer from './MapboxLayer';
-
+import OlMap from "ol/Map";
+import View from "ol/View";
+import gllib from "mapbox-gl";
+import MapboxLayer from "./MapboxLayer";
 let layer;
 let map;
 let consoleOutput;
-const styleUrl = 'foo.com/styles';
-
-describe('MapboxLayer', () => {
-  describe('without apiKey', () => {
+const styleUrl = "foo.com/styles";
+describe("MapboxLayer", () => {
+  describe("without apiKey", () => {
     beforeEach(() => {
-      // Mock console statement
       consoleOutput = [];
-      // eslint-disable-next-line no-console
       console.warn = (message) => consoleOutput.push(message);
       layer = new MapboxLayer({
-        name: 'Layer',
-        url: styleUrl,
+        name: "Layer",
+        url: styleUrl
       });
       map = new OlMap({
-        target: document.createElement('div'),
-        view: new View({ center: [0, 0] }),
+        target: document.createElement("div"),
+        view: new View({ center: [0, 0] })
       });
     });
-
-    test('should be instanced.', () => {
+    test("should be instanced.", () => {
       expect(layer).toBeInstanceOf(MapboxLayer);
       expect(layer.styleUrl).toBe(styleUrl);
     });
-
-    test('should not initalized mapbox map.', () => {
-      layer.init();
+    test("should not initalized mapbox map.", () => {
+      layer.attachToMap();
       expect(layer.mbMap).toBe();
     });
-
-    test('should initalized mapbox map and warn the user if there is no api key defined.', () => {
-      layer.init(map);
+    test("should initalized mapbox map and warn the user if there is no api key defined.", () => {
+      layer.attachToMap(map);
       expect(layer.mbMap).toBeInstanceOf(gllib.Map);
-      expect(consoleOutput[0]).toBe(
-        'No apiKey is defined for request to foo.com/styles',
-      );
+      expect(consoleOutput[0]).toBe("No apiKey is defined for request to foo.com/styles");
     });
-
-    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);
     });
-
-    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(MapboxLayer);
     });
   });
-
-  describe('with apiKey', () => {
+  describe("with apiKey", () => {
     beforeEach(() => {
       layer = new MapboxLayer({
-        name: 'Layer',
+        name: "Layer",
         url: styleUrl,
-        apiKey: 'apiKey',
+        apiKey: "apiKey"
       });
       map = new OlMap({
-        target: document.createElement('div'),
-        view: new View({ center: [0, 0] }),
+        target: document.createElement("div"),
+        view: new View({ center: [0, 0] })
       });
     });
-
-    test('should be instanced with apiKey.', () => {
+    test("should be instanced with apiKey.", () => {
       expect(layer).toBeInstanceOf(MapboxLayer);
       expect(layer.styleUrl).toBe(styleUrl);
     });
-
-    test('should not initalized mapbox map.', () => {
-      layer.init();
+    test("should not initalized mapbox map.", () => {
+      layer.attachToMap();
       expect(layer.mbMap).toBe();
     });
-
     test("should initalized mapbox map, with 'apiKey' prop", () => {
       const layer1 = new MapboxLayer({
-        name: 'Layer',
+        name: "Layer",
         url: styleUrl,
-        apiKey: 'apiKeyVal',
+        apiKey: "apiKeyVal"
       });
-      layer1.init(map);
-      expect(layer1.mbMap.options.style).toBe('foo.com/styles?key=apiKeyVal');
+      layer1.attachToMap(map);
+      expect(layer1.mbMap.options.style).toBe("foo.com/styles?key=apiKeyVal");
     });
-
     test("should initalized mapbox map, with 'apiKeyName' prop", () => {
       const layer1 = new MapboxLayer({
-        name: 'Layer',
+        name: "Layer",
         url: styleUrl,
-        apiKey: 'test',
-        apiKeyName: 'apiKey',
+        apiKey: "test",
+        apiKeyName: "apiKey"
       });
-      layer1.init(map);
-      expect(layer1.mbMap.options.style).toBe('foo.com/styles?apiKey=test');
+      layer1.attachToMap(map);
+      expect(layer1.mbMap.options.style).toBe("foo.com/styles?apiKey=test");
     });
   });
-
-  describe('#getFeatureInfoAtCoordinate()', () => {
+  describe("#getFeatureInfoAtCoordinate()", () => {
     let layer1;
     beforeEach(() => {
       layer1 = new MapboxLayer({
-        name: 'Layer',
+        name: "Layer",
         url: styleUrl,
-        apiKey: 'test',
-        apiKeyName: 'apiKey',
+        apiKey: "test",
+        apiKeyName: "apiKey"
       });
-      layer1.init(map);
+      layer1.attachToMap(map);
       layer1.mbMap.isStyleLoaded = jest.fn(() => true);
       layer1.mbMap.getSource = jest.fn(() => true);
     });
-
     afterEach(() => {
       layer1.mbMap.getSource.mockRestore();
       layer1.mbMap.isStyleLoaded.mockRestore();
     });
-
-    test('should set the mapboxFeature as a property', (done) => {
+    test("should set the mapboxFeature as a property", (done) => {
       const mapboxFeature = {
-        id: '2',
-        type: 'Feature',
+        id: "2",
+        type: "Feature",
         properties: {
-          foo: 'bar',
+          foo: "bar"
         },
-        source: 'barr',
-        sourceLayer: 'fooo',
+        source: "barr",
+        sourceLayer: "fooo"
       };
       layer1.mbMap.project = jest.fn((coord) => ({ x: coord[0], y: coord[1] }));
       layer1.mbMap.queryRenderedFeatures = jest.fn(() => [mapboxFeature]);
       layer1.getFeatureInfoAtCoordinate([0, 0], {}).then((featureInfo) => {
-        expect(featureInfo.features[0].get('mapboxFeature')).toBe(
-          mapboxFeature,
-        );
+        expect(featureInfo.features[0].get("mapboxFeature")).toBe(mapboxFeature);
         done();
       });
       layer1.mbMap.project.mockRestore();
       layer1.mbMap.queryRenderedFeatures.mockRestore();
     });
-    describe('should use hitTolerance property', () => {
+    describe("should use hitTolerance property", () => {
       beforeEach(() => {
         layer1.mbMap.project = jest.fn((coord) => ({
           x: coord[0],
-          y: coord[1],
+          y: coord[1]
         }));
       });
-
       afterEach(() => {
         layer1.mbMap.project.mockRestore();
         layer1.mbMap.queryRenderedFeatures.mockRestore();
       });
-
-      test('when hitTolerance is not set', (done) => {
+      test("when hitTolerance is not set", (done) => {
         layer1.mbMap.queryRenderedFeatures = jest.fn((pixelBounds) => {
-          // Use default hoitTolerance
           expect(pixelBounds).toEqual([
             { x: -5, y: -5 },
-            { x: 5, y: 5 },
+            { x: 5, y: 5 }
           ]);
           done();
           return [];
         });
         layer1.getFeatureInfoAtCoordinate([0, 0], {});
       });
-
-      test('when hitTolerance is set to 10', (done) => {
+      test("when hitTolerance is set to 10", (done) => {
         layer1.hitTolerance = 10;
         layer1.mbMap.queryRenderedFeatures = jest.fn((pixelBounds) => {
-          // Use default hoitTolerance
           expect(pixelBounds).toEqual([
             { x: -10, y: -10 },
-            { x: 10, y: 10 },
+            { x: 10, y: 10 }
           ]);
           done();
           return [];

package/ol/layers/MapboxStyleLayer.js

@@ -0,0 +1,187 @@
+import Layer from "./Layer";
+class MapboxStyleLayer extends Layer {
+  constructor(options = {}) {
+    super(options);
+    this.mapboxLayer = options.mapboxLayer;
+    this.disabled = false;
+    this.styleLayersFilter = options.styleLayersFilter;
+    this.beforeId = options.beforeId;
+    this.featureInfoFilter = options.featureInfoFilter || ((obj) => obj);
+    this.queryRenderedLayersFilter = options.queryRenderedLayersFilter;
+    this.highlightedFeatures = [];
+    this.selectedFeatures = [];
+    this.styleLayers = (options.styleLayer ? [options.styleLayer] : options.styleLayers) || [];
+    this.addStyleLayers = this.addStyleLayers.bind(this);
+    this.onLoad = this.onLoad.bind(this);
+    if (options.filters) {
+      this.addDynamicFilters = () => {
+        this.setFilter(typeof options.filters === "function" ? options.filters(this) : options.filters);
+      };
+    }
+    if (!this.styleLayersFilter && this.styleLayers) {
+      const ids = this.styleLayers.map((s) => s.id);
+      this.styleLayersFilter = (styleLayer) => ids.includes(styleLayer.id);
+    }
+  }
+  attachToMap(map) {
+    if (!this.mapboxLayer.map) {
+      this.mapboxLayer.attachToMap(map);
+    }
+    super.attachToMap(map);
+    if (!this.map) {
+      return;
+    }
+    const { mbMap } = this.mapboxLayer;
+    if (!mbMap) {
+      this.olListenersKeys.push(this.map.on("change:target", () => {
+        this.attachToMap(map);
+      }));
+      return;
+    }
+    if (this.mapboxLayer.loaded || mbMap.isStyleLoaded() || mbMap.loaded()) {
+      this.onLoad();
+    } else {
+      mbMap.once("load", this.onLoad);
+    }
+    this.olListenersKeys.push(this.on("change:visible", (evt) => {
+      this.applyLayoutVisibility(evt);
+    }));
+    this.olListenersKeys.push(this.mapboxLayer.on("load", () => {
+      this.onLoad();
+    }));
+  }
+  detachFromMap(map) {
+    const { mbMap } = this.mapboxLayer;
+    if (mbMap) {
+      mbMap.off("load", this.onLoad);
+      this.removeStyleLayers();
+    }
+    super.detachFromMap(map);
+  }
+  addStyleLayers() {
+    const { mbMap } = this.mapboxLayer;
+    if (!mbMap) {
+      return;
+    }
+    this.styleLayers.forEach((styleLayer) => {
+      const { id, source } = styleLayer;
+      if (mbMap.getSource(source) && !mbMap.getLayer(id)) {
+        mbMap.addLayer(styleLayer, this.beforeId);
+      }
+    });
+    this.applyLayoutVisibility();
+  }
+  removeStyleLayers() {
+    const { mbMap } = this.mapboxLayer;
+    if (!mbMap) {
+      return;
+    }
+    this.styleLayers.forEach((styleLayer) => {
+      if (mbMap.getLayer(styleLayer.id)) {
+        mbMap.removeLayer(styleLayer.id);
+      }
+    });
+  }
+  onLoad() {
+    this.addStyleLayers();
+    if (this.addDynamicFilters) {
+      this.addDynamicFilters();
+    }
+    const { mbMap } = this.mapboxLayer;
+    const style = mbMap.getStyle();
+    if (style && this.styleLayersFilter) {
+      const styles = style.layers.filter(this.styleLayersFilter);
+      this.disabled = !styles.length;
+    }
+  }
+  getFeatureInfoAtCoordinate(coordinate) {
+    const { mbMap } = this.mapboxLayer;
+    if (!mbMap || !mbMap.isStyleLoaded()) {
+      return Promise.resolve({ coordinate, features: [], layer: this });
+    }
+    let layers = this.styleLayers || [];
+    if (this.styleLayersFilter) {
+      layers = mbMap.getStyle().layers.filter(this.styleLayersFilter);
+    }
+    if (this.queryRenderedLayersFilter) {
+      layers = mbMap.getStyle().layers.filter(this.queryRenderedLayersFilter);
+    }
+    return this.mapboxLayer.getFeatureInfoAtCoordinate(coordinate, {
+      layers: layers.map((layer) => layer && layer.id),
+      validate: false
+    }).then((featureInfo) => {
+      const features = featureInfo.features.filter((feature) => this.featureInfoFilter(feature, this.map.getView().getResolution()));
+      this.highlight(features);
+      return { ...featureInfo, features, layer: this };
+    });
+  }
+  setFilter(filter) {
+    const { mbMap } = this.mapboxLayer;
+    if (!mbMap) {
+      return;
+    }
+    this.styleLayers.forEach(({ id }) => {
+      if (mbMap.getLayer(id)) {
+        mbMap.setFilter(id, filter);
+      }
+    });
+  }
+  setHoverState(features, state) {
+    const { mbMap } = this.mapboxLayer;
+    if (!features || !mbMap) {
+      return;
+    }
+    features.forEach((feature) => {
+      const { source, sourceLayer } = feature.get("mapboxFeature") || {};
+      if (!source && !sourceLayer || !feature.getId()) {
+        if (!feature.getId()) {
+          console.warn("No feature's id found. To use the feature state functionnality, tiles must be generated with --generate-ids. See https://github.com/mapbox/tippecanoe#adding-calculated-attributes.", feature.getId(), feature.getProperties());
+        }
+        return;
+      }
+      mbMap.setFeatureState({
+        id: feature.getId(),
+        source,
+        sourceLayer
+      }, { hover: state });
+    });
+  }
+  select(features = []) {
+    this.setHoverState(this.selectedFeatures, false);
+    this.selectedFeatures = features;
+    this.setHoverState(this.selectedFeatures, true);
+  }
+  highlight(features = []) {
+    const filtered = this.highlightedFeatures.filter((feature) => !this.selectedFeatures.map((feat) => feat.getId()).includes(feature.getId()));
+    this.setHoverState(filtered, false);
+    this.highlightedFeatures = features;
+    this.setHoverState(this.highlightedFeatures, true);
+  }
+  applyLayoutVisibility(evt) {
+    const { visible } = this;
+    const { mbMap } = this.mapboxLayer;
+    const filterFunc = this.styleLayersFilter;
+    if (!mbMap) {
+      return;
+    }
+    const style = mbMap.getStyle();
+    if (!style) {
+      return;
+    }
+    if (filterFunc) {
+      const visibilityValue = visible ? "visible" : "none";
+      for (let i = 0; i < style.layers.length; i += 1) {
+        const styleLayer = style.layers[i];
+        if (filterFunc(styleLayer)) {
+          if (mbMap.getLayer(styleLayer.id)) {
+            mbMap.setLayoutProperty(styleLayer.id, "visibility", visibilityValue);
+          }
+        }
+      }
+    }
+  }
+  clone(newOptions) {
+    return new MapboxStyleLayer({ ...this.options, ...newOptions });
+  }
+}
+export default MapboxStyleLayer;