ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Convert zoom levels to be a slider. Graphics need much improvement, and the code also needs a good twice over, but it works.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@27 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2006-05-13 14:13:32 +00:00
parent 89d7a7d852
commit 8dc75d0d7c
3 changed files with 66 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
lib/OpenLayers/Control/PanZoom.js
View File

@@ -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();