diff --git a/src/client/components/Deck.js b/src/client/components/Deck.js
index 8069b44aa8c319765fea8d30728e2e90f32984a4..9437eec36c12cc91b35a6090e919298e287e71fd 100644
--- a/src/client/components/Deck.js
+++ b/src/client/components/Deck.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DeckGL, { ArcLayer } from 'deck.gl';
-import MapGL from 'react-map-gl';
+import ReactMapGL, { NavigationControl } from 'react-map-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import InfoDialog from './InfoDialog';
 
@@ -147,21 +147,26 @@ class Deck extends React.Component {
    });
 
    return (
-     <MapGL
+     <ReactMapGL
        {...this.state.viewport}
        onViewportChange={this._onViewportChange}
-       mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} >
+       mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
+     >
        <DeckGL
          viewState={this.state.viewport}
          layers={[layer]}
        />
+       <div style={{position: 'absolute', left: 10, top: 10}}>
+         <NavigationControl onViewportChange={this._onViewportChange} />
+       </div>
+
        {this._renderTooltip()}
        <InfoDialog
          open={this.state.dialog.open}
          onClose={this.closeDialog.bind(this)}
          data={this.state.dialog.data}
        />
-     </MapGL>
+     </ReactMapGL>
    );
  }
 }