schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-11-10 09:47:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #179 from gregorywolanski/87

Browse source 
Display zoom level #87
This commit is contained in:
Orange Mug 2017-10-30 08:00:34 +00:00 committed by GitHub
commit adc8ed26c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/map/MapboxGlMap.jsx
View file

@ -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');

26
src/libs/zoomcontrol.js Normal file
View file

@ -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;
}
}

7
src/mapboxgl.css
View file

@ -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);
}