Added interactive option to ol.control.OverviewMap

css/ol.css

@@ -239,3 +239,7 @@
 .ol-overviewmap-box {
   border: 2px dotted rgba(0,60,136,0.7);
 }
+
+.ol-overviewmap-interactive .ol-overviewmap-box:hover {
+  cursor: move;
+}

externs/olx.js

@@ -1201,6 +1201,13 @@ olx.control.OverviewMapOptions.prototype.collapseLabel;
  */
 olx.control.OverviewMapOptions.prototype.collapsible;
 
+/**
+ * Whether the control is interactive or not. Default to `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.control.OverviewMapOptions.prototype.interactive;
+
 
 /**
  * Text label to use for the collapsed overviewmap button. Default is `»`.

src/ol/control/overviewmap.js

@@ -42,12 +42,20 @@ ol.control.OverviewMap = function(opt_options) {
   this.collapsible_ = options.collapsible !== undefined ?
       options.collapsible : true;
 
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.interactive_ = options.interactive !== undefined ? options.interactive : false;
+
   if (!this.collapsible_) {
     this.collapsed_ = false;
   }
 
   var className = options.className !== undefined ? options.className : 'ol-overviewmap';
 
+  if (this.interactive_) className += ' ol-overviewmap-interactive';
+
   var tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
 
   var collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
@@ -378,6 +386,42 @@ ol.control.OverviewMap.prototype.updateBox_ = function() {
   var bottomLeft = ol.extent.getBottomLeft(extent);
   var topRight = ol.extent.getTopRight(extent);
 
+  /* Interactive map */
+
+  if (this.interactive_) {
+
+    /* Functions definition */
+
+    var computeDesiredMousePosition = function(mousePosition) {
+      return {
+        clientX: mousePosition.clientX - (box.offsetWidth / 2),
+        clientY: mousePosition.clientY + (box.offsetHeight / 2)
+      };
+    };
+
+    var move = function(event) {
+      var coordinates = ovmap.getEventCoordinate(computeDesiredMousePosition(event));
+
+      overlay.setPosition(coordinates);
+    };
+
+    var endMoving = function(event) {
+      var coordinates = ovmap.getEventCoordinate(event);
+
+      map.getView().setCenter(coordinates);
+
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', endMoving);
+    };
+
+    /* Binding */
+
+    box.addEventListener('mousedown', function() {
+      window.addEventListener('mousemove', move);
+      window.addEventListener('mouseup', endMoving);
+    });
+  }
+
   // set position using bottom left coordinates
   var rotateBottomLeft = this.calculateCoordinateRotate_(rotation, bottomLeft);
   overlay.setPosition(rotateBottomLeft);