react-map-gl/docs/components/navigation-control.md

Navigation Control

This is a React equivalent of Mapbox's NavigationControl, which provides zoom buttons and a compass button.

import {Component} from 'react';
import ReactMapGL, {Popup} from 'react-map-gl';

class Map extends Component {
  render() {
    return (
      <ReactMapGL {...viewport} onChangeViewport={updateViewport}>
        <div style={{position: 'absolute', right: 0}}>
          <NavigationControl onChangeViewport={updateViewport} />
        </div>
      </ReactMapGL>
    );
  }
}

Properties

onViewportChange {Function}

Callback when the viewport needs to be updated. See InteractiveMap.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly.

You may add the stylesheet to your page:

<!-- index.html -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />

Or embed it in your app by using - browserify-css with Browserify or - css-loader with Webpack:

// app.js
import 'mapbox-gl/dist/mapbox-gl.css';