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

new slideRatio option for Control.Pan and Control.PanPanel. r=bartvde (closes #3039)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11070 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-02-02 15:00:57 +00:00
parent 5d92c646b6
commit 198b3a9c7f
3 changed files with 79 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lib/OpenLayers/Control/Pan.js
View File

@@ -20,10 +20,20 @@ OpenLayers.Control.Pan = 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, defaults to 50.
* on clicking the arrow buttons, defaults to 50. 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 Pan Up will
* pan up half the map height.
*/
slideRatio: null,
/**
* Property: direction
* {String} in {'North', 'South', 'East', 'West'}
@@ -61,18 +71,24 @@ OpenLayers.Control.Pan = OpenLayers.Class(OpenLayers.Control, {
*/
trigger: function(){
var getSlideFactor = OpenLayers.Function.bind(function (dim) {
return this.slideRatio ?
this.map.getSize()[dim] * this.slideRatio :
this.slideFactor;
}, this);
switch (this.direction) {
case OpenLayers.Control.Pan.NORTH:
this.map.pan(0, -this.slideFactor);
this.map.pan(0, -getSlideFactor("h"));
break;
case OpenLayers.Control.Pan.SOUTH:
this.map.pan(0, this.slideFactor);
this.map.pan(0, getSlideFactor("h"));
break;
case OpenLayers.Control.Pan.WEST:
this.map.pan(-this.slideFactor, 0);
this.map.pan(-getSlideFactor("w"), 0);
break;
case OpenLayers.Control.Pan.EAST:
this.map.pan(this.slideFactor, 0);
this.map.pan(getSlideFactor("w"), 0);
break;
}
},

28
lib/OpenLayers/Control/PanPanel.js
View File

@@ -33,10 +33,20 @@ OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
/**
* APIProperty: slideFactor
* {Integer} Number of pixels by which we'll pan the map in any direction
* on clicking the arrow buttons, defaults to 50.
* on clicking the arrow buttons, defaults to 50. 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 Pan Up will
* pan up half the map height.
*/
slideRatio: null,
/**
* Constructor: OpenLayers.Control.PanPanel
* Add the four directional pan buttons.
@@ -47,15 +57,15 @@ OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
*/
initialize: function(options) {
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
var options = {
slideFactor: this.slideFactor,
slideRatio: this.slideRatio
};
this.addControls([
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH,
{slideFactor: this.slideFactor}),
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH,
{slideFactor: this.slideFactor}),
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST,
{slideFactor: this.slideFactor}),
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST,
{slideFactor: this.slideFactor})
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH, options),
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH, options),
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST, options),
new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST, options)
]);
},

40
tests/Control/PanPanel.html
View File

@@ -3,7 +3,7 @@
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
function test_constructor (t) {
t.plan(1);
t.plan(2);
// set up
var control;
@@ -15,9 +15,47 @@
control.controls[2].slideFactor == 200 &&
control.controls[3].slideFactor == 200,
"ctor sets slideFactor in all Pan controls");
control.destroy();
control = new OpenLayers.Control.PanPanel({slideRatio: .5});
t.ok(control.controls[0].slideRatio == .5 &&
control.controls[1].slideRatio == .5 &&
control.controls[2].slideRatio == .5 &&
control.controls[3].slideRatio == .5,
"ctor sets slideRatio in all Pan controls");
control.destroy();
}
function test_slide(t) {
t.plan(2);
var map = new OpenLayers.Map("map", {
panMethod: null,
controls: [
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.PanPanel({slideRatio: .5})
],
layers: [new OpenLayers.Layer(null, {isBaseLayer: true})],
center: new OpenLayers.LonLat(0, 0),
zoom: 1
});
map.controls[0].controls[0].trigger();
map.controls[0].controls[2].trigger();
map.pan(-50, 50);
t.eq(map.getCenter().toShortString(), "0, 0", "correct pan distance with slideFactor");
map.controls[1].controls[0].trigger();
map.controls[1].controls[2].trigger();
map.pan(-128, 64);
t.eq(map.getCenter().toShortString(), "0, 0", "correct pan distance with slideRatio");
map.destroy();
}
</script>
</head>
<body>
<div id="map" style="width: 256px; height: 128px;"></div>
</body>
</html>