vendor/assets/leaflet/leaflet.zoom.js

   1 L.Control.Zoomslider = L.Control.extend({\r
   2         options: {\r
   3                 position: 'topleft',\r
   4                 // height in px of zoom-slider.png\r
   5                 stepHeight: 9\r
   6         },\r
   7 \r
   8         onAdd: function (map) {\r
   9                 var className = 'leaflet-control-zoomslider',\r
  10                         container = L.DomUtil.create('div', className);\r
  11                 \r
  12         this._map = map;\r
  13 \r
  14                 this._createButton('Zoom in', className + '-in'\r
  15                                                    , container, this._zoomIn , this);\r
  16                 this._createSlider(className + '-slider', container, map);\r
  17                 this._createButton('Zoom out', className + '-out'\r
  18                                                    , container, this._zoomOut, this);\r
  19 \r
  20                 \r
  21                 \r
  22                 this._map.on('zoomend', this._snapToSliderValue, this);\r
  23 \r
  24                 this._snapToSliderValue();\r
  25                 return container;\r
  26         },\r
  27 \r
  28         onRemove: function(map){\r
  29                 map.off('zoomend', this._snapToSliderValue);\r
  30         },\r
  31         \r
  32         _createSlider: function (className, container, map) {\r
  33                 var zoomLevels = map.getMaxZoom() - map.getMinZoom();\r
  34                 this._sliderHeight = this.options.stepHeight * zoomLevels;\r
  35 \r
  36                 var wrapper =  L.DomUtil.create('div', className + '-wrap', container);\r
  37                 wrapper.style.height = (this._sliderHeight + 5) + "px";\r
  38                 var slider = L.DomUtil.create('div', className, wrapper);\r
  39                 this._knob = L.DomUtil.create('div', className + '-knob', slider);\r
  40 \r
  41                 this._draggable = this._createDraggable();\r
  42                 this._draggable.enable();\r
  43                 \r
  44                 L.DomEvent\r
  45                         .on(slider, 'click', L.DomEvent.stopPropagation)\r
  46                         .on(slider, 'click', L.DomEvent.preventDefault)\r
  47                         .on(slider, 'click', this._onSliderClick, this);\r
  48 \r
  49                 return slider;\r
  50         },\r
  51 \r
  52         _zoomIn: function (e) {\r
  53             this._map.zoomIn(e.shiftKey ? 3 : 1);\r
  54         },\r
  55 \r
  56         _zoomOut: function (e) {\r
  57             this._map.zoomOut(e.shiftKey ? 3 : 1);\r
  58         },\r
  59 \r
  60         _createButton: function (title, className, container, fn, context) {\r
  61                 var link = L.DomUtil.create('a', className, container);\r
  62                 link.href = '#';\r
  63                 link.title = title;\r
  64 \r
  65                 L.DomEvent\r
  66                         .on(link, 'click', L.DomEvent.stopPropagation)\r
  67                         .on(link, 'click', L.DomEvent.preventDefault)\r
  68                         .on(link, 'click', fn, context);\r
  69                 \r
  70                 return link;\r
  71         },\r
  72 \r
  73         _createDraggable: function() {\r
  74                 L.DomUtil.setPosition(this._knob, new L.Point(0, 0));\r
  75                 L.DomEvent\r
  76                         .on(this._knob\r
  77                                 , L.Draggable.START\r
  78                                 , L.DomEvent.stopPropagation)\r
  79                         .on(this._knob, 'click', L.DomEvent.stopPropagation);\r
  80 \r
  81                 var bounds = new L.Bounds(\r
  82                         new L.Point(0, 0), \r
  83                         new L.Point(0, this._sliderHeight)\r
  84                 );\r
  85                 var draggable = new L.BoundedDraggable(this._knob, \r
  86                                                                                            this._knob, \r
  87                                                                                            bounds)\r
  88                         .on('drag', this._snap, this)\r
  89                         .on('dragend', this._setZoom, this);\r
  90                 \r
  91                 return draggable;\r
  92         },\r
  93 \r
  94         _snap : function(){\r
  95                 this._snapToSliderValue(this._posToSliderValue());\r
  96         },\r
  97         _setZoom: function() {\r
  98                 this._map.setZoom(this._toZoomLevel(this._posToSliderValue()));\r
  99         },\r
 100 \r
 101         _onSliderClick: function(e){\r
 102                 var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);\r
 103             var offset = first.offsetY \r
 104                         ? first.offsetY\r
 105                         : L.DomEvent.getMousePosition(first).y \r
 106                         - L.DomUtil.getViewportOffset(this._knob).y;\r
 107                 var value = this._posToSliderValue(offset - this._knob.offsetHeight / 2);\r
 108                 this._snapToSliderValue(value);\r
 109                 this._map.setZoom(this._toZoomLevel(value));\r
 110         },\r
 111 \r
 112         _posToSliderValue: function(pos) {\r
 113                 pos = isNaN(pos) \r
 114                         ? L.DomUtil.getPosition(this._knob).y\r
 115                         : pos\r
 116                 return Math.round( (this._sliderHeight - pos) / this.options.stepHeight);\r
 117         },\r
 118 \r
 119         _snapToSliderValue: function(sliderValue) {\r
 120                 if(this._knob) {\r
 121                         sliderValue = isNaN(sliderValue) \r
 122                                 ? this._getSliderValue()\r
 123                                 : sliderValue;\r
 124                         var y = this._sliderHeight \r
 125                                 - (sliderValue * this.options.stepHeight);\r
 126                         L.DomUtil.setPosition(this._knob, new L.Point(0, y));\r
 127                 }\r
 128         },\r
 129         _toZoomLevel: function(sliderValue) {\r
 130                 return sliderValue + this._map.getMinZoom();\r
 131         },\r
 132         _toSliderValue: function(zoomLevel) {\r
 133                 return zoomLevel - this._map.getMinZoom();\r
 134         },\r
 135         _getSliderValue: function(){\r
 136                 return this._toSliderValue(this._map.getZoom());\r
 137         }\r
 138 });\r
 139 \r
 140 L.Map.mergeOptions({\r
 141     zoomControl: false,\r
 142     zoomsliderControl: true\r
 143 });\r
 144 \r
 145 L.Map.addInitHook(function () {\r
 146     if (this.options.zoomsliderControl) {\r
 147                 this.zoomsliderControl = new L.Control.Zoomslider();\r
 148                 this.addControl(this.zoomsliderControl);\r
 149         }\r
 150 });\r
 151 \r
 152 L.control.zoomslider = function (options) {\r
 153     return new L.Control.Zoomslider(options);\r
 154 };\r
 155 \r
 156 \r
 157 L.BoundedDraggable = L.Draggable.extend({\r
 158         initialize: function(element, dragStartTarget, bounds) {\r
 159                 L.Draggable.prototype.initialize.call(this, element, dragStartTarget);\r
 160                 this._bounds = bounds;\r
 161                 this.on('predrag', function() {\r
 162                         if(!this._bounds.contains(this._newPos)){\r
 163                                 this._newPos = this._fitPoint(this._newPos);\r
 164                         }\r
 165                 }, this);\r
 166         }, \r
 167         _fitPoint: function(point){\r
 168                 var closest = new L.Point(\r
 169                         Math.min(point.x, this._bounds.max.x),\r
 170                         Math.min(point.y, this._bounds.max.y)\r
 171                 );\r
 172                 closest.x = Math.max(closest.x, this._bounds.min.x);\r
 173                 closest.y = Math.max(closest.y, this._bounds.min.y);\r
 174                 return closest;\r
 175         }\r
 176 });\r