Openlayers 3 - Controls positioning

by Jose GĂłmez

HTML

<script src="http://openlayers.org/en/v3.15.1/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css">
<div id="map"></div>

CSS

/*.rotate-north {
  top: 65px;
  left: .5em;
}
.ol-touch .rotate-north {
  top: 80px;
}*/
#map {
  height: 100vh;
}

.left-top {
  width: 27px;
  margin: .5em;
  position: relative;
  /*top: -208px;*/
  top: calc(-100vh + 3.3em + .5em);
}

.top-right {
  width: 27px;
  margin: .5em;
  right: 3em;
  position: relative;
  /*top: -400px;*/
  top: calc(-100vh - 0.7em);
  float: right;
}

JavaScript

//
// Define rotate to north control.
//

/**
* @constructor
* @extends {ol.control.Control}
* @param {Object=} opt_options Control options.
*/
var RotateNorthControl = function(opt_options) {

var options = opt_options || {};

var button = document.createElement('button');
button.innerHTML = options.label;

var this_ = this;
var handleRotateNorth = function() {
  this_.getMap().getView().setRotation(0);
};

button.addEventListener('click', handleRotateNorth, false);
button.addEventListener('touchstart', handleRotateNorth, false);

var element = document.createElement('div');
element.id = "control-" + options.label;
element.className = options.position + ' ol-unselectable ol-control';
element.appendChild(button);

ol.control.Control.call(this, {
  element: element,
  target: options.target
});

};
ol.inherits(RotateNorthControl, ol.control.Control);

//
// Create map, giving it a rotate to north control.
//

var map = new ol.Map({
controls: ol.control.defaults().extend([
  new RotateNorthControl({label: 4, position: "top-right"}),
  new RotateNorthControl({label: 5, position: "top-right"}),
  new RotateNorthControl({label: 6, position: "top-right"}),
  new RotateNorthControl({label: 1, position: "left-top"}),
  new RotateNorthControl({label: 2, position: "left-top"}),
  new RotateNorthControl({label: 3, position: "left-top"})
]),
layers: [
  new ol.layer.Tile({
	source: new ol.source.OSM()
  })
],
target: 'map',
view: new ol.View({
  center: [0, 0],
  zoom: 3,
  rotation: 1
})
});

setTimeout(function(){
	document.getElementById("control-2").style.display = "none";
}, 3000);

setTimeout(function(){
	document.getElementById("control-2").style.display = "block";
}, 6000);