Merge pull request #706 from elemoine/user-extensions

Custom control framework
2013-05-10 04:47:39 -07:00
parent 4c144c3d5c 3a4fc2a99a
commit 42cc4d7683
14 changed files with 273 additions and 15 deletions
--- a/build.py
+++ b/build.py
@@ -309,6 +309,7 @@ def examples_star_json(name, match):
                '../externs/bingmaps.js',
                '../externs/bootstrap.js',
                '../externs/geojson.js',
+                '../externs/oli.js',
                '../externs/proj4js.js',
                '../externs/tilejson.js',
            ],
--- a/buildcfg/base.json
+++ b/buildcfg/base.json
@@ -42,6 +42,7 @@
    "//json.js",
    "../externs/bingmaps.js",
    "../externs/geojson.js",
+    "../externs/oli.js",
    "../externs/proj4js.js",
    "../externs/tilejson.js"
  ],
--- a/buildcfg/ol-all.json
+++ b/buildcfg/ol-all.json
@@ -7,6 +7,7 @@
    "../build/src/external/externs/types.js",
    "../externs/bingmaps.js",
    "../externs/geojson.js",
+    "../externs/oli.js",
    "../externs/proj4js.js",
    "../externs/tilejson.js"
  ],
--- a/buildcfg/ol-simple.json
+++ b/buildcfg/ol-simple.json
@@ -16,6 +16,7 @@
    "//json.js",
    "../externs/bingmaps.js",
    "../externs/geojson.js",
+    "../externs/oli.js",
    "../externs/proj4js.js",
    "../externs/tilejson.js"
  ],
--- a/buildcfg/ol-whitespace.json
+++ b/buildcfg/ol-whitespace.json
@@ -17,6 +17,7 @@
    "//json.js",
    "../externs/bingmaps.js",
    "../externs/geojson.js",
+    "../externs/oli.js",
    "../externs/proj4js.js",
    "../externs/tilejson.js"
  ],
--- a/buildcfg/ol.json
+++ b/buildcfg/ol.json
@@ -17,6 +17,7 @@
    "../build/src/external/externs/types.js",
    "../externs/bingmaps.js",
    "../externs/geojson.js",
+    "../externs/oli.js",
    "../externs/proj4js.js",
    "../externs/tilejson.js"
  ],
--- a/examples/custom-controls.html
+++ b/examples/custom-controls.html
@@ -0,0 +1,94 @@
+<!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">
+    <style type="text/css">
+      .zoom-extent {
+        position: absolute;
+        top: 65px;
+        left: 8px;
+        background: rgba(255,255,255,0.4);
+        border-radius: 4px;
+        padding: 2px;
+      }
+      .zoom-extent a {
+        display: block;
+        margin: 1px;
+        padding: 0;
+        color: white;
+        font-size: 18px;
+        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+        font-weight: bold;
+        text-decoration: none;
+        text-align: center;
+        height: 22px;
+        width: 22px;
+        line-height: 19px;
+        background: rgba(0,60,136,0.5);
+      }
+      .zoom-extent 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>
+  <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="span4">
+          <h4 id="title">Custom controls</h4>
+          <p id="shortdesc">This example shows how to create custom controls.</p>
+          <div id="docs">
+            <p>
+              This example creates a "zoom to extent" 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">
+            custom, control
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+
+</html>
--- a/examples/custom-controls.js
+++ b/examples/custom-controls.js
@@ -0,0 +1,109 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.control.Control');
+goog.require('ol.control.defaults');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+
+/**
+ * Define a namespace for the application.
+ */
+window.app = {};
+var app = window.app;
+
+
+//
+// Define zoom extent control.
+//
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {Object=} opt_options Control options.
+ */
+app.ZoomExtentControl = function(opt_options) {
+
+  var options = opt_options || {};
+  this.extent_ = options.extent;
+
+  var anchor = document.createElement('a');
+  anchor.href = '#zoom-to';
+  anchor.className = 'zoom-to';
+
+  var this_ = this;
+  var handleZoomTo = function(e) {
+    this_.handleZoomTo(e);
+  };
+
+  anchor.addEventListener('click', handleZoomTo, false);
+  anchor.addEventListener('touchstart', handleZoomTo, false);
+
+  var element = document.createElement('div');
+  element.className = 'zoom-extent ol-unselectable';
+  element.appendChild(anchor);
+
+  ol.control.Control.call(this, {
+    element: element,
+    map: options.map,
+    target: options.target
+  });
+
+};
+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();
+  }
+};
+
+
+//
+// Create map, giving it a zoom extent control.
+//
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new app.ZoomExtentControl({
+      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/externs/oli.js
+++ b/externs/oli.js
@@ -0,0 +1,28 @@
+/**
+ * @externs
+ */
+
+
+/**
+ * @type {Object}
+ */
+var oli;
+
+
+/**
+ * @interface
+ */
+oli.control.Control = function() {};
+
+
+/**
+ * @param {ol.MapEvent} mapEvent Map event.
+ */
+oli.control.Control.prototype.handleMapPostrender = function(mapEvent) {};
+
+
+/**
+ * @param {ol.Map} map Map.
+ * @return {undefined} Undefined.
+ */
+oli.control.Control.prototype.setMap = function(map) {};
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -123,6 +123,13 @@
 * @property {Element|undefined} target Target.
 */

+ /**
+  * @typedef {Object} ol.control.ControlOptions
+  * @property {Element|undefined} element Element.
+  * @property {ol.Map|undefined} map Map.
+  * @property {Element|undefined} target Target.
+  */
+
 /**
 * @typedef {Object} ol.control.DefaultsOptions
 * @property {boolean|undefined} attribution Attribution.
--- a/src/ol/control/control.exports
+++ b/src/ol/control/control.exports
@@ -0,0 +1,4 @@
+@exportClass ol.control.Control ol.control.ControlOptions
+@exportProperty ol.control.Control.prototype.handleMapPostrender
+@exportProperty ol.control.Control.prototype.getMap
+@exportProperty ol.control.Control.prototype.setMap
--- a/src/ol/control/control.js
+++ b/src/ol/control/control.js
@@ -1,5 +1,4 @@
 goog.provide('ol.control.Control');
-goog.provide('ol.control.ControlOptions');

 goog.require('goog.Disposable');
 goog.require('goog.array');
@@ -8,14 +7,6 @@ goog.require('goog.events');
 goog.require('ol.MapEventType');


-/**
- * @typedef {{element: (Element|undefined),
- *            map: (ol.Map|undefined),
- *            target: (Element|undefined)}}
- */
-ol.control.ControlOptions;
-
-

 /**
 * A thing which is painted over the map to provide a means for interaction
@@ -23,6 +14,7 @@ ol.control.ControlOptions;
 *
 * @constructor
 * @extends {goog.Disposable}
+ * @implements {oli.control.Control}
 * @param {ol.control.ControlOptions} options Control options.
 */
 ol.control.Control = function(options) {
@@ -79,16 +71,18 @@ ol.control.Control.prototype.getMap = function() {


 /**
+ * Function called on each map render. Executes in a requestAnimationFrame
+ * callback. Can be implemented in sub-classes to re-render the control's
+ * UI.
 * @param {ol.MapEvent} mapEvent Map event.
 */
-ol.control.Control.prototype.handleMapPostrender = goog.nullFunction;
+ol.control.Control.prototype.handleMapPostrender = function(mapEvent) {};


 /**
- * Removes the control from its current map and attaches it to the new map.
- * Subtypes might also wish set up event handlers to get notified about changes
- * to the map here.
- *
+ * Remove the control from its current map and attach it to the new map.
+ * Subclasses may set up event handlers to get notified about changes to
+ * the map here.
 * @param {ol.Map} map Map.
 */
 ol.control.Control.prototype.setMap = function(map) {
@@ -104,7 +98,8 @@ ol.control.Control.prototype.setMap = function(map) {
    var target = goog.isDef(this.target_) ?
        this.target_ : map.getOverlayContainer();
    goog.dom.appendChild(target, this.element);
-    if (this.handleMapPostrender !== goog.nullFunction) {
+    if (this.handleMapPostrender !==
+        ol.control.Control.prototype.handleMapPostrender) {
      this.listenerKeys.push(goog.events.listen(map,
          ol.MapEventType.POSTRENDER, this.handleMapPostrender, false, this));
    }
--- a/src/ol/ol.exports
+++ b/src/ol/ol.exports
@@ -0,0 +1 @@
+@exportSymbol ol.inherits
--- a/src/ol/ol.js
+++ b/src/ol/ol.js
@@ -0,0 +1,14 @@
+goog.provide('ol');
+
+
+/**
+ * ol.inherits is an alias to the goog.inherits function. It is exported
+ * for use in non-compiled application code. See ol.exports.
+ *
+ * FIXME: We use a new line to fake the linter. Without the new line the
+ * linter complains with:
+ *
+ * "Missing newline between constructor and goog.inherits"
+ */
+ol.inherits =
+    goog.inherits;