diff --git a/css/ol.css b/css/ol.css index 538a602616..cb0bcaae6d 100644 --- a/css/ol.css +++ b/css/ol.css @@ -239,3 +239,7 @@ .ol-overviewmap-box { border: 2px dotted rgba(0,60,136,0.7); } + +.ol-overviewmap .ol-overviewmap-box:hover { + cursor: move; +} \ No newline at end of file diff --git a/src/ol/control/overviewmap.js b/src/ol/control/overviewmap.js index b352b4e961..31ca836f2b 100644 --- a/src/ol/control/overviewmap.js +++ b/src/ol/control/overviewmap.js @@ -148,6 +148,44 @@ ol.control.OverviewMap = function(opt_options) { render: render, target: options.target }); + + /* Interactive map */ + + var scope = this; + + var overlay = this.boxOverlay_; + var overlayBox = this.boxOverlay_.getElement(); + + /* Functions definition */ + + var computeDesiredMousePosition = function(mousePosition) { + return { + clientX: mousePosition.clientX - (overlayBox.offsetWidth / 2), + clientY: mousePosition.clientY + (overlayBox.offsetHeight / 2) + }; + }; + + var move = function(event) { + var coordinates = ovmap.getEventCoordinate(computeDesiredMousePosition(event)); + + overlay.setPosition(coordinates); + }; + + var endMoving = function(event) { + var coordinates = ovmap.getEventCoordinate(event); + + scope.getMap().getView().setCenter(coordinates); + + window.removeEventListener('mousemove', move); + window.removeEventListener('mouseup', endMoving); + }; + + /* Binding */ + + overlayBox.addEventListener('mousedown', function() { + window.addEventListener('mousemove', move); + window.addEventListener('mouseup', endMoving); + }); }; ol.inherits(ol.control.OverviewMap, ol.control.Control);