new zoom control look, various style fixes and cleanup
This commit is contained in:
Vladimir Agafonkin
parent
e4ec9a8967
commit
2fadc94ec3
10
CHANGELOG.md
10
CHANGELOG.md
@ -13,13 +13,15 @@ An in-progress version being developed on the master branch.
|
||||
|
||||
* Added touch zoom, pan and double tap support for **IE10 touch devices and Metro apps** (by [@danzel](https://github.com/danzel) and [@veproza](https://github.com/veproza) with help from [@oliverheilig](https://github.com/oliverheilig)). [#1076](https://github.com/CloudMade/Leaflet/pull/1076) [#871](https://github.com/CloudMade/Leaflet/issues/871)
|
||||
* **Improved panning inertia** to be much more natural and smooth.
|
||||
* Improved panning animation performance in IE6-8.
|
||||
* Improved zoom animation curve for a better feel overall.
|
||||
* Improved **zoom control design** to look better, be more design-neutral and in line with other controls, making it easier to fit different website designs. Replaced +/- images with text.
|
||||
* Improved **dragging cursors** in Chrome, Safari and Firefox (now grabbing hand cursors are used).
|
||||
* Improved zoom control to zoom by 3 levels if you hold shift while clicking on a button.
|
||||
* Improved dragging with grabbing hand cursors in Chrome, Safari and Firefox.
|
||||
* Improved scroll wheel zoom to be more responsive.
|
||||
* Improved zoom animation curve for a better feel overall.
|
||||
* Improved fallback control styles for IE6-8.
|
||||
* Improved panning animation performance in IE6-8.
|
||||
* Improved vectors updating/removing performance on Canvas backend even more (by [@danzel](https://github.com/danzel)). [#961](https://github.com/CloudMade/Leaflet/pull/961)
|
||||
* Cut total images size from 10KB to 3.5KB with [Yahoo Smush.it](http://www.smushit.com/ysmush.it/). Thanks to Peter Rounce for suggestion.
|
||||
* Cut total images size from 10KB to 3.2KB with [Yahoo Smush.it](http://www.smushit.com/ysmush.it/). Thanks to Peter Rounce for suggestion.
|
||||
|
||||
#### API improvements
|
||||
|
||||
|
||||
BIN
dist/images/zoom-in.png
vendored
BIN
dist/images/zoom-in.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 106 B |
BIN
dist/images/zoom-out.png
vendored
BIN
dist/images/zoom-out.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 106 B |
65
dist/leaflet.css
vendored
65
dist/leaflet.css
vendored
@ -190,19 +190,20 @@
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom {
|
||||
-webkit-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.leaflet-control-zoom {
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
margin-left: 13px;
|
||||
margin-top: 12px;
|
||||
box-shadow: 0 0 8px #666;
|
||||
border: 1px solid #777;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-zoom a {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-control-zoom a,
|
||||
.leaflet-control-layers-toggle {
|
||||
@ -212,19 +213,32 @@
|
||||
}
|
||||
.leaflet-control-zoom a:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom a {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
color: #777;
|
||||
}
|
||||
.leaflet-control-zoom-in {
|
||||
background-image: url(images/zoom-in.png);
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid #aaa;
|
||||
font: bold 18px/23px Arial, Helvetica, sans-serif;
|
||||
-webkit-border-radius: 5px 5px 0 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.leaflet-control-zoom-out {
|
||||
background-image: url(images/zoom-out.png);
|
||||
font: bold 25px/20px Tahoma, Verdana, sans-serif;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom-in {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* layers control */
|
||||
|
||||
@ -298,14 +312,13 @@
|
||||
border-top: none;
|
||||
color: black;
|
||||
line-height: 1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 10px;
|
||||
padding-bottom: 2px;
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
padding-top: 1px;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
@ -313,11 +326,14 @@
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers {
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-control-zoom {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers {
|
||||
border: 5px solid #bbb;
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-control-zoom {
|
||||
border: 3px solid #999;
|
||||
}
|
||||
|
||||
|
||||
@ -363,8 +379,7 @@
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
background: white;
|
||||
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.35);
|
||||
-webkit-box-shadow: 0 3px 18px rgba(0,0,0,0.33);
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
|
||||
25
dist/leaflet.ie.css
vendored
25
dist/leaflet.ie.css
vendored
@ -3,11 +3,11 @@
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-control {
|
||||
display: inline;
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
_width: 27px;
|
||||
margin: 0 auto;
|
||||
_margin-top: -3px;
|
||||
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
}
|
||||
@ -25,14 +25,15 @@
|
||||
margin-top: -1px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
border: 1px solid #bbb;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
|
||||
.leaflet-control-zoom,
|
||||
.leaflet-control-layers {
|
||||
border: 3px solid #999;
|
||||
}
|
||||
.leaflet-control-zoom a {
|
||||
background-color: #eee;
|
||||
@ -42,9 +43,15 @@
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
}
|
||||
.leaflet-control-attribution, .leaflet-control-layers {
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-layers,
|
||||
.leaflet-control-scale-line {
|
||||
background: white;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
}
|
||||
.leaflet-control-attribution {
|
||||
border-top: 1px solid #bbb;
|
||||
border-left: 1px solid #bbb;
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@ L.Control.Zoom = L.Control.extend({
|
||||
|
||||
this._map = map;
|
||||
|
||||
this._createButton('Zoom in', className + '-in', container, this._zoomIn, this);
|
||||
this._createButton('Zoom out', className + '-out', container, this._zoomOut, this);
|
||||
this._createButton('+', 'Zoom in', className + '-in', container, this._zoomIn, this);
|
||||
this._createButton('-', 'Zoom out', className + '-out', container, this._zoomOut, this);
|
||||
|
||||
return container;
|
||||
},
|
||||
@ -23,8 +23,9 @@ L.Control.Zoom = L.Control.extend({
|
||||
this._map.zoomOut(e.shiftKey ? 3 : 1);
|
||||
},
|
||||
|
||||
_createButton: function (title, className, container, fn, context) {
|
||||
_createButton: function (html, title, className, container, fn, context) {
|
||||
var link = L.DomUtil.create('a', className, container);
|
||||
link.innerHTML = html;
|
||||
link.href = '#';
|
||||
link.title = title;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user