react-spatial/components/FitExtent/FitExtent.js

Components to build React map apps.

import React from 'react';
import PropTypes from 'prop-types';
import { FaExpand } from 'react-icons/fa';
import OLMap from 'ol/Map';
import Button from '../Button';

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

  /**
   * The extent to be zoomed.
   */
  extent: PropTypes.arrayOf(PropTypes.number).isRequired,

  /**
   * Title for the fitExtent button.
   */
  title: PropTypes.string,

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

  /**
   * Children content of the fitExtent button.
   */
  children: PropTypes.node,
};

var defaultProps = {
  title: 'Fit Extent',
  className: 'tm-button tm-round-blue',
  children: React.createElement( FaExpand, { focusable: false }),
};

/**
 * This component creates a button to zoom to the given extent.
 */
function FitExtent(ref) {
  var map = ref.map;
  var extent = ref.extent;
  var title = ref.title;
  var className = ref.className;
  var children = ref.children;

  return (
    React.createElement( Button, {
      className: className, title: title, onClick: function () {
        map.getView().cancelAnimations();
        map.getView().fit(extent, map.getSize());
      } },
      children
    )
  );
}

FitExtent.propTypes = propTypes;
FitExtent.defaultProps = defaultProps;

export default FitExtent;

//# sourceMappingURL=FitExtent.js.map