From 86001fd3316f1c5d2e5b29530b6689d6188e7880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Brunner?= Date: Wed, 26 Jun 2013 16:21:07 +0200 Subject: [PATCH 1/4] Add zoom to extent control --- css/ol.css | 40 +++++++++++ src/objectliterals.jsdoc | 9 +++ src/ol/control/zoomtoextentcontrol.exports | 2 + src/ol/control/zoomtoextentcontrol.js | 79 ++++++++++++++++++++++ 4 files changed, 130 insertions(+) create mode 100644 src/ol/control/zoomtoextentcontrol.exports create mode 100644 src/ol/control/zoomtoextentcontrol.js diff --git a/css/ol.css b/css/ol.css index 132b35deec..2f61746c6c 100644 --- a/css/ol.css +++ b/css/ol.css @@ -202,3 +202,43 @@ a.ol-full-screen-true:after { height: 20px; width: 24px; } +.ol-zoom-extent { + position: absolute; + background: rgba(255,255,255,0.4); + border-radius: 4px; + left: 8px; + padding: 2px; + top: 65px; +} +@media print { + .ol-zoom-extent { + display: none; + } +} +.ol-zoom-extent a { + display: block; + margin: 1px; + padding: 0; + color: white; + font-size: 16px; + font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif; + font-weight: bold; + text-decoration: none; + text-align: center; + height: 22px; + width: 22px; + background-color: rgba(0, 60, 136, 0.5); + border-radius: 2px; +} +.ol-touch .ol-zoom-extent a { + font-size: 20px; + height: 30px; + width: 30px; + line-height: 26px; +} +.ol-zoom-extent a:hover { + background-color: rgba(0, 60, 136, 0.7); +} +.ol-zoom-extent a:after { + content: "E"; +} diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 215f8d1328..cae194b60f 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -226,6 +226,15 @@ * @property {number|undefined} minResolution Minimum resolution. */ +/** + * @typedef {Object} ol.control.ZoomToExtentOptions + * @property {string|undefined} className Class name. + * @property {ol.Map|undefined} map Map. + * @property {Element|undefined} target Target. + * @property {ol.Extent|undefined} extent The extent to zoom to. If + * undefined the validity extent of the view projection is used. + */ + /** * @typedef {Object} ol.interaction.DoubleClickZoomOptions * @property {number|undefined} delta The zoom delta applied on each double diff --git a/src/ol/control/zoomtoextentcontrol.exports b/src/ol/control/zoomtoextentcontrol.exports new file mode 100644 index 0000000000..c09a73b3c8 --- /dev/null +++ b/src/ol/control/zoomtoextentcontrol.exports @@ -0,0 +1,2 @@ +@exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions +@exportProperty ol.control.ZoomToExtent.prototype.setMap diff --git a/src/ol/control/zoomtoextentcontrol.js b/src/ol/control/zoomtoextentcontrol.js new file mode 100644 index 0000000000..615190cebd --- /dev/null +++ b/src/ol/control/zoomtoextentcontrol.js @@ -0,0 +1,79 @@ +// FIXME works for View2D only + +goog.provide('ol.control.ZoomToExtent'); + +goog.require('goog.dom'); +goog.require('goog.dom.TagName'); +goog.require('goog.events'); +goog.require('goog.events.EventType'); +goog.require('ol.control.Control'); +goog.require('ol.css'); + + + +/** + * Create a control that adds a button, which, when pressed, changes + * the map view to a specific extent. To style this control use the + * css selector .ol-zoom-extent. + * @constructor + * @extends {ol.control.Control} + * @param {ol.control.ZoomToExtentOptions=} opt_options Options. + */ +ol.control.ZoomToExtent = function(opt_options) { + var options = goog.isDef(opt_options) ? opt_options : {}; + + /** + * @type {ol.Extent} + * @private + */ + this.extent_ = goog.isDef(options.extent) ? options.extent : null; + + var className = goog.isDef(options.className) ? options.className : + 'ol-zoom-extent'; + + var element = goog.dom.createDom(goog.dom.TagName.DIV, { + 'class': className + ' ' + ol.css.CLASS_UNSELECTABLE + }); + var button = goog.dom.createDom(goog.dom.TagName.A, { + 'href': '#zoomExtent' + }); + goog.dom.appendChild(element, button); + + goog.events.listen(element, [ + goog.events.EventType.TOUCHEND, + goog.events.EventType.CLICK + ], this.handleZoomToExtent_, false, this); + + goog.base(this, { + element: element, + map: options.map, + target: options.target + }); +}; +goog.inherits(ol.control.ZoomToExtent, ol.control.Control); + + +/** + * @param {goog.events.BrowserEvent} browserEvent Browser event. + * @private + */ +ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function(browserEvent) { + // prevent #zoomExtent anchor from getting appended to the url + browserEvent.preventDefault(); + var map = this.getMap(); + var view = map.getView().getView2D(); + view.fitExtent(this.extent_, map.getSize()); +}; + + +/** + * Overload setMap to use the view projection's validity extent + * if no extent was passed to the constructor. + * @param {ol.Map} map Map. + */ +ol.control.ZoomToExtent.prototype.setMap = function(map) { + ol.control.Control.prototype.setMap.call(this, map); + if (map && !this.extent_) { + this.extent_ = map.getView().getProjection().getExtent(); + } +}; From d15f68d651df9bd875e9f20328a39d0aa190f48b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Brunner?= Date: Wed, 26 Jun 2013 16:21:43 +0200 Subject: [PATCH 2/4] Add navigation controls example --- examples/navigation-controls.html | 60 +++++++++++++++++++++++++++++++ examples/navigation-controls.js | 32 +++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 examples/navigation-controls.html create mode 100644 examples/navigation-controls.js diff --git a/examples/navigation-controls.html b/examples/navigation-controls.html new file mode 100644 index 0000000000..9503429b29 --- /dev/null +++ b/examples/navigation-controls.html @@ -0,0 +1,60 @@ + + + + + + + + + + Navigation controls example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Navigation controls example

+

Shows how to add navigation controls.

+ The following navigation controls are added to the map: +
    +
  • ol.control.Zoom (added by default)
    • +
  • ol.control.ZoomToExtent
    • +
+
+

See the navigation-controls.js source to see how this is done.

+
+
control, navigation, extent
+
+ +
+ +
+ + + + + + diff --git a/examples/navigation-controls.js b/examples/navigation-controls.js new file mode 100644 index 0000000000..86f6d06f1e --- /dev/null +++ b/examples/navigation-controls.js @@ -0,0 +1,32 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.control.ZoomToExtent'); +goog.require('ol.control.defaults'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + controls: ol.control.defaults({}, [ + new ol.control.ZoomToExtent({ + extent: [ + 813079.7791264898, + 848966.9639063801, + 5929220.284081122, + 5936863.986909639 + ] + }) + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); From 74f446948f4b437070c2f85a4d9b4c3b8eb36203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Brunner?= Date: Wed, 26 Jun 2013 16:22:07 +0200 Subject: [PATCH 3/4] Rotate to north for custom controls example --- examples/custom-controls.html | 22 +++++-------- examples/custom-controls.js | 59 ++++++++++------------------------- 2 files changed, 23 insertions(+), 58 deletions(-) diff --git a/examples/custom-controls.html b/examples/custom-controls.html index 3824e07d13..6d4db42f59 100644 --- a/examples/custom-controls.html +++ b/examples/custom-controls.html @@ -8,7 +8,7 @@ ol3 custom controls example @@ -73,10 +66,9 @@

This example shows how to create custom controls.

- This example creates a "zoom to extent" button. + This example creates a "rotate to north" button. See the custom-controls.js source to see how this is done. - Per default, the zoom extent control use the map projection extent.

diff --git a/examples/custom-controls.js b/examples/custom-controls.js index 9ddadcc92d..d5d774fbc7 100644 --- a/examples/custom-controls.js +++ b/examples/custom-controls.js @@ -16,7 +16,7 @@ var app = window.app; // -// Define zoom extent control. +// Define rotate to north control. // @@ -26,25 +26,26 @@ var app = window.app; * @extends {ol.control.Control} * @param {Object=} opt_options Control options. */ -app.ZoomExtentControl = function(opt_options) { +app.RotateNorthControl = function(opt_options) { var options = opt_options || {}; - this.extent_ = options.extent; var anchor = document.createElement('a'); - anchor.href = '#zoom-to'; - anchor.className = 'zoom-to'; + anchor.href = '#rotate-north'; + anchor.innerHTML = 'N'; var this_ = this; - var handleZoomTo = function(e) { - this_.handleZoomTo(e); + var handleRotateNorth = function(e) { + // prevent #rotate-north anchor from getting appended to the url + e.preventDefault(); + this_.getMap().getView().getView2D().setRotation(0); }; - anchor.addEventListener('click', handleZoomTo, false); - anchor.addEventListener('touchstart', handleZoomTo, false); + anchor.addEventListener('click', handleRotateNorth, false); + anchor.addEventListener('touchstart', handleRotateNorth, false); var element = document.createElement('div'); - element.className = 'zoom-extent ol-unselectable'; + element.className = 'rotate-north ol-unselectable'; element.appendChild(anchor); ol.control.Control.call(this, { @@ -54,46 +55,17 @@ app.ZoomExtentControl = function(opt_options) { }); }; -ol.inherits(app.ZoomExtentControl, ol.control.Control); - - -/** - * @param {Event} e Browser event. - */ -app.ZoomExtentControl.prototype.handleZoomTo = function(e) { - // prevent #zoomTo anchor from getting appended to the url - e.preventDefault(); - - var map = this.getMap(); - var view = map.getView(); - view.fitExtent(this.extent_, map.getSize()); -}; - - -/** - * Overload setMap to use the view projection's validity extent - * if no extent was passed to the constructor. - * @param {ol.Map} map Map. - */ -app.ZoomExtentControl.prototype.setMap = function(map) { - ol.control.Control.prototype.setMap.call(this, map); - if (map && !this.extent_) { - this.extent_ = map.getView().getProjection().getExtent(); - } -}; +ol.inherits(app.RotateNorthControl, ol.control.Control); // -// Create map, giving it a zoom extent control. +// Create map, giving it a rotate to north control. // var map = new ol.Map({ controls: ol.control.defaults({}, [ - new app.ZoomExtentControl({ - extent: [813079.7791264898, 848966.9639063801, - 5929220.284081122, 5936863.986909639] - }) + new app.RotateNorthControl() ]), layers: [ new ol.layer.TileLayer({ @@ -104,6 +76,7 @@ var map = new ol.Map({ target: 'map', view: new ol.View2D({ center: [0, 0], - zoom: 2 + zoom: 2, + rotation: 1 }) }); From 907476f5667942284f93916c95fe8cf9244f6a33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 11 Jul 2013 14:47:37 +0200 Subject: [PATCH 4/4] No need to impl setMap in ZoomToExtent control --- src/ol/control/zoomtoextentcontrol.exports | 1 - src/ol/control/zoomtoextentcontrol.js | 17 +++-------------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/src/ol/control/zoomtoextentcontrol.exports b/src/ol/control/zoomtoextentcontrol.exports index c09a73b3c8..ca571c4f86 100644 --- a/src/ol/control/zoomtoextentcontrol.exports +++ b/src/ol/control/zoomtoextentcontrol.exports @@ -1,2 +1 @@ @exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions -@exportProperty ol.control.ZoomToExtent.prototype.setMap diff --git a/src/ol/control/zoomtoextentcontrol.js b/src/ol/control/zoomtoextentcontrol.js index 615190cebd..a6ea3647d8 100644 --- a/src/ol/control/zoomtoextentcontrol.js +++ b/src/ol/control/zoomtoextentcontrol.js @@ -62,18 +62,7 @@ ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function(browserEvent) { browserEvent.preventDefault(); var map = this.getMap(); var view = map.getView().getView2D(); - view.fitExtent(this.extent_, map.getSize()); -}; - - -/** - * Overload setMap to use the view projection's validity extent - * if no extent was passed to the constructor. - * @param {ol.Map} map Map. - */ -ol.control.ZoomToExtent.prototype.setMap = function(map) { - ol.control.Control.prototype.setMap.call(this, map); - if (map && !this.extent_) { - this.extent_ = map.getView().getProjection().getExtent(); - } + var extent = goog.isNull(this.extent_) ? + view.getProjection().getExtent() : this.extent_; + view.fitExtent(extent, map.getSize()); };