nakarte

commit 9063d4ed580c606105523e4fcd4115691d785753
parent 3fc97e82db3e60625bc38d3782d808f20630844d
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Fri,  2 Nov 2018 20:45:29 +0100

stack horizontally zoom and scale controls #158

Diffstat:
M
src/App.js
 | 
7
++++++-
M
src/lib/leaflet.fixes/index.js
 | 
13
+++++++++++++
M
src/lib/leaflet.fixes/style.css
 | 
12
++++++++++++

3 files changed, 31 insertions(+), 1 deletion(-)
diff --git a/src/App.js b/src/App.js
@@ -57,10 +57,15 @@ function setUp() {
         }
     ).addTo(map);
 
-    new L.Control.Scale({imperial: false, position: 'topleft'}).addTo(map);
 
     L.control.zoom().addTo(map);
 
+    new L.Control.Scale({
+        imperial: false,
+        position: 'topleft',
+        stackHorizontally: true
+    }).addTo(map);
+
     new L.Control.TrackList.Ruler(tracklist).addTo(map);
 
     const panoramas = new L.Control.Panoramas(document.getElementById('street-view'))
diff --git a/src/lib/leaflet.fixes/index.js b/src/lib/leaflet.fixes/index.js
@@ -6,6 +6,7 @@ function fixAll() {
     fixTouchDetection();
     fixMapKeypressEvent();
     fixVectorDrawWhileAnimation();
+    allowControlHorizontalStacking();
 }
 
 // https://github.com/Leaflet/Leaflet/issues/3575
@@ -78,4 +79,16 @@ function fixVectorDrawWhileAnimation() {
     L.Renderer.__animationFixed = true;
 }
 
+function allowControlHorizontalStacking() {
+    const original_addTo = L.Control.prototype.addTo;
+    L.Control.prototype.addTo = function(map) {
+        console.log('!!!!!!!!!!');
+        const result = original_addTo.call(this, map);
+        if (this.options.stackHorizontally) {
+            L.DomUtil.addClass(this._container, 'leaflet-control-horizontal-stack');
+        }
+        return result;
+    }
+}
+
 export {fixAll}
diff --git a/src/lib/leaflet.fixes/style.css b/src/lib/leaflet.fixes/style.css
@@ -1,3 +1,15 @@
 .leaflet-popup-pane, .leaflet-control {
     cursor: default;
+}
+
+.leaflet-control-horizontal-stack {
+    clear: none;
+}
+
+.leaflet-left .leaflet-control-horizontal-stack {
+    margin-left: 8px;
+}
+
+.leaflet-right .leaflet-control-horizontal-stack {
+    margin-right: 8px;
 }
 \ No newline at end of file