\r
onAdd: function (map) {\r
var className = 'leaflet-control-zoomslider',\r
- container = L.DomUtil.create('div', className);\r
+ container = L.DomUtil.create('div', className);\r
+\r
+ L.DomEvent\r
+ .on(container, 'click', L.DomEvent.stopPropagation)\r
+ .on(container, 'mousedown', L.DomEvent.stopPropagation)\r
+ .on(container, 'dblclick', L.DomEvent.stopPropagation);\r
\r
- this._map = map;\r
+ this._map = map;\r
\r
- this._createButton('Zoom in', className + '-in'\r
- , container, this._zoomIn , this);\r
+ this._zoomInButton = this._createButton('+', 'Zoom in', className + '-in'\r
+ , container, this._zoomIn , this);\r
this._createSlider(className + '-slider', container, map);\r
- this._createButton('Zoom out', className + '-out'\r
- , container, this._zoomOut, this);\r
-\r
+ this._zoomOutButton = this._createButton('-', 'Zoom out', className + '-out'\r
+ , container, this._zoomOut, this);\r
\r
- \r
- this._map.on('zoomend', this._snapToSliderValue, this);\r
+ map.on('layeradd layerremove', this._refresh, this);\r
+\r
+ map.whenReady(function(){\r
+ this._snapToSliderValue();\r
+ map.on('zoomend', this._snapToSliderValue, this);\r
+ }, this);\r
\r
- this._snapToSliderValue();\r
return container;\r
},\r
\r
onRemove: function(map){\r
map.off('zoomend', this._snapToSliderValue);\r
+ map.off('layeradd layerremove', this._refresh);\r
},\r
- \r
+\r
+ _refresh: function(){\r
+ this._map\r
+ .removeControl(this)\r
+ .addControl(this);\r
+ },\r
+\r
_createSlider: function (className, container, map) {\r
var zoomLevels = map.getMaxZoom() - map.getMinZoom();\r
this._sliderHeight = this.options.stepHeight * zoomLevels;\r
\r
this._draggable = this._createDraggable();\r
this._draggable.enable();\r
- \r
- L.DomEvent\r
- .on(slider, 'click', L.DomEvent.stopPropagation)\r
- .on(slider, 'click', L.DomEvent.preventDefault)\r
- .on(slider, 'click', this._onSliderClick, this);\r
+\r
+ L.DomEvent.on(slider, 'click', this._onSliderClick, this);\r
\r
return slider;\r
},\r
this._map.zoomOut(e.shiftKey ? 3 : 1);\r
},\r
\r
- _createButton: function (title, className, container, fn, context) {\r
+ _createButton: function (html, title, className, container, fn, context) {\r
var link = L.DomUtil.create('a', className, container);\r
+ link.innerHTML = html;\r
link.href = '#';\r
link.title = title;\r
\r
L.DomEvent\r
- .on(link, 'click', L.DomEvent.stopPropagation)\r
- .on(link, 'click', L.DomEvent.preventDefault)\r
- .on(link, 'click', fn, context);\r
- \r
+ .on(link, 'click', L.DomEvent.preventDefault)\r
+ .on(link, 'click', fn, context);\r
+\r
return link;\r
},\r
\r
.on(this._knob, 'click', L.DomEvent.stopPropagation);\r
\r
var bounds = new L.Bounds(\r
- new L.Point(0, 0), \r
+ new L.Point(0, 0),\r
new L.Point(0, this._sliderHeight)\r
);\r
- var draggable = new L.BoundedDraggable(this._knob, \r
- this._knob, \r
+ var draggable = new L.BoundedDraggable(this._knob,\r
+ this._knob,\r
bounds)\r
.on('drag', this._snap, this)\r
.on('dragend', this._setZoom, this);\r
- \r
+\r
return draggable;\r
},\r
\r
\r
_onSliderClick: function(e){\r
var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);\r
- var offset = first.offsetY \r
+ var offset = first.offsetY\r
? first.offsetY\r
- : L.DomEvent.getMousePosition(first).y \r
+ : L.DomEvent.getMousePosition(first).y\r
- L.DomUtil.getViewportOffset(this._knob).y;\r
var value = this._posToSliderValue(offset - this._knob.offsetHeight / 2);\r
this._snapToSliderValue(value);\r
},\r
\r
_posToSliderValue: function(pos) {\r
- pos = isNaN(pos) \r
+ pos = isNaN(pos)\r
? L.DomUtil.getPosition(this._knob).y\r
- : pos\r
+ : pos;\r
return Math.round( (this._sliderHeight - pos) / this.options.stepHeight);\r
},\r
\r
_snapToSliderValue: function(sliderValue) {\r
+ this._updateDisabled();\r
if(this._knob) {\r
- sliderValue = isNaN(sliderValue) \r
+ sliderValue = isNaN(sliderValue)\r
? this._getSliderValue()\r
: sliderValue;\r
- var y = this._sliderHeight \r
+ var y = this._sliderHeight\r
- (sliderValue * this.options.stepHeight);\r
L.DomUtil.setPosition(this._knob, new L.Point(0, y));\r
}\r
},\r
_getSliderValue: function(){\r
return this._toSliderValue(this._map.getZoom());\r
+ },\r
+\r
+ _updateDisabled: function () {\r
+ var map = this._map,\r
+ className = 'leaflet-control-zoomslider-disabled';\r
+\r
+ L.DomUtil.removeClass(this._zoomInButton, className);\r
+ L.DomUtil.removeClass(this._zoomOutButton, className);\r
+\r
+ if (map.getZoom() === map.getMinZoom()) {\r
+ L.DomUtil.addClass(this._zoomOutButton, className);\r
+ }\r
+ if (map.getZoom() === map.getMaxZoom()) {\r
+ L.DomUtil.addClass(this._zoomInButton, className);\r
+ }\r
}\r
});\r
\r
\r
L.Map.addInitHook(function () {\r
if (this.options.zoomsliderControl) {\r
- this.zoomsliderControl = new L.Control.Zoomslider();\r
- this.addControl(this.zoomsliderControl);\r
+ L.control.zoomslider().addTo(this);\r
}\r
});\r
\r
this._newPos = this._fitPoint(this._newPos);\r
}\r
}, this);\r
- }, \r
+ },\r
_fitPoint: function(point){\r
var closest = new L.Point(\r
Math.min(point.x, this._bounds.max.x),\r