Permalink
Browse files

The slider is now draggable.

  • Loading branch information...
1 parent 14978d3 commit 9214d55cd6982eb9cbda3d9eb2eb6b6bc1eff2e2 Mattias Bengtsson committed Mar 12, 2012
Showing with 73 additions and 12 deletions.
  1. +4 −4 TODO.md
  2. +6 −5 src/L.Control.Zoomslider.css
  3. +63 −3 src/L.Control.Zoomslider.js
  4. BIN src/images/zoom-slider.png
View
@@ -1,8 +1,8 @@
TODO
====
- - Make knob change position on zoom.
- - Make knob draggable
- - divide the slider into zoom-level amount of regions
- - snap the knob to each 'border'
+ - <del>Make knob draggable</del>
+ - <del>divide the slider into zoom-level amount of regions</del>
+ - <del>snap the knob to each 'border'</del>
+ - Move knob when changing zoom-level
- Change zoom-level when dragging knob
- Celebrate with beer.
@@ -58,9 +58,6 @@
width: 100%;
}
-.leaflet-control-zoomslider-slider-wrap:hover {
- cursor: pointer;
-}
.leaflet-control-zoomslider-out {
background-image: url(images/zoom-out.png);
@@ -77,13 +74,17 @@
}
.leaflet-control-zoomslider-slider-knob {
- width: 12px;
+ width: 13px;
height:5px;
background-color: black;
-
+ background-position: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: auto;
border: 5px;
+ position:relative;
}
+.leaflet-control-zoomslider-slider-knob:hover {
+ cursor: pointer;
+}
@@ -5,7 +5,7 @@ L.Control.Zoomslider = L.Control.extend({
onAdd: function (map) {
var className = 'leaflet-control-zoomslider',
- container = L.DomUtil.create('div', className);
+ container = L.DomUtil.create('div', className);
this._createButton('Zoom in', className + '-in', container, map.zoomIn, map);
this._createSlider(className + '-slider', container, map);
@@ -18,6 +18,19 @@ L.Control.Zoomslider = L.Control.extend({
var wrapper = L.DomUtil.create('div', className + '-wrap', container);
var slider = L.DomUtil.create('div', className, wrapper);
var knob = L.DomUtil.create('div', className + '-knob', slider);
+
+ this._bbox = {
+ x: 0
+ , y: 0
+ , width: 0
+ , height: 145
+ };
+ this._sliderHeight = this._bbox.height;
+ this._zoomLevels = map.options.maxZoom;
+ this._zoomStep = this._bbox.height / this._zoomLevels;
+ this._makeDraggable(knob);
+ this._knob = knob;
+
return slider;
},
@@ -30,9 +43,56 @@ L.Control.Zoomslider = L.Control.extend({
.addListener(link, 'click', L.DomEvent.stopPropagation)
.addListener(link, 'click', L.DomEvent.preventDefault)
.addListener(link, 'click', fn, context);
-
+
return link;
- }
+ },
+
+ _makeDraggable: function(knob, bbox) {
+ if (!this._draggable) {
+ L.DomUtil.setPosition(knob, new L.Point(0, 0));
+ L.DomEvent.addListener(knob, L.Draggable.START, L.DomEvent.stopPropagation);
+
+ this._draggable = new L.Draggable(knob, knob)
+ .on('predrag', this._onPreDrag, this)
+ .on('dragend', this._onDragEnd, this);
+ }
+ this._draggable.enable();
+ },
+
+ _onPreDrag: function() {
+ this._adjustPointInsideBbox(this._draggable._newPos, this._bbox);
+ this._snap();
+ },
+ _onDragEnd: function() {
+ this._snap();
+ },
+
+ _adjustPointInsideBbox: function(point, bbox) {
+ var newPoint = new L.Point(
+ Math.min(point.x, bbox.x+bbox.width),
+ Math.min(point.y, bbox.y+bbox.height));
+ point.x = Math.max(newPoint.x, bbox.x);
+ point.y = Math.max(newPoint.y, bbox.y);
+ return newPoint;
+ },
+
+ _posToZoomlevel: function() {
+ var pos = this._draggable._newPos.y,
+ level = Math.round(pos/this._zoomStep);
+ return level;
+ },
+
+ _snapToZoomLevel: function(zoomLevel) {
+ this._draggable._newPos.y = zoomLevel * this._zoomStep;
+ L.DomUtil.setPosition(this._knob, this._draggable._newPos);
+ },
+ _snap : function(){
+ this._snapToZoomLevel(this._posToZoomlevel());
+ },
+
+ // label: function() {
+ // }
+
});
L.Map.mergeOptions({
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9214d55

Please sign in to comment.