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(); + } +};