diff --git a/img/slider.png b/img/slider.png new file mode 100644 index 0000000000..ffaecc84c1 Binary files /dev/null and b/img/slider.png differ diff --git a/img/zoombar.png b/img/zoombar.png new file mode 100644 index 0000000000..a1516b06b7 Binary files /dev/null and b/img/zoombar.png differ diff --git a/lib/OpenLayers/Control/PanZoom.js b/lib/OpenLayers/Control/PanZoom.js index 9566e019a6..ca58ed9485 100644 --- a/lib/OpenLayers/Control/PanZoom.js +++ b/lib/OpenLayers/Control/PanZoom.js @@ -31,15 +31,74 @@ OpenLayers.Control.PanZoom.prototype = this._addButton("panright", "east-mini.png", xy.addX(sz.w), sz); this._addButton("pandown", "south-mini.png", centered.addY(sz.h*2), sz); this._addButton("zoomin", "zoom-plus-mini.png", centered.addY(sz.h*3), sz); - centered = centered.addY(sz.h*3); - for (var i=this.map.getZoomLevels(); i--; i>=0) { - centered = centered.addY(sz.h); - this._addButton("zoomLevel"+i, "zoom-world-mini.png", centered, sz); - } - this._addButton("zoomout", "zoom-minus-mini.png", centered.addY(sz.h), sz); + centered = centered.addY(sz.h*4); + centered = this._addZoomBar(centered,sz.copyOf()); + this._addButton("zoomout", "zoom-minus-mini.png", centered, sz); return this.div; }, - + _addZoomBar:function(centered,sz) { + var zoomStopSize = 15; + var slider = OpenLayers.Util.createImage("img/slider.png", + new OpenLayers.Pixel(22,9), + centered.addY((this.map.getZoomLevels())*zoomStopSize), "absolute", + "OpenLayers_Control_PanZoom_Slider"); + sz.h = zoomStopSize*(this.map.getZoomLevels()+1); + sz.w = 17; + var div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoom_Zoombar',centered,sz); + div.style.backgroundImage = "url(img/zoombar.png)"; + div.onmousedown = this.doubleClick.bindAsEventListener(div); + div.onmousemove = this.zoomBarDivDrag.bindAsEventListener(div); + div.ondblclick = this.doubleClick.bindAsEventListener(div); + div.slider = slider; + this.div.appendChild(div); + slider.startTop = div.style.top; + slider.getMousePosition = this.getMousePosition; + slider.onmousedown = this.zoomBarDown.bindAsEventListener(slider); + slider.onmousemove = this.zoomBarDrag.bindAsEventListener(slider); + slider.onmouseup = this.zoomBarUp.bindAsEventListener(slider); + slider.ondblclick = this.doubleClick.bindAsEventListener(slider); + slider.div = this.div; + slider.map = this.map; + slider.zIndex = this.div.zIndex + 5; + this.div.appendChild(slider); + this.buttons.append(slider); + centered = centered.addY(zoomStopSize*(this.map.getZoomLevels()+1)); + return centered; + }, + getMousePosition: function (evt) { + var offsets = Position.page(this.div); + return new OpenLayers.Pixel( + evt.clientX - offsets[0], + evt.clientY - offsets[1]); + }, + zoomBarDown:function(evt) { + evt.xy = this.getMousePosition(evt); + this.mouseDragStart = evt.xy.copyOf(); + this.zoomStart = evt.xy.copyOf(); + this.div.style.cursor = "move"; + Event.stop(evt); + }, + zoomBarDivDrag: function(evt) { + this.slider.onmousemove(evt); + }, + zoomBarDrag:function(evt) { + if (this.mouseDragStart != null) { + evt.xy = this.getMousePosition(evt); + var deltaY = this.mouseDragStart.y - evt.xy.y + this.style.top = (parseInt(this.style.top)-deltaY)+"px"; + this.mouseDragStart = evt.xy.copyOf(); + } + }, + zoomBarUp:function(evt) { + evt.xy = this.getMousePosition(evt); + var deltaY = this.zoomStart.y - evt.xy.y + this.map.zoomTo(this.map.zoom + Math.round(deltaY/15)); + this.style.top = (this.map.getZoomLevels() - this.map.getZoom())*15+ + parseInt(document.getElementById("OpenLayers_Control_PanZoom_Zoombar").style.top) + 3; + this.div.style.cursor="default"; + this.mouseDragStart = null; + Event.stop(evt); + }, _addButton:function(id, img, xy, sz) { var imgLocation = OpenLayers.Util.getImagesLocation() + img; // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz); @@ -65,13 +124,7 @@ OpenLayers.Control.PanZoom.prototype = }, buttonDown: function (evt) { - if (this.action.startsWith("zoomLevel")) { - this.map.zoomTo(parseInt(this.action.substr(9,this.action.length))); - } switch (this.action) { - case "zoomLevel0": - this.map.zoomExtent(); - break; case "panup": var resolution = this.map.getResolution(); var center = this.map.getCenter();