feat(NavigationControl): add NavigationControl #116

Author: stepankuzmin

docs/navigation-control.md

@@ -0,0 +1,14 @@
+A `NavigationControl` control contains zoom buttons and a compass.
+
+```jsx
+<MapGL
+  style={{ width: '100%', height: '400px' }}
+  mapStyle='mapbox://styles/mapbox/light-v9'
+  accessToken={MAPBOX_ACCESS_TOKEN}
+  latitude={37.78}
+  longitude={-122.41}
+  zoom={11}
+>
+  <NavigationControl showCompass showZoom position='top-left' />
+</MapGL>
+```

flow-typed/types.js

@@ -3,6 +3,7 @@
 import type Map from 'mapbox-gl/src/ui/map';
 import type Popup from 'mapbox-gl/src/ui/popup';
 import type Marker from 'mapbox-gl/src/ui/marker';
+import type NavigationControl from 'mapbox-gl/src/ui/control/navigation_control';
 import type { Map as ImmutableMap } from 'immutable';
 import type { MapMouseEvent, MapTouchEvent } from 'mapbox-gl/src/ui/events';
 
@@ -20,6 +21,8 @@ declare type MapboxPopup = Popup;
 
 declare type MapboxMarker = Marker;
 
+declare type MapboxNavigationControl = NavigationControl;
+
 declare type MapboxLngLatBoundsLike = LngLatBoundsLike;
 
 declare type MapboxLayerSpecification = LayerSpecification;

src/components/NavigationControl/index.js

@@ -0,0 +1,62 @@
+// @flow
+
+import { PureComponent, createElement } from 'react';
+
+import MapContext from '../MapContext';
+import mapboxgl from '../../utils/mapbox-gl';
+
+type Props = {
+  /* If true the compass button is included. */
+  showCompass: boolean,
+
+  /* If true the zoom-in and zoom-out buttons are included. */
+  showZoom: boolean,
+
+  /* A string representing the position of the control on the map. */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+};
+
+/**
+ * A `NavigationControl` control contains zoom buttons and a compass.
+ */
+class NavigationControl extends PureComponent<Props> {
+  _map: MapboxMap;
+
+  _control: MapboxNavigationControl;
+
+  static defaultProps = {
+    position: 'top-right'
+  };
+
+  componentDidMount() {
+    const map: MapboxMap = this._map;
+    const { showCompass, showZoom, position } = this.props;
+
+    const control: MapboxNavigationControl = new mapboxgl.NavigationControl({
+      showCompass,
+      showZoom
+    });
+
+    map.addControl(control, position);
+    this._control = control;
+  }
+
+  componentWillUnmount() {
+    if (!this._map) {
+      return;
+    }
+
+    this._map.removeControl(this._control);
+  }
+
+  render() {
+    return createElement(MapContext.Consumer, {}, (map) => {
+      if (map) {
+        this._map = map;
+      }
+      return null;
+    });
+  }
+}
+
+export default NavigationControl;

src/index.js

@@ -6,3 +6,4 @@ export { default as Source } from './components/Source';
 export { default as Popup } from './components/Popup';
 export { default as Marker } from './components/Marker';
 export { default as Cluster } from './components/Cluster';
+export { default as NavigationControl } from './components/NavigationControl';

styleguide.config.js

@@ -23,7 +23,8 @@ module.exports = {
         'src/components/Layer/index.js',
         'src/components/Popup/index.js',
         'src/components/Marker/index.js',
-        'src/components/Cluster/index.js'
+        'src/components/Cluster/index.js',
+        'src/components/NavigationControl/index.js'
       ]
     },
     {
@@ -80,6 +81,10 @@ module.exports = {
         {
           name: 'Change Map style',
           content: 'docs/change-map-style.md'
+        },
+        {
+          name: 'Navigation Control',
+          content: 'docs/navigation-control.md'
         }
       ]
     }