Merge pull request openlayers#2894 from fredj/simplify-custom-controls

Simplify CSS code in custom-controls example
ichenjin · Dec 27, 2014 · 9a4c56d · 9a4c56d
2 parents 5d2f463 + a715a38
commit 9a4c56d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 37 deletions.
diff --git a/examples/custom-controls.html b/examples/custom-controls.html
@@ -10,39 +10,12 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
       .rotate-north {
-        position: absolute;
         top: 65px;
-        left: 8px;
-        background: rgba(255,255,255,0.4);
-        border-radius: 4px;
-        padding: 2px;
+        left: .5em;
       }
       .ol-touch .rotate-north {
         top: 80px;
       }
-      .rotate-north a {
-        display: block;
-        color: white;
-        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;
-        background: rgba(0,60,136,0.5);
-      }
-      .ol-touch .rotate-north a {
-        font-size: 20px;
-        height: 30px;
-        width: 30px;
-        line-height: 26px;
-      }
-      .rotate-north a:hover {
-        background: rgba(0,60,136,0.7);
-      }
     </style>
     <title>ol3 custom controls example</title>
   </head>

diff --git a/examples/custom-controls.js b/examples/custom-controls.js
@@ -29,23 +29,20 @@ app.RotateNorthControl = function(opt_options) {
 
   var options = opt_options || {};
 
-  var anchor = document.createElement('a');
-  anchor.href = '#rotate-north';
-  anchor.innerHTML = 'N';
+  var button = document.createElement('button');
+  button.innerHTML = 'N';
 
   var this_ = this;
   var handleRotateNorth = function(e) {
-    // prevent #rotate-north anchor from getting appended to the url
-    e.preventDefault();
     this_.getMap().getView().setRotation(0);
   };
 
-  anchor.addEventListener('click', handleRotateNorth, false);
-  anchor.addEventListener('touchstart', handleRotateNorth, false);
+  button.addEventListener('click', handleRotateNorth, false);
+  button.addEventListener('touchstart', handleRotateNorth, false);
 
   var element = document.createElement('div');
-  element.className = 'rotate-north ol-unselectable';
-  element.appendChild(anchor);
+  element.className = 'rotate-north ol-unselectable ol-control';
+  element.appendChild(button);
 
   ol.control.Control.call(this, {
     element: element,