From 2b7ed7381fb5d353f092b0dee84b3fd44e625f99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20VEYSSEYRE?= Date: Thu, 15 Sep 2016 15:10:01 +0200 Subject: [PATCH 1/4] Added interactive option to ol.control.OverviewMap --- css/ol.css | 4 ++++ externs/olx.js | 7 ++++++ src/ol/control/overviewmap.js | 44 +++++++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+) diff --git a/css/ol.css b/css/ol.css index 538a602616..157fdeb0b8 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-interactive .ol-overviewmap-box:hover { + cursor: move; +} \ No newline at end of file diff --git a/externs/olx.js b/externs/olx.js index d27a5191e2..95d13cd242 100644 --- a/externs/olx.js +++ b/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 `»`. diff --git a/src/ol/control/overviewmap.js b/src/ol/control/overviewmap.js index cd099bf3c9..2adb8e69ca 100644 --- a/src/ol/control/overviewmap.js +++ b/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); From ac99b5011ad7caa85c5e109831920b92c37a69c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20VEYSSEYRE?= Date: Thu, 15 Sep 2016 15:10:41 +0200 Subject: [PATCH 2/4] Enabled ol.control.OverviewMap interactive option on example page --- examples/overviewmap-custom.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/overviewmap-custom.js b/examples/overviewmap-custom.js index abc13e842b..2f966247e4 100644 --- a/examples/overviewmap-custom.js +++ b/examples/overviewmap-custom.js @@ -20,7 +20,8 @@ var overviewMapControl = new ol.control.OverviewMap({ ], collapseLabel: '\u00BB', label: '\u00AB', - collapsed: false + collapsed: false, + interactive: true }); var map = new ol.Map({ From 328862172dd2e82a94b503d202fabd057828951c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20VEYSSEYRE?= Date: Fri, 16 Sep 2016 15:28:07 +0200 Subject: [PATCH 3/4] Moved logic into the constructor --- src/ol/control/overviewmap.js | 76 ++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 36 deletions(-) diff --git a/src/ol/control/overviewmap.js b/src/ol/control/overviewmap.js index 2adb8e69ca..732547ce4a 100644 --- a/src/ol/control/overviewmap.js +++ b/src/ol/control/overviewmap.js @@ -151,6 +151,46 @@ ol.control.OverviewMap = function(opt_options) { render: render, target: options.target }); + + /* Interactive map */ + + if (this.interactive_) { + 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); @@ -386,42 +426,6 @@ 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); From 6202c1736f439d6f510c4d2e8805322d90551773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20VEYSSEYRE?= Date: Mon, 20 Mar 2017 17:15:47 +0100 Subject: [PATCH 4/4] Made OvervieMap interactive option default behavior --- css/ol.css | 2 +- examples/overviewmap-custom.js | 3 +- externs/olx.js | 7 ---- src/ol/control/overviewmap.js | 58 ++++++++++++++-------------------- 4 files changed, 26 insertions(+), 44 deletions(-) diff --git a/css/ol.css b/css/ol.css index 157fdeb0b8..cb0bcaae6d 100644 --- a/css/ol.css +++ b/css/ol.css @@ -240,6 +240,6 @@ border: 2px dotted rgba(0,60,136,0.7); } -.ol-overviewmap-interactive .ol-overviewmap-box:hover { +.ol-overviewmap .ol-overviewmap-box:hover { cursor: move; } \ No newline at end of file diff --git a/examples/overviewmap-custom.js b/examples/overviewmap-custom.js index 2f966247e4..abc13e842b 100644 --- a/examples/overviewmap-custom.js +++ b/examples/overviewmap-custom.js @@ -20,8 +20,7 @@ var overviewMapControl = new ol.control.OverviewMap({ ], collapseLabel: '\u00BB', label: '\u00AB', - collapsed: false, - interactive: true + collapsed: false }); var map = new ol.Map({ diff --git a/externs/olx.js b/externs/olx.js index 95d13cd242..d27a5191e2 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -1201,13 +1201,6 @@ 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 `»`. diff --git a/src/ol/control/overviewmap.js b/src/ol/control/overviewmap.js index 732547ce4a..7dc4f0be36 100644 --- a/src/ol/control/overviewmap.js +++ b/src/ol/control/overviewmap.js @@ -42,20 +42,12 @@ 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'; @@ -154,43 +146,41 @@ ol.control.OverviewMap = function(opt_options) { /* Interactive map */ - if (this.interactive_) { - var scope = this; + var scope = this; - var overlay = this.boxOverlay_; - var overlayBox = this.boxOverlay_.getElement(); + var overlay = this.boxOverlay_; + var overlayBox = this.boxOverlay_.getElement(); - /* Functions definition */ + /* Functions definition */ - var computeDesiredMousePosition = function(mousePosition) { - return { - clientX: mousePosition.clientX - (overlayBox.offsetWidth / 2), - clientY: mousePosition.clientY + (overlayBox.offsetHeight / 2) - }; + 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)); + var move = function(event) { + var coordinates = ovmap.getEventCoordinate(computeDesiredMousePosition(event)); - overlay.setPosition(coordinates); - }; + overlay.setPosition(coordinates); + }; - var endMoving = function(event) { - var coordinates = ovmap.getEventCoordinate(event); + var endMoving = function(event) { + var coordinates = ovmap.getEventCoordinate(event); - scope.getMap().getView().setCenter(coordinates); + scope.getMap().getView().setCenter(coordinates); - window.removeEventListener('mousemove', move); - window.removeEventListener('mouseup', endMoving); - }; + window.removeEventListener('mousemove', move); + window.removeEventListener('mouseup', endMoving); + }; - /* Binding */ + /* Binding */ - overlayBox.addEventListener('mousedown', function() { - window.addEventListener('mousemove', move); - window.addEventListener('mouseup', endMoving); - }); - } + overlayBox.addEventListener('mousedown', function() { + window.addEventListener('mousemove', move); + window.addEventListener('mouseup', endMoving); + }); }; ol.inherits(ol.control.OverviewMap, ol.control.Control);