react-spatial 1.2.2 → 1.2.3-beta.1

package/components/BasicMap/BasicMap.js

@@ -1,416 +1,278 @@
-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';
-
-var propTypes = {
-  /** Map animation options */
+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 = {
   animationOptions: PropTypes.shape({
     center: PropTypes.arrayOf(PropTypes.number),
     resolution: PropTypes.number,
-    zoom: 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. */
+    PropTypes.instanceOf(OLCollection)
+  ]),
   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,
+    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,
+    projection: PropTypes.string
   }),
-
-  /** Map zoom level */
-  zoom: PropTypes.number,
+  zoom: PropTypes.number
 };
-
-var defaultProps = {
-  animationOptions: undefined,
+const defaultProps = {
+  animationOptions: void 0,
   center: [0, 0],
-  className: 'rs-map',
-  extent: undefined,
+  className: "rs-map",
+  extent: void 0,
   fitOptions: {
-    duration: 1000,
+    duration: 1e3,
     padding: [20, 20, 20, 20],
-    maxZoom: 23,
+    maxZoom: 23
   },
-  style: undefined,
+  style: void 0,
   interactions: null,
   layers: [],
   map: null,
-  onFeaturesClick: undefined,
+  onFeaturesClick: void 0,
   featuresClickOptions: {
-    hitTolerance: 0,
+    hitTolerance: 0
   },
-  onFeaturesHover: undefined,
-  onMapMoved: undefined,
-  resolution: undefined,
-  tabIndex: undefined,
-  ariaLabel: 'map',
+  onFeaturesHover: void 0,
+  onMapMoved: void 0,
+  resolution: void 0,
+  tabIndex: void 0,
+  ariaLabel: "map",
   viewOptions: {
     minZoom: 0,
     maxZoom: 22,
-    extent: undefined,
-    projection: 'EPSG:3857',
+    extent: void 0,
+    projection: "EPSG:3857"
   },
-  zoom: 1,
+  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.
- */
-var BasicMap = /*@__PURE__*/(function (PureComponent) {
-  function BasicMap(props) {
-    PureComponent.call(this, props);
-    var ref = this.props;
-    var map = ref.map;
-    var interactions = ref.interactions;
-
-    this.map =
-      map ||
-      new OLMap({
-        controls: [],
-        interactions:
-          interactions ||
-          defaultInteractions({
-            altShiftDragRotate: false,
-            pinchRotate: false,
-          }),
-      });
-
+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,
+      node: null
     };
-
     this.layers = [];
     this.moveEndRef = null;
     this.singleClickRef = null;
     this.pointerMoveRef = null;
     this.setNode = this.setNode.bind(this);
   }
-
-  if ( PureComponent ) BasicMap.__proto__ = PureComponent;
-  BasicMap.prototype = Object.create( PureComponent && PureComponent.prototype );
-  BasicMap.prototype.constructor = BasicMap;
-
-  BasicMap.prototype.componentDidMount = function componentDidMount () {
-    var ref =
-      this.props;
-    var layers = ref.layers;
-    var extent = ref.extent;
-    var viewOptions = ref.viewOptions;
-    var center = ref.center;
-    var zoom = ref.zoom;
-    var resolution = ref.resolution;
-    var ref$1 = this.state;
-    var node = ref$1.node;
+  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(Object.assign({}, viewOptions, {center: center, zoom: zoom, resolution: 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
-    var 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.
+    this.map.setView(new View({ ...viewOptions, center, zoom, resolution }));
+    const viewPort = this.map.getViewport();
+    viewPort.style.touchAction = "none";
+    viewPort.style.msTouchAction = "none";
+    viewPort.setAttribute("touch-action", "none");
     if (this.map.getSize() && extent) {
       this.map.getView().fit(extent);
     }
-
     this.setLayers(layers);
     this.listenMoveEnd();
     this.listenSingleClick();
     this.listenPointerMove();
-  };
-
-  BasicMap.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) {
-    var ref = this.props;
-    var animationOptions = ref.animationOptions;
-    var center = ref.center;
-    var extent = ref.extent;
-    var fitOptions = ref.fitOptions;
-    var layers = ref.layers;
-    var resolution = ref.resolution;
-    var viewOptions = ref.viewOptions;
-    var zoom = ref.zoom;
-    var onMapMoved = ref.onMapMoved;
-    var onFeaturesClick = ref.onFeaturesClick;
-    var onFeaturesHover = ref.onFeaturesHover;
-    var ref$1 = this.state;
-    var node = ref$1.node;
-
+  }
+  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.
+    if (viewOptions && JSON.stringify(viewOptions) !== JSON.stringify(prevProps.viewOptions)) {
       this.map.setView(
-        new View(Object.assign({}, viewOptions,
-          {center: center,
-          resolution: resolution,
-          zoom: zoom}))
+        new View({
+          ...viewOptions,
+          center,
+          resolution,
+          zoom
+        })
       );
     }
-
-    var view = this.map.getView();
-
+    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();
     }
-  };
-
-  BasicMap.prototype.componentWillUnmount = function componentWillUnmount () {
+  }
+  componentWillUnmount() {
     unByKey([this.moveEndRef, this.singleClickRef, this.pointerMoveRef]);
-  };
-
-  BasicMap.prototype.setNode = function setNode (node) {
-    this.setState({ node: node });
-  };
-
-  BasicMap.prototype.setLayers = function setLayers (layers, prevLayers) {
-    if ( layers === void 0 ) layers = [];
-    if ( prevLayers === void 0 ) prevLayers = [];
-
-    for (var i = 0; i < prevLayers.length; i += 1) {
+  }
+  setNode(node) {
+    this.setState({ node });
+  }
+  setLayers(layers = [], prevLayers = []) {
+    for (let i = 0; i < prevLayers.length; i += 1) {
       this.terminateLayer(prevLayers[i]);
     }
-    for (var i$1 = 0; i$1 < layers.length; i$1 += 1) {
-      this.initLayer(layers[i$1]);
+    for (let i = 0; i < layers.length; i += 1) {
+      this.initLayer(layers[i]);
     }
     this.layers = layers;
-  };
-
-  BasicMap.prototype.initLayer = function initLayer (layer) {
-    layer.init(this.map);
-    if (
-      layer.olLayer &&
-      this.map.getLayers() &&
-      !this.map.getLayers().getArray().includes(layer.olLayer)
-    ) {
+  }
+  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);
     }
-    var layers = layer.children || [];
-    for (var i = 0; i < layers.length; i += 1) {
+    const layers = layer.children || [];
+    for (let i = 0; i < layers.length; i += 1) {
       this.initLayer(layers[i]);
     }
-  };
-
-  BasicMap.prototype.terminateLayer = function terminateLayer (layer) {
-    if (
-      layer.olLayer &&
-      this.map.getLayers() &&
-      this.map.getLayers().getArray().includes(layer.olLayer)
-    ) {
+  }
+  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);
     }
-    layer.terminate(this.map);
-    var layers = layer.children || [];
-    for (var i = 0; i < layers.length; i += 1) {
-      this.terminateLayer(layers[i]);
+    if (layer.terminate) {
+      layer.terminate(this.map);
     }
-  };
-
-  BasicMap.prototype.listenMoveEnd = function listenMoveEnd () {
-    var ref = this.props;
-    var onMapMoved = ref.onMapMoved;
+    if (layer.detachFromMap) {
+      layer.detachFromMap(this.map);
+    }
+  }
+  listenMoveEnd() {
+    const { onMapMoved } = this.props;
     unByKey(this.moveEndRef);
-
     if (!onMapMoved) {
       return;
     }
-
-    this.moveEndRef = this.map.on('moveend', function (evt) {
+    this.moveEndRef = this.map.on("moveend", (evt) => {
       return onMapMoved(evt);
     });
-  };
-
-  BasicMap.prototype.listenSingleClick = function listenSingleClick () {
-    var ref = this.props;
-    var onFeaturesClick = ref.onFeaturesClick;
-    var featuresClickOptions = ref.featuresClickOptions;
+  }
+  listenSingleClick() {
+    const { onFeaturesClick, featuresClickOptions } = this.props;
     unByKey(this.singleClickRef);
-
     if (!onFeaturesClick) {
       return;
     }
-
-    this.singleClickRef = this.map.on('singleclick', function (evt) {
-      var features = evt.map.getFeaturesAtPixel(
+    this.singleClickRef = this.map.on("singleclick", (evt) => {
+      const features = evt.map.getFeaturesAtPixel(
         evt.pixel,
         featuresClickOptions
       );
       onFeaturesClick(features || [], evt);
     });
-  };
-
-  BasicMap.prototype.listenPointerMove = function listenPointerMove () {
-    var ref = this.props;
-    var onFeaturesHover = ref.onFeaturesHover;
+  }
+  listenPointerMove() {
+    const { onFeaturesHover } = this.props;
     unByKey(this.pointerMoveRef);
-
     if (!onFeaturesHover) {
       return;
     }
-
-    this.pointerMoveRef = this.map.on('pointermove', function (evt) {
-      var features = evt.map.getFeaturesAtPixel(evt.pixel);
+    this.pointerMoveRef = this.map.on("pointermove", (evt) => {
+      const features = evt.map.getFeaturesAtPixel(evt.pixel);
       onFeaturesHover(features || [], evt);
     });
-  };
-
-  BasicMap.prototype.render = function render () {
-    var this$1 = this;
-
-    var ref = this.props;
-    var className = ref.className;
-    var tabIndex = ref.tabIndex;
-    var ariaLabel = ref.ariaLabel;
-    var style = ref.style;
-    var ref$1 = this.state;
-    var node = ref$1.node;
-    return (
-      React.createElement( 'div', {
-        className: className, ref: this.setNode, role: "presentation", 'aria-label': ariaLabel, tabIndex: tabIndex, style: style },
-        React.createElement( ResizeHandler, {
-          maxHeightBrkpts: null, maxWidthBrkpts: null, observe: node, onResize: function () {
-            this$1.map.updateSize();
-          } })
-      )
-    );
-  };
-
-  return BasicMap;
-}(PureComponent));
-
+  }
+  render() {
+    const { className, tabIndex, ariaLabel, style } = this.props;
+    const { node } = this.state;
+    return /* @__PURE__ */ React.createElement("div", {
+      className,
+      ref: this.setNode,
+      role: "presentation",
+      "aria-label": ariaLabel,
+      tabIndex,
+      style
+    }, /* @__PURE__ */ React.createElement(ResizeHandler, {
+      maxHeightBrkpts: null,
+      maxWidthBrkpts: null,
+      observe: node,
+      onResize: () => {
+        this.map.updateSize();
+      }
+    }));
+  }
+}
 BasicMap.propTypes = propTypes;
 BasicMap.defaultProps = defaultProps;
-
 export default BasicMap;
-
-//# sourceMappingURL=BasicMap.js.map