Add a custom controls example

Inspired from @cedricmoullet's ZoomExtent example in 3312c37ed0.
2013-03-28 14:06:15 +01:00
parent 9685c87bc9
commit 4e51888651
2 changed files with 203 additions and 0 deletions
--- 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
+  })
+});