nakarte

commit 0a5662b71e681e750051b0bd320fa4ced41870ab
parent 64115824a6e7a6ef0dea304fddefee001c46c346
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Tue,  6 Nov 2018 22:43:20 +0100

Merge branch '153-zoom-display' into release-5

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.',
@@ -58,7 +59,7 @@ function setUp() {
     ).addTo(map);
 
 
-    L.control.zoom().addTo(map);
+    new ZoomDisplay().addTo(map);
 
     new L.Control.Scale({
         imperial: false,
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