@mapbox/react-map-gl/src/components/navigation-control.js

A React wrapper for MapboxGL-js and overlay API.

import {createElement} from 'react';
import PropTypes from 'prop-types';
import BaseControl from './base-control';

import MapState from '../utils/map-state';
import {LINEAR_TRANSITION_PROPS} from '../utils/map-controller';

import deprecateWarn from '../utils/deprecate-warn';

const propTypes = Object.assign({}, BaseControl.propTypes, {
  // Custom className
  className: PropTypes.string,
  // Callbacks fired when the user interacted with the map. The object passed to the callbacks
  // contains viewport properties such as `longitude`, `latitude`, `zoom` etc.
  onViewStateChange: PropTypes.func,
  onViewportChange: PropTypes.func,
  // Show/hide compass button
  showCompass: PropTypes.bool,
  // Show/hide zoom buttons
  showZoom: PropTypes.bool
});

const defaultProps = Object.assign({}, BaseControl.defaultProps, {
  className: '',
  onViewStateChange: () => {},
  onViewportChange: () => {},
  showCompass: true,
  showZoom: true
});

/*
 * PureComponent doesn't update when context changes, so
 * implementing our own shouldComponentUpdate here.
 */
export default class NavigationControl extends BaseControl {

  static propTypes = propTypes;
  static defaultProps = defaultProps;

  constructor(props) {
    super(props);
    // Check for deprecated props
    deprecateWarn(props);
  }

  _updateViewport(opts) {
    const {viewport} = this._context;
    const mapState = new MapState(Object.assign({}, viewport, opts));
    const viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);

    // Call new style callback
    this.props.onViewStateChange({viewState});

    // Call old style callback
    this.props.onViewportChange(viewState);
  }

  _onZoomIn = () => {
    this._updateViewport({zoom: this._context.viewport.zoom + 1});
  }

  _onZoomOut = () => {
    this._updateViewport({zoom: this._context.viewport.zoom - 1});
  }

  _onResetNorth = () => {
    this._updateViewport({bearing: 0, pitch: 0});
  }

  _renderCompass() {
    const {bearing} = this._context.viewport;
    return createElement('span', {
      className: 'mapboxgl-ctrl-compass-arrow',
      style: {transform: `rotate(${-bearing}deg)`}
    });
  }

  _renderButton(type, label, callback, children) {
    return createElement('button', {
      key: type,
      className: `mapboxgl-ctrl-icon mapboxgl-ctrl-${type}`,
      type: 'button',
      title: label,
      onClick: callback,
      children
    });
  }

  _render() {
    const {className, showCompass, showZoom} = this.props;

    return createElement('div', {
      className: `mapboxgl-ctrl mapboxgl-ctrl-group ${className}`,
      ref: this._containerRef
    }, [
      showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn),
      showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut),
      showCompass &&
        this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass())
    ]);
  }
}