ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Simplify CSS code in custom-controls example

Browse Source 
By using the ol-control css class and a button instead of a link.
This commit is contained in:
Frederic Junod
2014-10-30 12:37:01 +01:00
parent ffeda3f25a
commit a715a38d75
2 changed files with 7 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
examples/custom-controls.html
View File

@@ -10,39 +10,12 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style type="text/css"> <style type="text/css">
.rotate-north { .rotate-north {
position: absolute;
top: 65px; top: 65px;
left: 8px; left: .5em;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
} }
.ol-touch .rotate-north { .ol-touch .rotate-north {
top: 80px; 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> </style>
<title>ol3 custom controls example</title> <title>ol3 custom controls example</title>
</head> </head>

15
examples/custom-controls.js
View File

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