mobility-toolbox-js 2.0.0-beta.32 → 2.0.0-beta.33

package/ol/layers/MapboxStyleLayer.js

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

package/ol/layers/MapboxStyleLayer.test.js

@@ -1,226 +0,0 @@
-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"
-};
-describe("MapboxStyleLayer", () => {
-  beforeEach(() => {
-    onClick = jest.fn();
-    source = new MaplibreLayer({
-      name: "Layer",
-      apiKey: "foo",
-      url: "https://foo.com/styles"
-    });
-    layer = new MapboxStyleLayer({
-      name: "mapbox layer",
-      visible: true,
-      mapboxLayer: source,
-      styleLayer,
-      onClick
-    });
-    map = new OlMap({
-      target: document.createElement("div"),
-      view: new View({ center: [0, 0] })
-    });
-  });
-  afterEach(() => {
-    if (layer.map) {
-      layer.detachFromMap(map);
-    }
-    if (source.map) {
-      source.detachFromMap(map);
-    }
-  });
-  test("should be instanced.", () => {
-    expect(layer).toBeInstanceOf(MapboxStyleLayer);
-    expect(layer.styleLayers[0]).toBe(styleLayer);
-  });
-  test("should not initalized mapbox map.", () => {
-    layer.attachToMap();
-    expect(layer.mbMap).toBe();
-    layer.detachFromMap();
-  });
-  test("should initalized mapbox map.", () => {
-    source.attachToMap(map);
-    layer.attachToMap(map);
-    expect(layer.mapboxLayer.mbMap).toBeInstanceOf(gllib.Map);
-    layer.detachFromMap();
-    source.detachFromMap();
-  });
-  test("should called terminate on initalization.", () => {
-    const spy = jest.spyOn(layer, "detachFromMap");
-    layer.attachToMap();
-    expect(spy).toHaveBeenCalledTimes(1);
-    layer.detachFromMap(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.detachFromMap(map);
-    source.detachFromMap(map);
-  });
-  test("should call onClick callback", async () => {
-    const coordinate = [500, 500];
-    const features = [];
-    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.detachFromMap();
-  });
-  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.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" });
-    expect(clone).not.toBe(layer);
-    expect(clone.name).toBe("clone");
-    expect(clone).toBeInstanceOf(MapboxStyleLayer);
-  });
-  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)
-    };
-    layer.onLoad();
-    expect(style.layers[0]).toBe(styleLayer);
-  });
-  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)
-      };
-      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", () => {
-      const styles = { layers: [styleLayer] };
-      const layer2 = new MapboxStyleLayer({
-        name: "mapbox layer",
-        mapboxLayer: source,
-        styleLayersFilter: () => false
-      });
-      layer2.mapboxLayer.mbMap = {
-        getStyle: () => styles,
-        getSource: () => ({}),
-        getLayer: () => null,
-        setLayoutProperty: () => null,
-        addLayer: () => ({})
-      };
-      layer2.onLoad();
-      expect(layer2.disabled).toBe(true);
-    });
-  });
-  describe("#getFeatureInfoAtCoordinate()", () => {
-    beforeEach(() => {
-      source.attachToMap(map);
-      source.mbMap.isStyleLoaded = jest.fn(() => true);
-      source.mbMap.getSource = jest.fn(() => true);
-    });
-    afterEach(() => {
-      source.mbMap.getSource.mockRestore();
-      source.mbMap.isStyleLoaded.mockRestore();
-    });
-    test("should request features on layers ids from styleLayers property", () => {
-      source.mbMap.getStyle = jest.fn(() => ({
-        layers: [{ id: "foo" }, { id: "layer" }, { id: "bar" }]
-      }));
-      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", () => {
-      source.mbMap.getStyle = jest.fn(() => ({
-        layers: [{ id: "foo" }, { id: "layer" }, { id: "bar" }, { id: "foo2" }]
-      }));
-      const layer2 = new MapboxStyleLayer({
-        name: "mapbox layer",
-        visible: true,
-        mapboxLayer: source,
-        styleLayer,
-        styleLayersFilter: ({ id }) => /foo/.test(id)
-      });
-      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", () => {
-      source.mbMap.getStyle = jest.fn(() => ({
-        layers: [
-          { id: "foo" },
-          { id: "bar2" },
-          { id: "layer" },
-          { id: "bar" },
-          { id: "foo2" }
-        ]
-      }));
-      const layer2 = new MapboxStyleLayer({
-        name: "mapbox layer",
-        visible: true,
-        mapboxLayer: source,
-        styleLayer,
-        styleLayersFilter: ({ id }) => /foo/.test(id),
-        queryRenderedLayersFilter: ({ id }) => /bar/.test(id)
-      });
-      layer2.attachToMap(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
-      });
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
-      source.mbMap.getStyle.mockRestore();
-    });
-  });
-});

package/ol/layers/MaplibreLayer.js

@@ -1,140 +0,0 @@
-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, getUrlWithParams } from "../../common/utils";
-export default class MaplibreLayer extends Layer {
-  constructor(options = {}) {
-    const mbLayer = new OLLayer({
-      source: new Source({}),
-      render: (frameState) => {
-        if (!this.map || !this.mbMap) {
-          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();
-  }
-  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%";
-    if (!this.apiKey && !this.styleUrl.includes(this.apiKeyName)) {
-      console.error(`No apiKey defined for mapbox layer with style url to ${this.url}`);
-    }
-    this.mbMap = new Map({
-      style: getUrlWithParams(this.styleUrl, {
-        [this.apiKeyName]: this.apiKey
-      }).toString(),
-      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 });
-  }
-}