Rotate to north for custom controls example

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">

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.href = '#rotate-north';
-  anchor.className = 'zoom-to';
+  anchor.innerHTML = 'N';
 
   var this_ = this;
-  var handleZoomTo = function(e) {
+  var handleRotateNorth = function(e) {
-    this_.handleZoomTo(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('click', handleRotateNorth, false);
-  anchor.addEventListener('touchstart', handleZoomTo, 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);
+ol.inherits(app.RotateNorthControl, 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.
+// Create map, giving it a rotate to north control.
 //
 
 
 var map = new ol.Map({
   controls: ol.control.defaults({}, [
-    new app.ZoomExtentControl({
+    new app.RotateNorthControl()
-      extent: [813079.7791264898, 848966.9639063801,
-               5929220.284081122, 5936863.986909639]
-    })
   ]),
   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
   })
 });