react-spatial 1.5.2 → 1.5.3

package/src/components/BasicMap/BasicMap.js

@@ -0,0 +1,413 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { defaults as defaultInteractions } from 'ol/interaction';
+import { equals } from 'ol/extent';
+import OLMap from 'ol/Map';
+import OLCollection from 'ol/Collection';
+import View from 'ol/View';
+import { unByKey } from 'ol/Observable';
+import Interaction from 'ol/interaction/Interaction';
+import { Layer } from 'mobility-toolbox-js/ol';
+import ResizeHandler from '../ResizeHandler';
+
+const propTypes = {
+  /** Map animation options */
+  animationOptions: PropTypes.shape({
+    center: PropTypes.arrayOf(PropTypes.number),
+    resolution: PropTypes.number,
+    zoom: PropTypes.number,
+  }),
+
+  /** Center of the [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html). */
+  center: PropTypes.arrayOf(PropTypes.number),
+
+  /** Class name of the map container */
+  className: PropTypes.string,
+
+  /** Map extent */
+  extent: PropTypes.arrayOf(PropTypes.number),
+
+  /** Openlayers [fit options](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit) when extent is updated */
+  fitOptions: PropTypes.object,
+
+  /** Array of [ol/interaction](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Interaction-Interaction.html). */
+  interactions: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.instanceOf(Interaction)),
+    PropTypes.instanceOf(OLCollection),
+  ]),
+
+  /** Array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers) to display. */
+  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),
+
+  /** An [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html). */
+  map: PropTypes.instanceOf(OLMap),
+
+  /**
+   * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is clicked.
+   * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
+   * @param {ol.MapBrowserEvent} event The singleclick [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:singleclick).
+   */
+  onFeaturesClick: PropTypes.func,
+
+  /**
+   * Optional options to pass on feature click. Passed to ol's 'getFeaturesAtPixel' method.
+   * https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#getFeaturesAtPixel
+   */
+  featuresClickOptions: PropTypes.shape({
+    layerFilter: PropTypes.func,
+    hitTolerance: PropTypes.number,
+    checkWrapped: PropTypes.bool,
+  }),
+
+  /**
+   * Callback when a [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html) is hovered.
+   * @param {OLFeature[]} features An array of [ol/Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html).
+   * @param {ol.MapBrowserEvent} event The pointermove [ol/MapBrowserEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:pointermove).
+   */
+  onFeaturesHover: PropTypes.func,
+
+  /**
+   * Callback when the map was moved.
+   * @param {ol.MapEvent} event The movend [ol/MapEvent](https://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html#event:moveend).
+   */
+  onMapMoved: PropTypes.func,
+
+  /** Map resolution */
+  resolution: PropTypes.number,
+
+  /** The tabIndex of the map. */
+  tabIndex: PropTypes.number,
+
+  /** The style of the map. */
+  style: PropTypes.object,
+
+  /** HTML aria-label. */
+  ariaLabel: PropTypes.string,
+
+  /** [ol/View](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html) constructor options */
+  viewOptions: PropTypes.shape({
+    minZoom: PropTypes.number,
+    maxZoom: PropTypes.number,
+    extent: PropTypes.array,
+    projection: PropTypes.string,
+  }),
+
+  /** Map zoom level */
+  zoom: PropTypes.number,
+};
+
+const defaultProps = {
+  animationOptions: undefined,
+  center: [0, 0],
+  className: 'rs-map',
+  extent: undefined,
+  fitOptions: {
+    duration: 1000,
+    padding: [20, 20, 20, 20],
+    maxZoom: 23,
+  },
+  style: undefined,
+  interactions: null,
+  layers: [],
+  map: null,
+  onFeaturesClick: undefined,
+  featuresClickOptions: {
+    hitTolerance: 0,
+  },
+  onFeaturesHover: undefined,
+  onMapMoved: undefined,
+  resolution: undefined,
+  tabIndex: undefined,
+  ariaLabel: 'map',
+  viewOptions: {
+    minZoom: 0,
+    maxZoom: 22,
+    extent: undefined,
+    projection: 'EPSG:3857',
+  },
+  zoom: 1,
+};
+
+/**
+ * The BasicMap component renders an [ol/map](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html).
+ *
+ * The map's view is created with the following parameters for the view:
+ *  - projection: 'EPSG:3857'
+ *  - zoom: 0
+ *  - minZoom: 0
+ *  - maxZoom: 22
+ *
+ * These options can be overridden using the viewOptions property.
+ */
+class BasicMap extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { map, interactions } = this.props;
+
+    this.map =
+      map ||
+      new OLMap({
+        controls: [],
+        interactions:
+          interactions ||
+          defaultInteractions({
+            altShiftDragRotate: false,
+            pinchRotate: false,
+          }),
+      });
+
+    this.state = {
+      node: null,
+    };
+
+    this.layers = [];
+    this.moveEndRef = null;
+    this.singleClickRef = null;
+    this.pointerMoveRef = null;
+    this.setNode = this.setNode.bind(this);
+  }
+
+  componentDidMount() {
+    const { layers, extent, viewOptions, center, zoom, resolution } =
+      this.props;
+    const { node } = this.state;
+    this.map.setTarget(node);
+
+    // We set the view here otherwise the map is not correctly zoomed.
+    this.map.setView(new View({ ...viewOptions, center, zoom, resolution }));
+
+    // // Since ol 6.1.0 touch-action is set to auto and creates a bad navigation experience on mobile,
+    // // so we have to force it to none for mobile.
+    // // https://github.com/openlayers/openlayers/pull/10187/files
+    const viewPort = this.map.getViewport();
+    viewPort.style.touchAction = 'none';
+    viewPort.style.msTouchAction = 'none';
+    viewPort.setAttribute('touch-action', 'none');
+
+    // Fit only work if the map has a size.
+    if (this.map.getSize() && extent) {
+      this.map.getView().fit(extent);
+    }
+
+    this.setLayers(layers);
+    this.listenMoveEnd();
+    this.listenSingleClick();
+    this.listenPointerMove();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      animationOptions,
+      center,
+      extent,
+      fitOptions,
+      layers,
+      resolution,
+      viewOptions,
+      zoom,
+      onMapMoved,
+      onFeaturesClick,
+      onFeaturesHover,
+    } = this.props;
+    const { node } = this.state;
+
+    if (prevState.node !== node) {
+      this.map.setTarget(node);
+
+      // When the node is set we reinitialize the extent with the extent property.
+      if (!prevState.node && node && extent) {
+        this.map.getView().fit(extent);
+      }
+    }
+
+    if (prevProps.layers !== layers) {
+      this.setLayers(layers, prevProps.layers);
+    }
+
+    // Creates a new view if necessary before updating the others prop.
+    if (
+      viewOptions &&
+      JSON.stringify(viewOptions) !== JSON.stringify(prevProps.viewOptions)
+    ) {
+      // Re-create a view, ol doesn't provide any method to setExtent of view.
+      this.map.setView(
+        new View({
+          ...viewOptions,
+          center,
+          resolution,
+          zoom,
+        }),
+      );
+    }
+
+    const view = this.map.getView();
+
+    if (animationOptions && prevProps.animationOptions !== animationOptions) {
+      view.animate(animationOptions);
+    }
+
+    if (prevProps.center !== center) {
+      view.setCenter(center);
+    }
+
+    if (zoom !== prevProps.zoom) {
+      view.setZoom(zoom);
+    }
+
+    if (resolution !== prevProps.resolution) {
+      view.setResolution(resolution);
+    }
+
+    if (extent && !equals(extent, prevProps.extent || [])) {
+      view.fit(extent, fitOptions);
+    }
+
+    if (onMapMoved !== prevProps.onMapMoved) {
+      this.listenMoveEnd();
+    }
+
+    if (onFeaturesClick !== prevProps.onFeaturesClick) {
+      this.listenSingleClick();
+    }
+
+    if (onFeaturesHover !== prevProps.onFeaturesHover) {
+      this.listenPointerMove();
+    }
+  }
+
+  componentWillUnmount() {
+    unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);
+  }
+
+  setNode(node) {
+    this.setState({ node });
+  }
+
+  setLayers(layers = [], prevLayers = []) {
+    for (let i = 0; i < prevLayers.length; i += 1) {
+      this.terminateLayer(prevLayers[i]);
+    }
+    for (let i = 0; i < layers.length; i += 1) {
+      this.initLayer(layers[i]);
+    }
+    this.layers = layers;
+  }
+
+  initLayer(layer) {
+    if (layer.attachToMap) {
+      layer.attachToMap(this.map);
+    }
+
+    if (layer.init) {
+      layer.init(this.map);
+    }
+
+    if (
+      layer.olLayer &&
+      this.map.getLayers() &&
+      !this.map.getLayers().getArray().includes(layer.olLayer)
+    ) {
+      this.map.addLayer(layer.olLayer);
+    }
+    const layers = layer.children || [];
+    for (let i = 0; i < layers.length; i += 1) {
+      this.initLayer(layers[i]);
+    }
+  }
+
+  terminateLayer(layer) {
+    const layers = layer.children || [];
+    for (let i = 0; i < layers.length; i += 1) {
+      this.terminateLayer(layers[i]);
+    }
+
+    if (
+      layer.olLayer &&
+      this.map.getLayers() &&
+      this.map.getLayers().getArray().includes(layer.olLayer)
+    ) {
+      this.map.removeLayer(layer.olLayer);
+    }
+
+    if (layer.terminate) {
+      layer.terminate(this.map);
+    }
+
+    if (layer.detachFromMap) {
+      layer.detachFromMap(this.map);
+    }
+  }
+
+  listenMoveEnd() {
+    const { onMapMoved } = this.props;
+    unByKey(this.moveEndRef);
+
+    if (!onMapMoved) {
+      return;
+    }
+
+    this.moveEndRef = this.map.on('moveend', (evt) => {
+      return onMapMoved(evt);
+    });
+  }
+
+  listenSingleClick() {
+    const { onFeaturesClick, featuresClickOptions } = this.props;
+    unByKey(this.singleClickRef);
+
+    if (!onFeaturesClick) {
+      return;
+    }
+
+    this.singleClickRef = this.map.on('singleclick', (evt) => {
+      const features = evt.map.getFeaturesAtPixel(
+        evt.pixel,
+        featuresClickOptions,
+      );
+      onFeaturesClick(features || [], evt);
+    });
+  }
+
+  listenPointerMove() {
+    const { onFeaturesHover } = this.props;
+    unByKey(this.pointerMoveRef);
+
+    if (!onFeaturesHover) {
+      return;
+    }
+
+    this.pointerMoveRef = this.map.on('pointermove', (evt) => {
+      const features = evt.map.getFeaturesAtPixel(evt.pixel);
+      onFeaturesHover(features || [], evt);
+    });
+  }
+
+  render() {
+    const { className, tabIndex, ariaLabel, style } = this.props;
+    const { node } = this.state;
+    return (
+      <div
+        className={className}
+        ref={this.setNode}
+        role="presentation"
+        aria-label={ariaLabel}
+        tabIndex={tabIndex}
+        style={style}
+      >
+        <ResizeHandler
+          maxHeightBrkpts={null}
+          maxWidthBrkpts={null}
+          observe={node}
+          onResize={() => {
+            this.map.updateSize();
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+BasicMap.propTypes = propTypes;
+BasicMap.defaultProps = defaultProps;
+
+export default BasicMap;

package/src/components/BasicMap/BasicMap.test.js

@@ -0,0 +1,281 @@
+import 'jest-canvas-mock';
+import proj4 from 'proj4';
+import { register } from 'ol/proj/proj4';
+import React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import { Layer } from 'mobility-toolbox-js/ol';
+import MapEvent from 'ol/MapEvent';
+import OLLayer from 'ol/layer/Vector';
+import OLMap from 'ol/Map';
+import OLView from 'ol/View';
+import { render } from '@testing-library/react';
+import BasicMap from './BasicMap';
+
+proj4.defs(
+  'EPSG:21781',
+  '+proj=somerc +lat_0=46.95240555555556 ' +
+    '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
+    '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs',
+);
+
+register(proj4);
+
+const extent = [0, 0, 1000, 1000];
+const olLayers = [
+  new Layer({
+    name: 'foo',
+    olLayer: new OLLayer({}),
+    visible: true,
+  }),
+];
+
+describe('BasicMap', () => {
+  let olMap;
+  beforeEach(() => {
+    const olView = new OLView();
+    olMap = new OLMap({ view: olView });
+  });
+
+  test('should be rendered', () => {
+    const setTarget = jest.spyOn(olMap, 'setTarget');
+    render(<BasicMap map={olMap} />);
+    expect(setTarget).toHaveBeenCalled();
+  });
+
+  test('should be rendered with touchAction to none', () => {
+    render(<BasicMap map={olMap} />);
+    expect(olMap.getViewport().style.touchAction).toBe('none');
+    expect(olMap.getViewport().style.msTouchAction).toBe('none');
+    expect(olMap.getViewport().getAttribute('touch-action')).toBe('none');
+  });
+
+  test('uses onMapMoved function', () => {
+    const spy = jest.fn(() => {});
+    const spy2 = jest.fn();
+    const evt = new MapEvent('moveend', olMap);
+
+    // Test componentDidMount
+    const { rerender } = render(<BasicMap map={olMap} onMapMoved={spy} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(evt);
+
+    // Test componentDidUpdate
+    rerender(<BasicMap map={olMap} onMapMoved={spy2} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledWith(evt);
+
+    // Test componentDidUpdate
+    rerender(<BasicMap map={olMap} onMapMoved={null} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+  });
+
+  test('uses onFeaturesClick function', () => {
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    const evt = new MapEvent('singleclick', olMap);
+
+    // Test componentDidMount
+    const { rerender } = render(<BasicMap map={olMap} onFeaturesClick={spy} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith([], evt);
+
+    // Test componentDidUpdate
+    rerender(<BasicMap map={olMap} onFeaturesClick={spy2} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledWith([], evt);
+
+    // Test componentDidUpdate
+    rerender(<BasicMap map={olMap} onFeaturesClick={null} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+  });
+
+  test('uses onFeaturesHover function', () => {
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    const evt = new MapEvent('pointermove', olMap);
+
+    // Test componentDidMount
+    const { rerender } = render(
+      <BasicMap map={olMap} onFeaturesHover={spy} />,
+      {
+        lifecycleExperimental: true,
+      },
+    );
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith([], evt);
+
+    // Test componentDidUpdate
+    rerender(<BasicMap map={olMap} onFeaturesHover={spy2} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledWith([], evt);
+
+    // Test componentDidUpdate
+    rerender(<BasicMap map={olMap} onFeaturesHover={null} />);
+    olMap.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+  });
+
+  test('should be rendered with a default map', () => {
+    const { container } = render(<BasicMap />);
+    expect(!!container.querySelector('.ol-viewport')).toBe(true);
+  });
+
+  test('should be rendered with layers and an extent', () => {
+    render(
+      <BasicMap
+        map={olMap}
+        layers={olLayers}
+        extent={extent}
+        viewOptions={{
+          minZoom: 16,
+          maxZoom: 22,
+          projection: 'EPSG:21781',
+        }}
+      />,
+    );
+    expect(olMap.getLayers().getLength()).toBe(1);
+    expect(olMap.getView().calculateExtent()).toEqual([
+      380.70084231351245, 380.70084231351245, 619.2991576864875,
+      619.2991576864875,
+    ]);
+  });
+
+  test('center shoud be set', () => {
+    const { rerender } = render(<BasicMap map={olMap} />);
+    const setCenter = jest.spyOn(olMap.getView(), 'setCenter');
+    rerender(<BasicMap map={olMap} center={[0, 0]} />);
+    expect(setCenter).toHaveBeenCalled();
+  });
+
+  test('zoom shoud be set', () => {
+    const { rerender } = render(<BasicMap map={olMap} zoom={5} />);
+    expect(olMap.getView().getZoom()).toBe(5);
+    rerender(<BasicMap map={olMap} zoom={2} />);
+    expect(olMap.getView().getZoom()).toBe(2);
+  });
+
+  test('resolution shoud be set', () => {
+    const { rerender } = render(<BasicMap map={olMap} resolution={100} />);
+    expect(olMap.getView().getResolution()).toBe(100);
+    rerender(<BasicMap map={olMap} resolution={5} />);
+    expect(olMap.getView().getResolution()).toBe(5);
+  });
+
+  test('animation shoud be set', () => {
+    const obj = {
+      zoom: 4,
+    };
+    const { rerender } = render(<BasicMap map={olMap} />);
+    const spy = jest.spyOn(olMap.getView(), 'animate');
+    rerender(<BasicMap map={olMap} animationOptions={obj} />);
+    expect(spy).toHaveBeenCalledWith(obj);
+  });
+
+  test('layers shoud be updated', () => {
+    const addLayer = jest.spyOn(olMap, 'addLayer');
+    const { rerender } = render(<BasicMap map={olMap} />);
+    const layer = new Layer({ name: 'test', olLayer: new OLLayer() });
+    rerender(<BasicMap map={olMap} layers={[layer]} />);
+    expect(addLayer).toHaveBeenCalled();
+  });
+
+  test('should be fitted if extent is updated', () => {
+    const fitExtent = jest.spyOn(OLView.prototype, 'fit');
+    const { rerender } = render(<BasicMap map={olMap} />);
+    rerender(<BasicMap map={olMap} extent={[1, 2, 3, 4]} />);
+    expect(fitExtent).toHaveBeenCalled();
+  });
+
+  test('should be zoomed if zoom is updated', () => {
+    const setZoom = jest.spyOn(OLView.prototype, 'setZoom');
+    const { rerender } = render(<BasicMap map={olMap} />);
+    rerender(<BasicMap map={olMap} zoom={15} />);
+    expect(setZoom).toHaveBeenCalledWith(15);
+  });
+
+  test('should be observed by ResizeHandler', () => {
+    const spy = jest.spyOn(ResizeObserver.prototype, 'observe');
+    render(<BasicMap map={olMap} />);
+    expect(spy).toHaveBeenCalledWith(olMap.getTargetElement());
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  test('size is updated when div is resized', () => {
+    const spy = jest.spyOn(olMap, 'updateSize');
+    render(<BasicMap map={olMap} />);
+    expect(spy).toHaveBeenCalledTimes(2);
+    // The mock class set the onResize property, we just have to run it to
+    // simulate a resize
+    ResizeObserver.onResize([
+      {
+        target: olMap.getTargetElement(),
+        contentRect: {
+          width: 20,
+          height: 20,
+        },
+      },
+    ]);
+    expect(spy).toHaveBeenCalledTimes(3);
+  });
+
+  describe('#setLayers()', () => {
+    test('init all layers and terminate al previous layer.', () => {
+      const layer0 = new Layer({ key: 'test1' });
+      const spyInit0 = jest.spyOn(layer0, 'attachToMap');
+      const spyTerminate0 = jest.spyOn(layer0, 'detachFromMap');
+      const layer1 = new Layer({ key: 'test1' });
+      const spyInit1 = jest.spyOn(layer1, 'attachToMap');
+      const spyTerminate1 = jest.spyOn(layer1, 'detachFromMap');
+      const layer2 = new Layer({ key: 'test2' });
+      const spyInit2 = jest.spyOn(layer2, 'attachToMap');
+      const spyTerminate2 = jest.spyOn(layer2, 'detachFromMap');
+      const layer3 = new Layer({ key: 'test3' });
+      const spyInit3 = jest.spyOn(layer3, 'attachToMap');
+      const spyTerminate3 = jest.spyOn(layer3, 'detachFromMap');
+      const layer4 = new Layer({ key: 'test4' });
+      const spyInit4 = jest.spyOn(layer4, 'attachToMap');
+      const spyTerminate4 = jest.spyOn(layer4, 'detachFromMap');
+      const startLayers = [layer1, layer3];
+      const { rerender } = render(
+        <BasicMap map={olMap} layers={startLayers} />,
+      );
+      expect(spyInit0).toHaveBeenCalledTimes(0);
+      expect(spyInit1).toHaveBeenCalledTimes(1);
+      expect(spyInit2).toHaveBeenCalledTimes(0);
+      expect(spyInit3).toHaveBeenCalledTimes(1);
+      expect(spyInit4).toHaveBeenCalledTimes(0);
+      expect(spyTerminate0).toHaveBeenCalledTimes(0);
+      expect(spyTerminate1).toHaveBeenCalledTimes(1);
+      expect(spyTerminate2).toHaveBeenCalledTimes(0);
+      expect(spyTerminate3).toHaveBeenCalledTimes(1);
+      expect(spyTerminate4).toHaveBeenCalledTimes(0);
+
+      const layers = [layer0, layer2, layer3, layer4];
+      rerender(<BasicMap map={olMap} layers={layers} />);
+      expect(spyInit0).toHaveBeenCalledTimes(1);
+      expect(spyInit1).toHaveBeenCalledTimes(1);
+      expect(spyInit2).toHaveBeenCalledTimes(1);
+      expect(spyInit3).toHaveBeenCalledTimes(2);
+      expect(spyInit4).toHaveBeenCalledTimes(1);
+      expect(spyTerminate0).toHaveBeenCalledTimes(1);
+      expect(spyTerminate1).toHaveBeenCalledTimes(2);
+      expect(spyTerminate2).toHaveBeenCalledTimes(1);
+      expect(spyTerminate3).toHaveBeenCalledTimes(3);
+      expect(spyTerminate4).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/BasicMap/README.md

@@ -0,0 +1,18 @@
+
+The following example demonstrates the use of BasicMap.
+
+```jsx
+import React from 'react';
+import { MapboxLayer } from 'mobility-toolbox-js/ol';
+import Tile from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import BasicMap from 'react-spatial/components/BasicMap';
+
+const layers = [
+  new MapboxLayer({
+    url: `https://maps.geops.io/styles/travic_v2/style.json?key=${apiKey}`,
+  })
+];
+
+<BasicMap layers={layers} tabIndex={0} />;
+```

package/src/components/BasicMap/index.js

@@ -0,0 +1 @@
+export { default } from './BasicMap';