--- /dev/null
+L.Control.Zoomslider = L.Control.extend({\r
+ options: {\r
+ position: 'topleft',\r
+ // height in px of zoom-slider.png\r
+ stepHeight: 9\r
+ },\r
+\r
+ onAdd: function (map) {\r
+ var className = 'leaflet-control-zoomslider',\r
+ container = L.DomUtil.create('div', className);\r
+ \r
+ this._map = map;\r
+\r
+ 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
+ \r
+ \r
+ this._map.on('zoomend', this._snapToSliderValue, this);\r
+\r
+ this._snapToSliderValue();\r
+ return container;\r
+ },\r
+\r
+ onRemove: function(map){\r
+ map.off('zoomend', this._snapToSliderValue);\r
+ },\r
+ \r
+ _createSlider: function (className, container, map) {\r
+ var zoomLevels = map.getMaxZoom() - map.getMinZoom();\r
+ this._sliderHeight = this.options.stepHeight * zoomLevels;\r
+\r
+ var wrapper = L.DomUtil.create('div', className + '-wrap', container);\r
+ wrapper.style.height = (this._sliderHeight + 5) + "px";\r
+ var slider = L.DomUtil.create('div', className, wrapper);\r
+ this._knob = L.DomUtil.create('div', className + '-knob', slider);\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
+ return slider;\r
+ },\r
+\r
+ _zoomIn: function (e) {\r
+ this._map.zoomIn(e.shiftKey ? 3 : 1);\r
+ },\r
+\r
+ _zoomOut: function (e) {\r
+ this._map.zoomOut(e.shiftKey ? 3 : 1);\r
+ },\r
+\r
+ _createButton: function (title, className, container, fn, context) {\r
+ var link = L.DomUtil.create('a', className, container);\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
+ return link;\r
+ },\r
+\r
+ _createDraggable: function() {\r
+ L.DomUtil.setPosition(this._knob, new L.Point(0, 0));\r
+ L.DomEvent\r
+ .on(this._knob\r
+ , L.Draggable.START\r
+ , L.DomEvent.stopPropagation)\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, this._sliderHeight)\r
+ );\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
+ return draggable;\r
+ },\r
+\r
+ _snap : function(){\r
+ this._snapToSliderValue(this._posToSliderValue());\r
+ },\r
+ _setZoom: function() {\r
+ this._map.setZoom(this._toZoomLevel(this._posToSliderValue()));\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
+ ? first.offsetY\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
+ this._map.setZoom(this._toZoomLevel(value));\r
+ },\r
+\r
+ _posToSliderValue: function(pos) {\r
+ pos = isNaN(pos) \r
+ ? L.DomUtil.getPosition(this._knob).y\r
+ : pos\r
+ return Math.round( (this._sliderHeight - pos) / this.options.stepHeight);\r
+ },\r
+\r
+ _snapToSliderValue: function(sliderValue) {\r
+ if(this._knob) {\r
+ sliderValue = isNaN(sliderValue) \r
+ ? this._getSliderValue()\r
+ : sliderValue;\r
+ var y = this._sliderHeight \r
+ - (sliderValue * this.options.stepHeight);\r
+ L.DomUtil.setPosition(this._knob, new L.Point(0, y));\r
+ }\r
+ },\r
+ _toZoomLevel: function(sliderValue) {\r
+ return sliderValue + this._map.getMinZoom();\r
+ },\r
+ _toSliderValue: function(zoomLevel) {\r
+ return zoomLevel - this._map.getMinZoom();\r
+ },\r
+ _getSliderValue: function(){\r
+ return this._toSliderValue(this._map.getZoom());\r
+ }\r
+});\r
+\r
+L.Map.mergeOptions({\r
+ zoomControl: false,\r
+ zoomsliderControl: true\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
+ }\r
+});\r
+\r
+L.control.zoomslider = function (options) {\r
+ return new L.Control.Zoomslider(options);\r
+};\r
+\r
+\r
+L.BoundedDraggable = L.Draggable.extend({\r
+ initialize: function(element, dragStartTarget, bounds) {\r
+ L.Draggable.prototype.initialize.call(this, element, dragStartTarget);\r
+ this._bounds = bounds;\r
+ this.on('predrag', function() {\r
+ if(!this._bounds.contains(this._newPos)){\r
+ this._newPos = this._fitPoint(this._newPos);\r
+ }\r
+ }, this);\r
+ }, \r
+ _fitPoint: function(point){\r
+ var closest = new L.Point(\r
+ Math.min(point.x, this._bounds.max.x),\r
+ Math.min(point.y, this._bounds.max.y)\r
+ );\r
+ closest.x = Math.max(closest.x, this._bounds.min.x);\r
+ closest.y = Math.max(closest.y, this._bounds.min.y);\r
+ return closest;\r
+ }\r
+});\r
projects / rails.git / blobdiff