[OpenLayers-Commits] r11070 - in trunk/openlayers:
lib/OpenLayers/Control tests/Control
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Feb 2 10:00:57 EST 2011
Author: ahocevar
Date: 2011-02-02 07:00:57 -0800 (Wed, 02 Feb 2011)
New Revision: 11070
Modified:
trunk/openlayers/lib/OpenLayers/Control/Pan.js
trunk/openlayers/lib/OpenLayers/Control/PanPanel.js
trunk/openlayers/tests/Control/PanPanel.html
Log:
new slideRatio option for Control.Pan and Control.PanPanel. r=bartvde (closes #3039)
Modified: trunk/openlayers/lib/OpenLayers/Control/Pan.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Control/Pan.js 2011-02-01 20:38:46 UTC (rev 11069)
+++ trunk/openlayers/lib/OpenLayers/Control/Pan.js 2011-02-02 15:00:57 UTC (rev 11070)
@@ -20,11 +20,21 @@
/**
* 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 @@
*/
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;
}
},
Modified: trunk/openlayers/lib/OpenLayers/Control/PanPanel.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Control/PanPanel.js 2011-02-01 20:38:46 UTC (rev 11069)
+++ trunk/openlayers/lib/OpenLayers/Control/PanPanel.js 2011-02-02 15:00:57 UTC (rev 11070)
@@ -33,10 +33,20 @@
/**
* 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 @@
*/
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)
]);
},
Modified: trunk/openlayers/tests/Control/PanPanel.html
===================================================================
--- trunk/openlayers/tests/Control/PanPanel.html 2011-02-01 20:38:46 UTC (rev 11069)
+++ trunk/openlayers/tests/Control/PanPanel.html 2011-02-02 15:00:57 UTC (rev 11070)
@@ -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>
More information about the Commits
mailing list