Use ol.control.CenterConstraint

src/ol/base/createmap.js

@@ -6,6 +6,7 @@ goog.require('ol.Collection');
 goog.require('ol.Map');
 goog.require('ol.MapProperty');
 goog.require('ol.Projection');
+goog.require('ol.control.CenterConstraint');
 goog.require('ol.control.DblClickZoom');
 goog.require('ol.control.DragPan');
 goog.require('ol.control.KeyboardPan');
@@ -76,6 +77,8 @@ ol.createMap = function(target, opt_values, opt_rendererHints) {
     goog.object.extend(values, opt_values);
   }
 
+  var panFunction = ol.control.CenterConstraint.snapToPixel;
+
   // FIXME this should be a configuration option
   var zoomFunction = ol.control.ZoomFunction.createSnapToPower(
       2, ol.Projection.EPSG_3857_HALF_SIZE / 128);
@@ -83,8 +86,8 @@ ol.createMap = function(target, opt_values, opt_rendererHints) {
   if (!goog.object.containsKey(values, ol.MapProperty.CONTROLS)) {
     var controls = new ol.Collection();
     controls.push(new ol.control.DblClickZoom(zoomFunction));
-    controls.push(new ol.control.DragPan());
+    controls.push(new ol.control.DragPan(panFunction));
-    controls.push(new ol.control.KeyboardPan());
+    controls.push(new ol.control.KeyboardPan(panFunction));
     controls.push(new ol.control.KeyboardZoom(zoomFunction));
     controls.push(new ol.control.MouseWheelZoom(zoomFunction));
     controls.push(new ol.control.ShiftDragRotateAndZoom(zoomFunction));

src/ol/control/dragpan.js

@@ -4,6 +4,8 @@ goog.provide('ol.control.DragPan');
 
 goog.require('ol.Coordinate');
 goog.require('ol.MapBrowserEvent');
+goog.require('ol.control.CenterConstraint');
+goog.require('ol.control.CenterConstraintType');
 goog.require('ol.control.Drag');
 
 
@@ -11,9 +13,20 @@ goog.require('ol.control.Drag');
 /**
  * @constructor
  * @extends {ol.control.Drag}
+ * @param {ol.control.CenterConstraintType=} opt_centerConstraint
+ *     Center constraint.
  */
-ol.control.DragPan = function() {
+ol.control.DragPan = function(opt_centerConstraint) {
+
   goog.base(this);
+
+  /**
+   * @private
+   * @type {ol.control.CenterConstraintType|undefined}
+   */
+  this.centerConstraint_ =
+      opt_centerConstraint || ol.control.CenterConstraint.none;
+
 };
 goog.inherits(ol.control.DragPan, ol.control.Drag);
 
@@ -24,9 +37,9 @@ goog.inherits(ol.control.DragPan, ol.control.Drag);
 ol.control.DragPan.prototype.handleDrag = function(mapBrowserEvent) {
   var map = mapBrowserEvent.map;
   var resolution = map.getResolution();
-  var center = new ol.Coordinate(
+  var delta =
-      this.startCenter.x - resolution * this.deltaX,
+      new ol.Coordinate(-resolution * this.deltaX, resolution * this.deltaY);
-      this.startCenter.y + resolution * this.deltaY);
+  var center = this.centerConstraint_(this.startCenter, resolution, delta);
   map.setCenter(center);
 };
 

src/ol/control/keyboardpan.js

@@ -3,15 +3,28 @@ goog.provide('ol.control.KeyboardPan');
 goog.require('goog.events.KeyCodes');
 goog.require('goog.events.KeyHandler.EventType');
 goog.require('ol.Control');
+goog.require('ol.control.CenterConstraint');
+goog.require('ol.control.CenterConstraintType');
 
 
 
 /**
  * @constructor
  * @extends {ol.Control}
+ * @param {ol.control.CenterConstraintType=} opt_centerConstraint
+ *     Center constraint.
  */
-ol.control.KeyboardPan = function() {
+ol.control.KeyboardPan = function(opt_centerConstraint) {
+
   goog.base(this);
+
+  /**
+   * @private
+   * @type {ol.control.CenterConstraintType}
+   */
+  this.centerConstraint_ = opt_centerConstraint ||
+      ol.control.CenterConstraint.none;
+
 };
 goog.inherits(ol.control.KeyboardPan, ol.Control);
 
@@ -31,16 +44,19 @@ ol.control.KeyboardPan.prototype.handleMapBrowserEvent =
         keyCode == goog.events.KeyCodes.UP) {
       var map = mapBrowserEvent.map;
       var center = map.getCenter().clone();
-      var delta = 16 * map.getResolution();
+      var resolution = map.getResolution();
+      var delta;
       if (keyCode == goog.events.KeyCodes.DOWN) {
-        center.y -= delta;
+        delta = new ol.Coordinate(0, -16 * resolution);
       } else if (keyCode == goog.events.KeyCodes.LEFT) {
-        center.x -= delta;
+        delta = new ol.Coordinate(-16 * resolution, 0);
       } else if (keyCode == goog.events.KeyCodes.RIGHT) {
-        center.x += delta;
+        delta = new ol.Coordinate(16 * resolution, 0);
-      } else if (keyCode == goog.events.KeyCodes.UP) {
+      } else {
-        center.y += delta;
+        goog.asserts.assert(keyCode == goog.events.KeyCodes.UP);
+        delta = new ol.Coordinate(0, 16 * resolution);
       }
+      center = this.centerConstraint_(center, resolution, delta);
       map.setCenter(center);
       keyEvent.preventDefault();
       mapBrowserEvent.preventDefault();