Add zoom to extent control

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";
+}

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

src/ol/control/zoomtoextentcontrol.exports

@@ -0,0 +1,2 @@
+@exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions
+@exportProperty ol.control.ZoomToExtent.prototype.setMap

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