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

Adding a slideRatio property to the PanZoom control. Setting this will cause the pan buttons to pan the map by a ratio of the map dimensions. A slideRatio of 0.5 will cause pan up to pan by half the map height. Thanks for the patch and tests sbenthall. r=me (closes #1998)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9129 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2009-03-24 20:27:51 +00:00
parent 273c7ab5d2
commit 807706219b
2 changed files with 79 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,10 +21,20 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
/**
* APIProperty: slideFactor
* {Integer} Number of pixels by which we'll pan the map in any direction
* on clicking the arrow buttons.
* on clicking the arrow buttons. If you want to pan by some ratio
* of the map dimensions, use <slideRatio> instead.
*/
slideFactor: 50,
/**
* APIProperty: slideRatio
* {Number} The fraction of map width/height by which we'll pan the map
* on clicking the arrow buttons. Default is null. If set, will
* override <slideFactor>. E.g. if slideRatio is .5, then the Pan Up
* button will pan up half the map height.
*/
slideRatio: null,
/**
* Property: buttons
* {Array(DOMElement)} Array of Button Divs
@@ -124,7 +134,20 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
btn.action = id;
btn.map = this.map;
btn.slideFactor = this.slideFactor;
if(!this.slideRatio){
var slideFactorPixels = this.slideFactor;
var getSlideFactor = function() {
return slideFactorPixels;
};
} else {
var slideRatio = this.slideRatio;
var getSlideFactor = function(dim) {
return this.map.getSize()[dim] * slideRatio;
};
}
btn.getSlideFactor = getSlideFactor;
//we want to remember/reference the outer div
this.buttons.push(btn);
@@ -180,16 +203,16 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
switch (this.action) {
case "panup":
this.map.pan(0, -this.slideFactor);
this.map.pan(0, -this.getSlideFactor("h"));
break;
case "pandown":
this.map.pan(0, this.slideFactor);
this.map.pan(0, this.getSlideFactor("h"));
break;
case "panleft":
this.map.pan(-this.slideFactor, 0);
this.map.pan(-this.getSlideFactor("w"), 0);
break;
case "panright":
this.map.pan(this.slideFactor, 0);
this.map.pan(this.getSlideFactor("w"), 0);
break;
case "zoomin":
this.map.zoomIn();

50
tests/Control/PanZoom.html
View File

@@ -138,6 +138,56 @@
}
}
function test_slideRatio(t) {
t.plan(4);
var control = new OpenLayers.Control.PanZoom({
slideRatio: .5
});
var map = new OpenLayers.Map();
map.addControl(control);
control.draw();
control.activate();
map.getSize = function() {
return {
w: 250,
h: 100
}
};
var delta, dir;
var evt = {which: 1}; // a fake left click
var buttons = control.buttons;
map.pan = function(dx, dy){
t.eq([dx,dy],delta,"Panning " + dir + " sets right delta with slideRatio");
};
//up
var delta = [0, -50];
var dir = "up";
control.buttonDown.call(buttons[0], evt);
//left
var delta = [-125, 0];
var dir = "left";
control.buttonDown.call(buttons[1], evt);
//right
var delta = [125, 0];
var dir = "right";
control.buttonDown.call(buttons[2], evt);
//down
var delta = [0, 50];
var dir = "down";
control.buttonDown.call(buttons[3], evt);
map.destroy();
}
function simulateClick(wnd, elem) {
var evt = wnd.document.createEvent("MouseEvents");
evt.initMouseEvent("mousedown", true, true, wnd, 0, 0, 0, 0, 0, false, false, false, false, 0, null);