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

package/ol/controls/RoutingControl.test.js

@@ -0,0 +1,151 @@
+import fetch from "jest-fetch-mock";
+import View from "ol/View";
+import qs from "query-string";
+import Map from "ol/Map";
+import RoutingControl from "./RoutingControl";
+import RoutingControlStation1 from "./snapshots/RoutingControlStation1.json";
+import RoutingControlStation2 from "./snapshots/RoutingControlStation2.json";
+import RoutingControlRouteGen5 from "./snapshots/RoutingControlRouteGen5.json";
+import RoutingControlRouteGen10 from "./snapshots/RoutingControlRouteGen10.json";
+import RoutingControlRouteGen30 from "./snapshots/RoutingControlRouteGen30.json";
+import RoutingControlRouteGen100 from "./snapshots/RoutingControlRouteGen100.json";
+import RoutingControlRouteOSM from "./snapshots/RoutingControlRouteOSM.json";
+describe("RoutingControl", () => {
+  let map;
+  beforeEach(() => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    map = new Map({
+      target,
+      view: new View({
+        center: [0, 0],
+        zoom: 0
+      })
+    });
+    global.fetch = fetch;
+  });
+  afterEach(() => {
+    if (map) {
+      map.setTarget(null);
+      map = null;
+    }
+    fetch.resetMocks();
+  });
+  test("should be activate by default", () => {
+    const control = new RoutingControl();
+    expect(control.active).toBe(true);
+    expect(control.snapToClosestStation).toBe(false);
+    expect(control.useRawViaPoints).toBe(false);
+  });
+  test("launch routing and add features", (done) => {
+    fetch.mockResponseOnce(JSON.stringify(global.fetchRouteResponse));
+    const control = new RoutingControl({
+      url: "https://foo.ch",
+      apiKey: "foo"
+    });
+    control.attachToMap(map);
+    expect(map.getTarget().querySelector("#ol-toggle-routing")).toBeDefined();
+    control.viaPoints = [
+      [950476.4055933182, 6003322253698345e-9],
+      [950389.0813034325, 6003656659274571e-9]
+    ];
+    control.drawRoute(control.viaPoints).then(() => {
+      expect(fetch.mock.calls[0][0]).toEqual("https://foo.ch?coord-punish=1000&coord-radius=100&elevation=false&graph=osm&key=foo&mot=bus&resolve-hops=false&via=47.3739194713294%2C8.538274823394632%7C47.37595378493421%2C8.537490375951839");
+      expect(control.routingLayer.olLayer.getSource().getFeatures().length).toEqual(3);
+      done();
+    }).catch(() => {
+    });
+  });
+  test("launch routing and add features for multiple graphs", (done) => {
+    fetch.mockResponses([JSON.stringify(RoutingControlStation1), { status: 200 }], [JSON.stringify(RoutingControlStation2), { status: 200 }], [JSON.stringify(RoutingControlRouteGen5), { status: 200 }], [JSON.stringify(RoutingControlRouteGen10), { status: 200 }], [JSON.stringify(RoutingControlRouteGen30), { status: 200 }], [JSON.stringify(RoutingControlRouteGen100), { status: 200 }], [JSON.stringify(RoutingControlRouteOSM), { status: 200 }]);
+    const control = new RoutingControl({
+      url: "https://foo.ch/",
+      stopsApiUrl: "https://foo.ch/",
+      apiKey: "foo",
+      graphs: [
+        ["gen5", 6, 7],
+        ["gen10", 8],
+        ["gen30", 9, 10],
+        ["gen100", 11, 13],
+        ["osm", 14, 99]
+      ]
+    });
+    control.attachToMap(map);
+    control.viaPoints = ["a4dca961d199ff76", "e3666f03cba06b2b"];
+    control.drawRoute(control.viaPoints).then(() => {
+      expect(fetch.mock.calls[0][0]).toEqual("https://foo.ch/lookup/a4dca961d199ff76?key=foo");
+      expect(fetch.mock.calls[1][0]).toEqual("https://foo.ch/lookup/e3666f03cba06b2b?key=foo");
+      expect(fetch.mock.calls[2][0]).toEqual("https://foo.ch/?coord-punish=1000&coord-radius=100&elevation=false&graph=gen5&key=foo&mot=bus&resolve-hops=false&via=%21a4dca961d199ff76%7C%21e3666f03cba06b2b");
+      expect(fetch.mock.calls[3][0]).toEqual("https://foo.ch/?coord-punish=1000&coord-radius=100&elevation=false&graph=gen10&key=foo&mot=bus&resolve-hops=false&via=%21a4dca961d199ff76%7C%21e3666f03cba06b2b");
+      expect(fetch.mock.calls[4][0]).toEqual("https://foo.ch/?coord-punish=1000&coord-radius=100&elevation=false&graph=gen30&key=foo&mot=bus&resolve-hops=false&via=%21a4dca961d199ff76%7C%21e3666f03cba06b2b");
+      expect(fetch.mock.calls[5][0]).toEqual("https://foo.ch/?coord-punish=1000&coord-radius=100&elevation=false&graph=gen100&key=foo&mot=bus&resolve-hops=false&via=%21a4dca961d199ff76%7C%21e3666f03cba06b2b");
+      expect(fetch.mock.calls[6][0]).toEqual("https://foo.ch/?coord-punish=1000&coord-radius=100&elevation=false&graph=osm&key=foo&mot=bus&resolve-hops=false&via=%21a4dca961d199ff76%7C%21e3666f03cba06b2b");
+      expect(control.routingLayer.olLayer.getSource().getFeatures().length).toEqual(7);
+      done();
+    }).catch(() => {
+    });
+  });
+  test("ignores Abort Error and returns undefined", (done) => {
+    const control = new RoutingControl({
+      url: "https://foo.ch",
+      apiKey: "foo"
+    });
+    control.attachToMap(map);
+    control.viaPoints = [
+      [950476.4055933182, 6003322253698345e-9],
+      [950389.0813034325, 6003656659274571e-9]
+    ];
+    const error = new Error("Error");
+    error.name = "AbortError";
+    fetch.mockRejectOnce(error);
+    return control.drawRoute().then((data) => {
+      expect(data).toEqual([void 0]);
+      done();
+    });
+  });
+  test("calls routing api with @ before the coordinates when snapToClosestStation is true", (done) => {
+    fetch.mockResponses([JSON.stringify(RoutingControlStation1), { status: 200 }], [JSON.stringify(global.fetchRouteResponse), { status: 200 }]);
+    const control = new RoutingControl({
+      apiKey: "foo",
+      snapToClosestStation: true
+    });
+    control.attachToMap(map);
+    expect(map.getTarget().querySelector("#ol-toggle-routing")).toBeDefined();
+    control.viaPoints = [
+      [950476.4055933182, 6003322253698345e-9],
+      [950389.0813034325, 6003656659274571e-9],
+      "e3666f03cba06b2b"
+    ];
+    control.drawRoute(control.viaPoints).then(() => {
+      const params = qs.parseUrl(fetch.mock.calls[1][0]).query;
+      expect(params.via).toBe("@47.3739194713294,8.538274823394632|@47.37595378493421,8.537490375951839|!e3666f03cba06b2b");
+      done();
+    }).catch(() => {
+    });
+  });
+  test("calls routing api with raw via points", (done) => {
+    fetch.mockResponses([JSON.stringify(RoutingControlStation1), { status: 200 }], [JSON.stringify(RoutingControlStation2), { status: 200 }], [JSON.stringify(global.fetchRouteResponse), { status: 200 }]);
+    const control = new RoutingControl({
+      apiKey: "foo",
+      useRawViaPoints: true
+    });
+    control.attachToMap(map);
+    expect(map.getTarget().querySelector("#ol-toggle-routing")).toBeDefined();
+    control.viaPoints = [
+      "46.2,7.1",
+      "@46.2,7.1",
+      "@46.2,7$1",
+      "station name$2",
+      "station name@46.2,7",
+      "stationname@46.2,7.7$3",
+      "!stationid",
+      [950389, 6003656]
+    ];
+    control.drawRoute(control.viaPoints).then(() => {
+      const params = qs.parseUrl(fetch.mock.calls[2][0]).query;
+      expect(params.via).toBe("46.2,7.1|@46.2,7.1|@46.2,7$1|station name$2|station name@46.2,7|stationname@46.2,7.7$3|!stationid|47.375949774398805,8.537489645590679");
+      done();
+    }).catch(() => {
+    });
+  });
+});

package/ol/controls/StopFinderControl.js

@@ -0,0 +1,10 @@
+import { fromLonLat } from "ol/proj";
+import Control from "../../common/controls/Control";
+import mixin from "../../common/mixins/SearchMixin";
+class StopFinderControl extends mixin(Control) {
+  onSuggestionClick({ geometry }) {
+    const coord = fromLonLat(geometry.coordinates);
+    this.map.getView().setCenter(coord);
+  }
+}
+export default StopFinderControl;

package/ol/controls/StopFinderControl.test.js

@@ -0,0 +1,48 @@
+import fetch from "jest-fetch-mock";
+import View from "ol/View";
+import Map from "ol/Map";
+import StopFinderControl from "./StopFinderControl";
+describe("StopFinderControl", () => {
+  let map;
+  beforeEach(() => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    map = new Map({
+      target,
+      view: new View({
+        center: [0, 0],
+        zoom: 0
+      })
+    });
+    global.fetch = fetch;
+  });
+  afterEach(() => {
+    if (map) {
+      map.setTarget(null);
+      map = null;
+    }
+    fetch.resetMocks();
+  });
+  test("should be activate by default", () => {
+    const control = new StopFinderControl();
+    expect(control.active).toBe(true);
+  });
+  test("launch a search and display results", (done) => {
+    fetch.mockResponseOnce(JSON.stringify(global.stopsSearchResponse));
+    const control = new StopFinderControl({
+      url: "https://foo.ch",
+      apiKey: "foo",
+      apiParams: {
+        limit: 10,
+        foo: "bar"
+      }
+    });
+    control.attachToMap(map);
+    expect(control.element).toBeDefined();
+    control.search("foo").then(() => {
+      expect(fetch.mock.calls[0][0]).toEqual("https://foo.ch?foo=bar&key=foo&limit=10&q=foo");
+      expect(control.element.querySelector("div").querySelector("div").innerHTML).toBe("Bern");
+      done();
+    });
+  });
+});

package/ol/controls/index.js

@@ -0,0 +1,3 @@
+export { default as CopyrightControl } from "./CopyrightControl";
+export { default as RoutingControl } from "./RoutingControl";
+export { default as StopFinderControl } from "./StopFinderControl";

package/ol/index.js

@@ -0,0 +1,5 @@
+export * from "../api";
+export * from "../common";
+export * from "./controls";
+export * from "./layers";
+export * from "./styles";

package/ol/layers/Layer.js

@@ -0,0 +1,88 @@
+import { unByKey } from "ol/Observable";
+import Group from "ol/layer/Group";
+import LayerCommon from "../../common/layers/Layer";
+class Layer extends LayerCommon {
+  constructor(options) {
+    super(options);
+    if (this.olLayer) {
+      this.olLayer.setVisible(this.visible);
+    }
+  }
+  defineProperties(options) {
+    super.defineProperties(options);
+    Object.defineProperties(this, {
+      olLayer: { value: options.olLayer, writable: true },
+      olListenersKeys: {
+        value: []
+      }
+    });
+  }
+  attachToMap(map) {
+    super.attachToMap(map);
+    if (!this.map) {
+      return;
+    }
+    if (this.map && this.olLayer) {
+      this.map.addLayer(this.olLayer);
+    }
+    this.olListenersKeys.push(this.map.getLayers().on("remove", (evt) => {
+      if (evt.element === this.olLayer) {
+        this.detachFromMap();
+      }
+    }));
+    if (this.isClickActive || this.isHoverActive) {
+      this.toggleVisibleListeners();
+      this.olListenersKeys.push(this.on("change:visible", this.toggleVisibleListeners));
+    }
+    if (this.copyrights && this.olLayer) {
+      const attributions = this.copyrights || [];
+      if (this.olLayer instanceof Group) {
+        this.olLayer.getLayers().getArray().forEach((layer) => {
+          layer.getSource().setAttributions(attributions);
+        });
+      } else if (this.olLayer.getSource) {
+        this.olLayer.getSource().setAttributions(attributions);
+      }
+    }
+  }
+  detachFromMap() {
+    unByKey(this.olListenersKeys);
+    if (this.map && this.olLayer) {
+      this.map.removeLayer(this.olLayer);
+    }
+    super.detachFromMap();
+  }
+  setVisible(visible, stopPropagationDown = false, stopPropagationUp = false, stopPropagationSiblings = false) {
+    if (visible === this.visible) {
+      return;
+    }
+    super.setVisible(visible, stopPropagationDown, stopPropagationUp, stopPropagationSiblings);
+    if (this.olLayer) {
+      this.olLayer.setVisible(this.visible);
+    }
+  }
+  toggleVisibleListeners() {
+    if (this.isClickListenerKey && this.isHoverListenerKey) {
+      [this.isClickListenerKey, this.isHoverListenerKey].forEach((key) => {
+        const index = this.olListenersKeys.indexOf(key);
+        if (index > -1) {
+          this.olListenersKeys.splice(index, 1);
+        }
+        unByKey([this.isHoverListenerKey, this.isClickListenerKey]);
+      });
+    }
+    if (this.visible) {
+      if (this.isClickActive) {
+        this.isClickListenerKey = this.map.on("singleclick", this.onUserClickCallback);
+      }
+      if (this.isHoverActive) {
+        this.isHoverListenerKey = this.map.on("pointermove", this.onUserMoveCallback);
+      }
+      this.olListenersKeys.push(this.isClickListenerKey, this.isHoverListenerKey);
+    }
+  }
+  clone(newOptions) {
+    return new Layer({ ...this.options, ...newOptions });
+  }
+}
+export default Layer;

package/ol/layers/Layer.test.js

@@ -0,0 +1,174 @@
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import Map from "ol/Map";
+import Group from "ol/layer/Group";
+import Layer from "./Layer";
+let olLayer;
+let map;
+describe("Layer", () => {
+  beforeEach(() => {
+    map = new Map({});
+    olLayer = new VectorLayer({ source: new VectorSource() });
+  });
+  test("should initialize.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    expect(layer).toBeInstanceOf(Layer);
+  });
+  test("should be visible by default.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    expect(layer.visible).toBe(true);
+  });
+  test("should be invisible if defined.", () => {
+    const layer = new Layer({ name: "Layer", visible: false, olLayer });
+    expect(layer.visible).toBe(false);
+  });
+  test("should be invisible if set.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    layer.setVisible(false);
+    expect(layer.visible).toBe(false);
+  });
+  test("should visibility stay unchanged", () => {
+    const layer = new Layer({ name: "Layer", visible: false, olLayer });
+    layer.setVisible(false);
+    expect(layer.visible).toBe(false);
+  });
+  test("should return its name.", () => {
+    const layer = new Layer({ name: "Layer", visible: false, olLayer });
+    expect(layer.name).toEqual("Layer");
+  });
+  test("should call terminate on initialization.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  test("should remove the layer when we call terminate.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledTimes(1);
+    layer.detachFromMap(map);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+  test("should manage copyrights as string.", () => {
+    const spy = jest.spyOn(VectorSource.prototype, "setAttributions");
+    const layer = new Layer({ name: "Layer", copyrights: "foo", olLayer });
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledWith(["foo"]);
+  });
+  test("should manage copyrights as array.", () => {
+    const spy = jest.spyOn(VectorSource.prototype, "setAttributions");
+    const layer = new Layer({ name: "Layer", copyrights: ["bar"], olLayer });
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledWith(["bar"]);
+  });
+  test("should set attributions for Group.", () => {
+    const spy = jest.spyOn(VectorSource.prototype, "setAttributions");
+    const layer = new Layer({
+      name: "Layer",
+      copyrights: ["bar"],
+      olLayer: new Group({ layers: [olLayer] })
+    });
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledWith(["bar"]);
+  });
+  test("should listen for click/hover events when layer is visible by default then should not when hidden.", async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: "Layer", olLayer });
+    expect(layer.visible).toBe(true);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.attachToMap(map);
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    spy.mockReset();
+    spy2.mockReset();
+    layer.setVisible(false);
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    global.console.error.mockRestore();
+  });
+  test("should not listen for click/hover events when layer is not visible by default then should not when visible.", async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: "Layer", olLayer, visible: false });
+    expect(layer.visible).toBe(false);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.attachToMap(map);
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    spy.mockReset();
+    spy2.mockReset();
+    layer.setVisible(true);
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    global.console.error.mockRestore();
+  });
+  test("should not listen for click/hover events  after layer.detachFromMap()", async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: "Layer", olLayer, visible: true });
+    expect(layer.visible).toBe(true);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.attachToMap(map);
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    await map.dispatchEvent({
+      type: "pointermove",
+      map,
+      coordinate: [0, 0]
+    });
+    await map.dispatchEvent({
+      type: "singleclick",
+      map,
+      coordinate: [0, 0]
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    spy.mockReset();
+    spy2.mockReset();
+    layer.detachFromMap(map);
+    await map.dispatchEvent({
+      type: "pointermove",
+      map,
+      coordinate: [0, 0]
+    });
+    await map.dispatchEvent({
+      type: "singleclick",
+      map,
+      coordinate: [0, 0]
+    });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    global.console.error.mockRestore();
+  });
+  test("should clone", () => {
+    const layer = new Layer({
+      name: "Layer",
+      copyrights: ["bar"],
+      olLayer: new Group({ layers: [olLayer] })
+    });
+    const clone = layer.clone({ name: "clone" });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe("clone");
+    expect(clone).toBeInstanceOf(Layer);
+  });
+});

package/ol/layers/MapboxLayer.js

@@ -0,0 +1,203 @@
+import { toLonLat } from "ol/proj";
+import { Map } from "mapbox-gl";
+import Source from "ol/source/Source";
+import OLLayer from "ol/layer/Layer";
+import GeoJSON from "ol/format/GeoJSON";
+import Layer from "./Layer";
+import { getMapboxMapCopyrights, getMapboxStyleUrl } from "../../common/utils";
+export default class MapboxLayer 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;
+        }
+        let changed = false;
+        const canvas = this.mbMap.getCanvas();
+        const { viewState } = frameState;
+        const visible = this.olLayer.getVisible();
+        if (this.renderState.visible !== visible) {
+          canvas.style.display = visible ? "block" : "none";
+          this.renderState.visible = visible;
+          canvas.style.position = "absolute";
+        }
+        const opacity = this.olLayer.getOpacity();
+        if (this.renderState.opacity !== opacity) {
+          canvas.style.opacity = opacity;
+          this.renderState.opacity = opacity;
+        }
+        const { rotation } = viewState;
+        if (this.renderState.rotation !== rotation) {
+          this.mbMap.rotateTo(-(rotation || 0) * 180 / Math.PI, {
+            animate: false
+          });
+          changed = true;
+          this.renderState.rotation = rotation;
+        }
+        if (this.renderState.zoom !== viewState.zoom || this.renderState.center[0] !== viewState.center[0] || this.renderState.center[1] !== viewState.center[1]) {
+          this.mbMap.jumpTo({
+            center: toLonLat(viewState.center),
+            zoom: viewState.zoom - 1,
+            animate: false
+          });
+          changed = true;
+          this.renderState.zoom = viewState.zoom;
+          this.renderState.center = viewState.center;
+        }
+        const size = this.map.getSize();
+        if (this.renderState.size[0] !== size[0] || this.renderState.size[1] !== size[1]) {
+          changed = true;
+          this.renderState.size = size;
+        }
+        if (this.mbMap && this.mbMap.style && this.mbMap.isStyleLoaded() && changed) {
+          try {
+            if (this.mbMap._frame) {
+              this.mbMap._frame.cancel();
+              this.mbMap._frame = null;
+            }
+            this.mbMap._render();
+          } catch (err) {
+            console.warn(err);
+          }
+        }
+        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 || this.mbMap) {
+      return;
+    }
+    this.format = new GeoJSON({
+      featureProjection: this.map.getView().getProjection()
+    });
+    this.loadMbMap();
+    this.olListenersKeys.push(this.map.on("change:size", () => {
+      try {
+        if (this.mbMap) {
+          this.mbMap.resize();
+        }
+      } catch (err) {
+        console.warn(err);
+      }
+    }));
+  }
+  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;
+    }
+    let [x, y] = this.map.getView().getCenter();
+    if (!x || !y) {
+      x = 0;
+      y = 0;
+    }
+    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.renderState = {
+      center: [x, y],
+      zoom: null,
+      rotation: null,
+      visible: null,
+      opacity: null,
+      size: [0, 0]
+    };
+    this.mbMap.once("load", () => {
+      this.mbMap.resize();
+      this.loaded = true;
+      this.copyrights = getMapboxMapCopyrights(this.mbMap) || [];
+      this.olLayer.getSource().setAttributions(this.copyrights);
+      this.dispatchEvent({
+        type: "load",
+        target: this
+      });
+    });
+    const mapboxCanvas = this.mbMap.getCanvas();
+    if (mapboxCanvas) {
+      if (this.options.tabIndex) {
+        mapboxCanvas.setAttribute("tabindex", this.options.tabIndex);
+      } else {
+        mapboxCanvas.removeAttribute("tabindex");
+      }
+    }
+    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 MapboxLayer({ ...this.options, ...newOptions });
+  }
+}