react-spatial/components/MousePosition/MousePosition.js

Components to build React map apps.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import OLMap from 'ol/Map';
import { createStringXY } from 'ol/coordinate';
import OLMousePosition from 'ol/control/MousePosition';
import Select from '../Select';

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

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

  /**
   * Function triggered on projection's change event.
   * @param {Event} event The change event object.
   * @param {Object} projection The selected projection object.
   */
  onChange: PropTypes.func,

  /**
   * List of projections to display.
   */
  projections: PropTypes.arrayOf(
    PropTypes.shape({
      /**
       * The label to display in the select box.
       */
      label: PropTypes.string.isRequired,

      /**
       * The value used to create the options´s projection of the MousePosition control.
       * See [doc](https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition.html).
       */
      value: PropTypes.string.isRequired,

      /**
       * A function following the  [CoordinateFormat](https://openlayers.org/en/latest/apidoc/module-ol_coordinate.html#~CoordinateFormat).
       */
      format: PropTypes.func,
    })
  ),
};

var defaultProps = {
  className: 'tm-mouse-position',
  onChange: function () {},
  projections: [
    {
      label: 'EPSG:4326',
      value: 'EPSG:4326',
    },
    {
      label: 'EPSG:3857',
      value: 'EPSG:3857',
    } ],
};

var MousePosition = /*@__PURE__*/(function (PureComponent) {
  function MousePosition(props) {
    PureComponent.call(this, props);
    var ref = this.props;
    var projections = ref.projections;
    var onChange = ref.onChange;

    var initialProjection = projections && projections[0];
    this.state = {
      projection: initialProjection,
    };
    onChange(null, initialProjection);
    this.ref = React.createRef();
  }

  if ( PureComponent ) MousePosition.__proto__ = PureComponent;
  MousePosition.prototype = Object.create( PureComponent && PureComponent.prototype );
  MousePosition.prototype.constructor = MousePosition;

  MousePosition.prototype.componentDidMount = function componentDidMount () {
    this.updateControl();
  };

  MousePosition.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) {
    var ref = this.state;
    var projection = ref.projection;

    if (prevState.projection !== projection) {
      this.updateControl();
    }
  };

  MousePosition.prototype.componentWillUnmount = function componentWillUnmount () {
    if (this.control) {
      var ref = this.props;
      var map = ref.map;
      map.removeControl(this.control);
    }
  };

  MousePosition.prototype.updateControl = function updateControl () {
    var ref = this.props;
    var map = ref.map;
    var ref$1 = this.state;
    var projection = ref$1.projection;

    if (this.control) {
      map.removeControl(this.control);
    }

    if (!projection || !this.ref || !this.ref.current) {
      return;
    }

    this.control = new OLMousePosition({
      coordinateFormat: projection.format || createStringXY(4),
      projection: projection.value,
      target: this.ref.current,
      undefinedHTML: ' ',
      className: '',
    });
    map.addControl(this.control);
  };

  MousePosition.prototype.renderSelect = function renderSelect () {
    var this$1 = this;

    var ref = this.props;
    var projections = ref.projections;
    var onChange = ref.onChange;
    var ref$1 = this.state;
    var projection = ref$1.projection;
    if (!projections.length) {
      return null;
    }

    return (
      React.createElement( Select, {
        options: projections, value: projection, onChange: function (evt, proj) {
          this$1.setState({
            projection: proj,
          });
          onChange(evt, proj);
        } })
    );
  };

  MousePosition.prototype.render = function render () {
    var ref = this.props;
    var className = ref.className;
    return (
      React.createElement( 'div', { className: className },
        this.renderSelect(),
        React.createElement( 'span', { ref: this.ref })
      )
    );
  };

  return MousePosition;
}(PureComponent));

MousePosition.propTypes = propTypes;
MousePosition.defaultProps = defaultProps;

export default MousePosition;

//# sourceMappingURL=MousePosition.js.map