Merge pull request #859 from elemoine/zoomtoextent

Add a ZoomToExtent control
2013-07-19 05:46:26 -07:00
parent c3bed305c7 907476f566
commit 65ec948cb0
8 changed files with 233 additions and 58 deletions
--- 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";
+}
--- a/examples/custom-controls.html
+++ b/examples/custom-controls.html
@@ -8,7 +8,7 @@
    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
    <style type="text/css">
-      .zoom-extent {
+      .rotate-north {
        position: absolute;
        top: 65px;
        left: 8px;
@@ -16,30 +16,23 @@
        border-radius: 4px;
        padding: 2px;
      }
-      .zoom-extent a {
+      .rotate-north a {
        display: block;
-        margin: 1px;
-        padding: 0;
        color: white;
-        font-size: 18px;
+        font-size: 16px;
        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
        font-weight: bold;
+        margin: 1px;
        text-decoration: none;
        text-align: center;
+        border-radius: 2px;
        height: 22px;
        width: 22px;
-        line-height: 19px;
        background: rgba(0,60,136,0.5);
      }
-      .zoom-extent a:hover {
+      .rotate-north a:hover {
        background: rgba(0,60,136,0.7);
      }
-      .zoom-to {
-        border-radius: 2px 2px 0 0;
-      }
-      .zoom-to:before {
-        content: "E";
-      }
    </style>
    <title>ol3 custom controls example</title>
  </head>
@@ -73,10 +66,9 @@
          <p id="shortdesc">This example shows how to create custom controls.</p>
          <div id="docs">
            <p>
-              This example creates a "zoom to extent" button.
+              This example creates a "rotate to north" button.
              See the <a href="custom-controls.js" target="_blank">custom-controls.js
              source</a> to see how this is done.
-              Per default, the zoom extent control use the map projection extent.
            </p>
          </div>
          <div id="tags">
--- 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
  })
 });
--- a/examples/navigation-controls.html
+++ b/examples/navigation-controls.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Navigation controls example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Navigation controls example</h4>
+          <p id="shortdesc">Shows how to add navigation controls.</p>
+            The following navigation controls are added to the map:
+            <ul>
+              <li><code>ol.control.Zoom</code> (added by default)</li>
+              <li><code>ol.control.ZoomToExtent</code></li>
+            </ul>
+          <div id="docs">
+            <p>See the <a href="navigation-controls.js" target="_blank">navigation-controls.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">control, navigation, extent</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=navigation-controls" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/examples/navigation-controls.js
+++ 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
+  })
+});
--- 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
--- a/src/ol/control/zoomtoextentcontrol.exports
+++ b/src/ol/control/zoomtoextentcontrol.exports
@@ -0,0 +1 @@
+@exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions
--- a/src/ol/control/zoomtoextentcontrol.js
+++ 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());
+};
				`@@ -0,0 +1 @@`
				`@exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions`