From 0cd79f14745caf486956492b81f6fba0cffc326c Mon Sep 17 00:00:00 2001 From: johndoe Date: Tue, 19 Mar 2019 14:29:07 +0200 Subject: [PATCH 1/6] css: unify indents (and other whitespace corrections) --- src/L.Control.Pan.css | 122 +++++++++++++++++++-------------------- src/L.Control.Pan.ie.css | 33 +++++------ 2 files changed, 77 insertions(+), 78 deletions(-) diff --git a/src/L.Control.Pan.css b/src/L.Control.Pan.css index 63aa089..f365115 100644 --- a/src/L.Control.Pan.css +++ b/src/L.Control.Pan.css @@ -1,8 +1,8 @@ /* Make the default zoom control align with the pan control. - - This is ugly. - The parent box (class="leaflet-top leaflet-left") - should make all the child boxes be center-aligned instead. + + This is ugly. + The parent box (class="leaflet-top leaflet-left") + should make all the child boxes be center-aligned instead. Not sure if that is possible though. */ .leaflet-left.has-leaflet-pan-control .leaflet-control-zoom { @@ -14,10 +14,10 @@ right: 24px; } -/* - Make the zoomSlider control - (https://github.com/mattiasbengtsson/Leaflet.zoomslider) - align with the pan control. +/* + Make the zoomSlider control + (https://github.com/mattiasbengtsson/Leaflet.zoomslider) + align with the pan control. */ .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { position: relative; @@ -28,65 +28,65 @@ right: 22px; } -.leaflet-control-pan { - /* - .leaflet-control-pan-right-wrap: right - + .leaflet-control-pan a: width - = 52 + 24 = 76 - */ - width: 76px; - /* - .leaflet-control-pan-down-wrap: top - + .leaflet-control-pan a: height - = 52 + 24 = 76 - */ +.leaflet-control-pan { + /* + .leaflet-control-pan-right-wrap: right + + .leaflet-control-pan a: width + = 52 + 24 = 76 + */ + width: 76px; + /* + .leaflet-control-pan-down-wrap: top + + .leaflet-control-pan a: height + = 52 + 24 = 76 + */ height: 76px; } .leaflet-control-pan > div { - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; } .leaflet-control-pan > div { - box-shadow: 0 1px 7px rgba(0,0,0,0.65); + box-shadow: 0 1px 7px rgba(0,0,0,0.65); } .leaflet-control-pan a { - background-color: #fff; + background-color: #fff; } .leaflet-control-pan a{ - background-position: 50% 50%; - background-repeat: no-repeat; - display: block; + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; } .leaflet-control-pan a { - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - width: 23px; - height: 23px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + width: 23px; + height: 23px; } .leaflet-control-pan a:hover { - background-color: #f4f4f4; + background-color: #f4f4f4; } .leaflet-control-pan-up-wrap { - position:absolute; - left:26px; + position: absolute; + left: 26px; } .leaflet-control-pan-left-wrap { - position:absolute; - top:26px; + position: absolute; + top: 26px; } .leaflet-control-pan-right-wrap { - position:absolute; - left:52px; - top:26px; + position: absolute; + left: 52px; + top: 26px; } .leaflet-control-pan-down-wrap { - position:absolute; - left:26px; - top:52px; + position: absolute; + left: 26px; + top: 52px; } .leaflet-control-pan-up { @@ -104,44 +104,44 @@ /****** Touch Alterations ******/ .leaflet-touch .leaflet-control-pan div { - border: 2px solid rgba(0, 0, 0, 0.2); - box-shadow: none; + border: 2px solid rgba(0, 0, 0, 0.2); + box-shadow: none; - border-radius: 4px; + border-radius: 4px; } .leaflet-touch .leaflet-control-pan { - width: 89px; - height: 119px; - margin-left: 8px; + width: 89px; + height: 119px; + margin-left: 8px; } .leaflet-touch .leaflet-right .leaflet-control-pan { - margin-left: 0; - margin-right: 5px; + margin-left: 0; + margin-right: 5px; } .leaflet-touch .leaflet-control-pan a { - width: 30px; - height: 30px; + width: 30px; + height: 30px; - border-radius: 4px; + border-radius: 4px; } .leaflet-touch .leaflet-control-pan-up-wrap { - left:26px; + left: 26px; } .leaflet-touch .leaflet-control-pan-left-wrap { - top:40px; + top: 40px; } .leaflet-touch .leaflet-control-pan-right-wrap { - left:52px; - top:40px; + left: 52px; + top: 40px; } .leaflet-touch .leaflet-control-pan-down-wrap { - left:26px; - top:80px; + left: 26px; + top: 80px; } diff --git a/src/L.Control.Pan.ie.css b/src/L.Control.Pan.ie.css index a8c0678..ecc947d 100644 --- a/src/L.Control.Pan.ie.css +++ b/src/L.Control.Pan.ie.css @@ -1,40 +1,39 @@ - .leaflet-control-pan > div { filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000'); - border: 3px solid #999; + border: 3px solid #999; } .leaflet-control-pan a { background-color: #fff; - width: 17px; - height: 17px; + width: 17px; + height: 17px; } .leaflet-control-pan a:hover { - background-color: #f4f4f4; + background-color: #f4f4f4; } .leaflet-control-pan-up-wrap { - position:absolute; - left:27px; + position: absolute; + left: 27px; } .leaflet-control-pan-left-wrap { - position:absolute; - top:27px; + position: absolute; + top: 27px; } .leaflet-control-pan-right-wrap { - position:absolute; - left:54px; - top:27px; + position: absolute; + left: 54px; + top: 27px; } .leaflet-control-pan-down-wrap { - position:absolute; - left:27px; - top:54px; + position: absolute; + left: 27px; + top: 54px; } .leaflet-control-zoom { - left:23px; + left: 23px; } .leaflet-control-zoomslider { position: relative; - left:23px; + left: 23px; } From cd17e936bb8b52192e683789b28cbc7ba5f914bf Mon Sep 17 00:00:00 2001 From: johndoe Date: Sat, 23 Mar 2019 17:12:54 +0200 Subject: [PATCH 2/6] css: some values refined --- src/L.Control.Pan.css | 61 ++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 35 deletions(-) diff --git a/src/L.Control.Pan.css b/src/L.Control.Pan.css index f365115..2f4959e 100644 --- a/src/L.Control.Pan.css +++ b/src/L.Control.Pan.css @@ -6,12 +6,10 @@ Not sure if that is possible though. */ .leaflet-left.has-leaflet-pan-control .leaflet-control-zoom { - position: relative; - left: 24px; + left: 24.5px; /* (75-26)/2 */ } .leaflet-right.has-leaflet-pan-control .leaflet-control-zoom { - position: relative; - right: 24px; + right: 24.5px; } /* @@ -20,49 +18,42 @@ align with the pan control. */ .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { - position: relative; - left: 22px; + left: 22.5px; } .leaflet-right.has-leaflet-pan-control .leaflet-control-zoomslider { - position: relative; - right: 22px; + right: 22.5px; } .leaflet-control-pan { /* .leaflet-control-pan-right-wrap: right + .leaflet-control-pan a: width - = 52 + 24 = 76 + = 52 + 23 = 75 */ - width: 76px; + width: 75px; /* .leaflet-control-pan-down-wrap: top + .leaflet-control-pan a: height - = 52 + 24 = 76 + = 52 + 23 = 75 */ - height: 76px; + height: 75px; } .leaflet-control-pan > div { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -} -.leaflet-control-pan > div { box-shadow: 0 1px 7px rgba(0,0,0,0.65); + position: absolute; } .leaflet-control-pan a { background-color: #fff; -} -.leaflet-control-pan a{ background-position: 50% 50%; background-repeat: no-repeat; - display: block; -} -.leaflet-control-pan a { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; + display: block; width: 23px; height: 23px; } @@ -71,20 +62,16 @@ } .leaflet-control-pan-up-wrap { - position: absolute; left: 26px; } .leaflet-control-pan-left-wrap { - position: absolute; top: 26px; } .leaflet-control-pan-right-wrap { - position: absolute; left: 52px; top: 26px; } .leaflet-control-pan-down-wrap { - position: absolute; left: 26px; top: 52px; } @@ -103,29 +90,33 @@ } /****** Touch Alterations ******/ -.leaflet-touch .leaflet-control-pan div { - border: 2px solid rgba(0, 0, 0, 0.2); - box-shadow: none; +.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-zoom { + left: 26px; /* (86-30)/2-2 */ +} +.leaflet-touch .leaflet-right.has-leaflet-pan-control .leaflet-control-zoom { + right: 26px; +} - border-radius: 4px; +.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { + left: 24px; +} +.leaflet-touch .leaflet-right.has-leaflet-pan-control .leaflet-control-zoomslider { + right: 24px; } .leaflet-touch .leaflet-control-pan { - width: 89px; - height: 119px; - margin-left: 8px; + width: 86px; /* 52+30+2*2 */ + height: 114px; } -.leaflet-touch .leaflet-right .leaflet-control-pan { - margin-left: 0; - margin-right: 5px; +.leaflet-touch .leaflet-control-pan div { + border: 2px solid rgba(0, 0, 0, 0.2); + box-shadow: none; } .leaflet-touch .leaflet-control-pan a { width: 30px; height: 30px; - - border-radius: 4px; } .leaflet-touch .leaflet-control-pan-up-wrap { From 07378a383565d413c0e2ce8003ec372ff7c3bd69 Mon Sep 17 00:00:00 2001 From: johndoe Date: Sat, 23 Mar 2019 17:22:10 +0200 Subject: [PATCH 3/6] examples: add options (mainly for easy position change) --- examples/script.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/examples/script.js b/examples/script.js index af4cfd6..ae0cfa8 100644 --- a/examples/script.js +++ b/examples/script.js @@ -20,5 +20,8 @@ var map = L.TileJSON.createMap('map', osmTileJSON, { mapOptions: { zoomControl: false } }); -L.control.pan().addTo(map); -L.control.zoom().addTo(map); +var options = { + position: 'topleft' +}; +L.control.pan(options).addTo(map); +L.control.zoom({ position: options.position }).addTo(map); From 4324f8540d5a20404c0f2b839cfd465362e7c3eb Mon Sep 17 00:00:00 2001 From: johndoe Date: Sat, 23 Mar 2019 17:28:28 +0200 Subject: [PATCH 4/6] css: smart align any leaflet control (not only zoom control / zoom slider) --- src/L.Control.Pan.css | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/src/L.Control.Pan.css b/src/L.Control.Pan.css index 2f4959e..071cfbb 100644 --- a/src/L.Control.Pan.css +++ b/src/L.Control.Pan.css @@ -1,27 +1,15 @@ -/* Make the default zoom control align with the pan control. - - This is ugly. - The parent box (class="leaflet-top leaflet-left") - should make all the child boxes be center-aligned instead. - Not sure if that is possible though. -*/ -.leaflet-left.has-leaflet-pan-control .leaflet-control-zoom { +.leaflet-left.has-leaflet-pan-control { left: 24.5px; /* (75-26)/2 */ } -.leaflet-right.has-leaflet-pan-control .leaflet-control-zoom { +.leaflet-right.has-leaflet-pan-control { right: 24.5px; } -/* - Make the zoomSlider control - (https://github.com/mattiasbengtsson/Leaflet.zoomslider) - align with the pan control. -*/ -.leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { - left: 22.5px; +.leaflet-left .leaflet-control-pan { + left: -24.5px; } -.leaflet-right.has-leaflet-pan-control .leaflet-control-zoomslider { - right: 22.5px; +.leaflet-right .leaflet-control-pan { + right: -24.5px; } .leaflet-control-pan { @@ -90,18 +78,18 @@ } /****** Touch Alterations ******/ -.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-zoom { +.leaflet-touch .leaflet-left.has-leaflet-pan-control { left: 26px; /* (86-30)/2-2 */ } -.leaflet-touch .leaflet-right.has-leaflet-pan-control .leaflet-control-zoom { +.leaflet-touch .leaflet-right.has-leaflet-pan-control { right: 26px; } -.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { - left: 24px; +.leaflet-touch .leaflet-left .leaflet-control-pan { + left: -26px; } -.leaflet-touch .leaflet-right.has-leaflet-pan-control .leaflet-control-zoomslider { - right: 24px; +.leaflet-touch .leaflet-right .leaflet-control-pan { + right: -26px; } .leaflet-touch .leaflet-control-pan { From 718faa3d4731c6091e0339041d9c2070acdf75d7 Mon Sep 17 00:00:00 2001 From: johndoe Date: Sat, 23 Mar 2019 17:29:46 +0200 Subject: [PATCH 5/6] bump TODO.md (all done!) --- TODO.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TODO.md b/TODO.md index 19ae5ab..d768c95 100644 --- a/TODO.md +++ b/TODO.md @@ -3,5 +3,5 @@ TODO - Styling - Prevent double-clicking prevent from zooming map - Make panning offset configurable - - Do something about the hardcoded support for the zoom- and zoomslider controls. + - Do something about the hardcoded support for the zoom- and zoomslider controls. - Make special CSS's for IE. From c2c9a21e3e2f03663f62af37578eca2fa7a5a821 Mon Sep 17 00:00:00 2001 From: johndoe Date: Mon, 25 Mar 2019 13:37:41 +0200 Subject: [PATCH 6/6] css: consider L.Control.Scale --- src/L.Control.Pan.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/L.Control.Pan.css b/src/L.Control.Pan.css index 071cfbb..be226ac 100644 --- a/src/L.Control.Pan.css +++ b/src/L.Control.Pan.css @@ -5,6 +5,13 @@ right: 24.5px; } +.leaflet-left.has-leaflet-pan-control .leaflet-control-scale { + left: -24.5px; +} +.leaflet-right.has-leaflet-pan-control .leaflet-control-scale { + right: -24.5px; +} + .leaflet-left .leaflet-control-pan { left: -24.5px; } @@ -85,6 +92,13 @@ right: 26px; } +.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-scale { + left: -26px; +} +.leaflet-touch .leaflet-right.has-leaflet-pan-control .leaflet-control-scale { + right: -26px; +} + .leaflet-touch .leaflet-left .leaflet-control-pan { left: -26px; }