react-spatial/components/Zoom/Zoom.js

Components to build React map apps.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FaPlus, FaMinus } from 'react-icons/fa';
import { ZoomSlider } from 'ol/control';
import OLMap from 'ol/Map';
import Button from '../Button';

var propTypes = {
  /**
   * An ol map.
   */
  map: PropTypes.instanceOf(OLMap).isRequired,

  /**
   * Title for the zoom in button.
   */
  zoomInTitle: PropTypes.string,

  /**
   * Title for the zoom out button.
   */
  zoomOutTitle: PropTypes.string,

  /**
   * CSS class of the button.
   */
  className: PropTypes.string,

  /**
   * CSS class of the zoom in button.
   */
  zoomInClassName: PropTypes.string,

  /**
   * CSS class of the zoom out button.
   */
  zoomOutClassName: PropTypes.string,

  /**
   * Children content of the zoom in button.
   */
  zoomInChildren: PropTypes.node,

  /**
   * Children content of the zoom out button.
   */
  zoomOutChildren: PropTypes.node,

  /**
   * Display a slider to zoom.
   */
  zoomSlider: PropTypes.bool,
};

var defaultProps = {
  zoomInTitle: 'Zoom in',
  zoomOutTitle: 'Zoom out',
  className: 'tm-zooms-bar',
  zoomInClassName: 'tm-button tm-round-blue',
  zoomOutClassName: 'tm-button tm-round-blue',
  zoomInChildren: React.createElement( FaPlus, { focusable: false }),
  zoomOutChildren: React.createElement( FaMinus, { focusable: false }),
  zoomSlider: false,
};

/**
 * This component creates a zoom wrapper.
 */
var Zoom = /*@__PURE__*/(function (Component) {
  function Zoom(props) {
    Component.call(this, props);
    this.ref = React.createRef();
  }

  if ( Component ) Zoom.__proto__ = Component;
  Zoom.prototype = Object.create( Component && Component.prototype );
  Zoom.prototype.constructor = Zoom;

  Zoom.prototype.componentDidMount = function componentDidMount () {
    var ref = this.props;
    var zoomSlider = ref.zoomSlider;
    if (zoomSlider) {
      this.displayZoomSlider();
    }
  };

  Zoom.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
    var ref = this.props;
    var zoomSlider = ref.zoomSlider;
    if (prevProps.zoomSlider !== zoomSlider) {
      if (zoomSlider) {
        this.displayZoomSlider();
      } else {
        this.removeZoomSlider();
      }
    }
  };

  Zoom.prototype.componentWillUnmount = function componentWillUnmount () {
    if (this.olZoomSlider) {
      this.removeZoomSlider();
    }
  };

  Zoom.prototype.displayZoomSlider = function displayZoomSlider () {
    var ref = this.props;
    var map = ref.map;
    this.olZoomSlider = new ZoomSlider();
    this.olZoomSlider.element.classList.remove('ol-control');
    // Unset tabIndex on zoom slider button.
    this.olZoomSlider.element.firstElementChild.tabIndex = -1;
    // Set the zoom slider in the custom control wrapper.
    this.olZoomSlider.setTarget(this.ref.current);
    map.addControl(this.olZoomSlider);
  };

  Zoom.prototype.removeZoomSlider = function removeZoomSlider () {
    var ref = this.props;
    var map = ref.map;
    map.removeControl(this.olZoomSlider);
  };

  Zoom.prototype.updateZoom = function updateZoom (zoomAction) {
    var ref = this.props;
    var map = ref.map;
    map.getView().cancelAnimations();
    var zoom = map.getView().getZoom();

    map.getView().animate({
      zoom: zoom + zoomAction,
    });
  };

  Zoom.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props;
    var zoomInTitle = ref.zoomInTitle;
    var zoomOutTitle = ref.zoomOutTitle;
    var className = ref.className;
    var zoomInClassName = ref.zoomInClassName;
    var zoomOutClassName = ref.zoomOutClassName;
    var zoomInChildren = ref.zoomInChildren;
    var zoomOutChildren = ref.zoomOutChildren;
    var zoomSlider = ref.zoomSlider;

    return (
      React.createElement( 'div', { className: className },
        React.createElement( Button, {
          className: zoomInClassName, title: zoomInTitle, onClick: function () { return this$1.updateZoom(1); } },
          zoomInChildren
        ),
        zoomSlider ? (
          React.createElement( 'div', { className: "tm-zoomslider-wrapper", ref: this.ref })
        ) : null,
        React.createElement( Button, {
          className: zoomOutClassName, title: zoomOutTitle, onClick: function () { return this$1.updateZoom(-1); } },
          zoomOutChildren
        )
      )
    );
  };

  return Zoom;
}(Component));

Zoom.propTypes = propTypes;
Zoom.defaultProps = defaultProps;

export default Zoom;

//# sourceMappingURL=Zoom.js.map