nakarte

commit 6a31c07b59c2630074d0b1f994e4e0bb02c024d7
parent 3fc97e82db3e60625bc38d3782d808f20630844d
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Fri,  2 Nov 2018 19:38:16 +0100

add customized zoom control with display of current zoom

Diffstat:
M
src/App.js
 | 
3
++-
A
src/lib/leaflet.control.zoom-display/index.js
 | 
28
++++++++++++++++++++++++++++
A
src/lib/leaflet.control.zoom-display/style.css
 | 
16
++++++++++++++++

3 files changed, 46 insertions(+), 1 deletion(-)
diff --git a/src/App.js b/src/App.js
@@ -28,6 +28,7 @@ import 'lib/leaflet.control.azimuth';
 import {hashState, bindHashStateReadOnly} from 'lib/leaflet.hashState/hashState';
 import {LocateControl} from 'lib/leaflet.control.locate';
 import {notify} from 'lib/notifications';
+import ZoomDisplay from 'lib/leaflet.control.zoom-display';
 
 const locationErrorMessage = {
     0: 'Your browser does not support geolocation.',
@@ -59,7 +60,7 @@ function setUp() {
 
     new L.Control.Scale({imperial: false, position: 'topleft'}).addTo(map);
 
-    L.control.zoom().addTo(map);
+    new ZoomDisplay().addTo(map);
 
     new L.Control.TrackList.Ruler(tracklist).addTo(map);
 
diff --git a/src/lib/leaflet.control.zoom-display/index.js b/src/lib/leaflet.control.zoom-display/index.js
@@ -0,0 +1,27 @@
+import L from 'leaflet';
+import './style.css';
+
+const ZoomWithDisplay = L.Control.Zoom.extend({
+    onAdd: function(map) {
+        const container = L.Control.Zoom.prototype.onAdd.call(this, map);
+        this._display = L.DomUtil.create('div', 'leaflet-control-zoom-display');
+        container.insertBefore(this._display, this._zoomOutButton);
+        map.on('zoomend', this._updateDisplay, this);
+        this._updateDisplay();
+        return container;
+    },
+
+
+    onRemove: function (map) {
+        L.Control.Zoom.prototype.onRemove.call(this, map);
+        map.off('zoomend', this._updateDisplay, this);
+    },
+
+    _updateDisplay: function() {
+        this._display.innerHTML = this._map.getZoom();
+    }
+
+
+});
+
+export default ZoomWithDisplay;
+\ No newline at end of file
diff --git a/src/lib/leaflet.control.zoom-display/style.css b/src/lib/leaflet.control.zoom-display/style.css
@@ -0,0 +1,15 @@
+.leaflet-control-zoom-display {
+    background-color: #fff;
+    width: 26px;
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: bold;
+}
+
+.leaflet-touch .leaflet-control-zoom-display {
+    width: 30px;
+}
+\ No newline at end of file