Improved zoom styling and fixed zoom in/out button styling.

This commit is contained in:
orangemug
2020-02-17 15:39:54 +00:00
parent f268f09ca2
commit 0f6708d9d4
8 changed files with 73 additions and 11 deletions

View File

@@ -1,8 +1,21 @@
import {mdiMagnify} from '@mdi/js';
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._container.innerHTML = `
<svg
style="width: 14px; height: 14px; vertical-align: middle;"
viewBox="0 0 24 24"
>
<title>Zoom level</title>
<path fill="currentColor" d="${mdiMagnify}" />
</svg> <span></span>
`;
this._textEl = this._container.querySelector("span");
this.addEventListeners();
@@ -10,7 +23,7 @@ export default class ZoomControl {
}
updateZoomLevel() {
this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
this._textEl.innerHTML = this._map.getZoom().toFixed(2);
}
addEventListeners (){