diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 11b50193..3c472f12 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/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'); diff --git a/src/libs/zoomcontrol.js b/src/libs/zoomcontrol.js new file mode 100644 index 00000000..2f7900df --- /dev/null +++ b/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; + } +} diff --git a/src/mapboxgl.css b/src/mapboxgl.css index 5038759c..afe45f1a 100644 --- a/src/mapboxgl.css +++ b/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); }