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/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 }) }); 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 + }) +}); diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index fdbf4f59e7..4cdf19b1f8 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..ca571c4f86 --- /dev/null +++ b/src/ol/control/zoomtoextentcontrol.exports @@ -0,0 +1 @@ +@exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions diff --git a/src/ol/control/zoomtoextentcontrol.js b/src/ol/control/zoomtoextentcontrol.js new file mode 100644 index 0000000000..a6ea3647d8 --- /dev/null +++ b/src/ol/control/zoomtoextentcontrol.js @@ -0,0 +1,68 @@ +// 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(); + var extent = goog.isNull(this.extent_) ? + view.getProjection().getExtent() : this.extent_; + view.fitExtent(extent, map.getSize()); +};