Merge pull request #179 from gregorywolanski/87

Display zoom level #87

src/components/map/MapboxGlMap.jsx

@@ -8,6 +8,7 @@ import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
+import ZoomControl from '../../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -109,6 +110,9 @@ export default class MapboxGlMap extends React.Component {
       hash: true,
     })
 
+    const zoom = new ZoomControl;
+    map.addControl(zoom, 'top-right');
+
     const nav = new MapboxGl.NavigationControl();
     map.addControl(nav, 'top-right');
 

src/libs/zoomcontrol.js

@@ -0,0 +1,26 @@
+export default class ZoomControl {
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement('div');
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
+    
+    this.addEventListeners();
+    
+    return this._container;
+  }
+  
+  updateZoomLevel() {
+    this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
+  }
+  
+  addEventListeners (){
+    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+  }
+
+  onRemove() {
+    this._container.parentNode.removeChild(this._container);
+    this._map = undefined;
+  }
+}

src/mapboxgl.css

@@ -25,6 +25,13 @@
   color: white;
 }
 
+.mapboxgl-ctrl-zoom {
+  color: rgb(138, 138, 138);
+  font-weight: bold;
+  padding: 4px 8px;
+  user-select: none;
+}
+
 .mapboxgl-ctrl-group {
   background: rgb(28, 31, 36);
 }