react-spatial/components/NorthArrow/NorthArrow.js

Components to build React map apps.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import OLMap from 'ol/Map';
import NorthArrowSimple from '../../images/northArrow.svg';
import NorthArrowCircle from '../../images/northArrowCircle.svg';

var propTypes = {
  /**
   * CSS class of the button.
   */
  className: PropTypes.string,

  /**
   * Rotation of the north arrow in degrees.
   */
  rotationOffset: PropTypes.number,

  /**
   * Display circle around the north arrow. Not used if pass children.
   */
  circled: PropTypes.bool,

  /**
   *  Children content of the north arrow.
   */
  children: PropTypes.node,

  /**
   * An ol map.
   */
  map: PropTypes.instanceOf(OLMap).isRequired,
};

var defaultProps = {
  className: 'tm-north-arrow',
  rotationOffset: 0,
  circled: false,
  children: null,
};

/**
 * This component displays an arrow pointing the North of the map.
 */
var NorthArrow = /*@__PURE__*/(function (PureComponent) {
  function NorthArrow(props) {
    var this$1 = this;

    PureComponent.call(this, props);
    var ref = this.props;
    var map = ref.map;
    var rotationOffset = ref.rotationOffset;
    this.state = {
      rotation: map.getView().getRotation() + rotationOffset,
    };

    map.on('postrender', function (e) { return this$1.onRotate(e); });
  }

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

  NorthArrow.radToDeg = function radToDeg (rad) {
    return (rad * 360) / (Math.PI * 2);
  };

  NorthArrow.prototype.onRotate = function onRotate (evt) {
    var ref = this.props;
    var rotationOffset = ref.rotationOffset;

    this.setState({
      rotation:
        NorthArrow.radToDeg(evt.map.getView().getRotation()) + rotationOffset,
    });
  };

  NorthArrow.prototype.render = function render () {
    var ref = this.props;
    var className = ref.className;
    var circled = ref.circled;
    var children = ref.children;
    var ref$1 = this.state;
    var rotation = ref$1.rotation;

    return (
      React.createElement( 'div', {
        className: className, style: { transform: ("rotate(" + rotation + "deg)") } },
        children || (circled ? React.createElement( NorthArrowCircle, null ) : React.createElement( NorthArrowSimple, null ))
      )
    );
  };

  return NorthArrow;
}(PureComponent));

NorthArrow.propTypes = propTypes;
NorthArrow.defaultProps = defaultProps;

export default NorthArrow;

//# sourceMappingURL=NorthArrow.js.map