Example sources in the examples dir

examples/custom-controls.js

@@ -0,0 +1,81 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.Control');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+/**
+ * Define a namespace for the application.
+ */
+window.app = {};
+var app = window.app;
+
+
+//
+// Define rotate to north control.
+//
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {Object=} opt_options Control options.
+ */
+app.RotateNorthControl = function(opt_options) {
+
+  var options = opt_options || {};
+
+  var button = document.createElement('button');
+  button.innerHTML = 'N';
+
+  var this_ = this;
+  var handleRotateNorth = function(e) {
+    this_.getMap().getView().setRotation(0);
+  };
+
+  button.addEventListener('click', handleRotateNorth, false);
+  button.addEventListener('touchstart', handleRotateNorth, false);
+
+  var element = document.createElement('div');
+  element.className = 'rotate-north ol-unselectable ol-control';
+  element.appendChild(button);
+
+  ol.control.Control.call(this, {
+    element: element,
+    target: options.target
+  });
+
+};
+ol.inherits(app.RotateNorthControl, ol.control.Control);
+
+
+//
+// Create map, giving it a rotate to north control.
+//
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }).extend([
+    new app.RotateNorthControl()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2,
+    rotation: 1
+  })
+});