pgiraud · August 29, 2015 14:13
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html>

  <head>
    <title>OpenLayers3 Map Rotation with device compass</title>
  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" type="text/css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://openlayers.org/en/master/build/ol.js"></script>
  </head>

  <body>
    <div id="map"></div>
    <button id="rotate">rotate</button>
  </body>
  <script src="script.js"></script>

 </html>
diff --git a/script.js b/script.js
 // Code goes here

 var projection = ol.proj.get('EPSG:3857');
 var view = new ol.View({
  center: [0, 0],
  projection: projection,
  extent: projection.getExtent(),
  zoom: 2
 });
 var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    }),
    rotateOptions: {
      autoHide: false
    }
  }),
  view: view
 });

 var rotateMap = false;

 $('#rotate').on('click', function() {
  $(this).toggleClass('active');
  rotateMap = !rotateMap;
 });

 var deviceOrientation = new ol.DeviceOrientation();

 deviceOrientation.on(['change:heading'], function(event) {
  
  var heading = event.target.getHeading() || 0;

  var viewRotation = 0;
  var markerRotation = 0;
  if (rotateMap) {
    viewRotation = -heading;
    view.setCenter(geolocation.getPosition());
  } else {
    markerRotation = heading;
  }
  view.setRotation(viewRotation);
  positionMarkerIcon.setRotation(markerRotation)
  positionFeature.setStyle(new ol.style.Style({
    image: positionMarkerIcon
  }));
 });
 deviceOrientation.setTracking(true);

 var geolocation = new ol.Geolocation({
  projection: view.getProjection(),
  tracking: true
 });
 geolocation.once('change:position', function() {
  view.setCenter(geolocation.getPosition());
  view.setZoom(12);
 });

 var positionFeature = new ol.Feature();

 positionFeature.bindTo('geometry', geolocation, 'position')
    .transform(function() {}, function(coordinates) {
      return coordinates ? new ol.geom.Point(coordinates) : null;
    });
    
 var positionMarkerIcon = new ol.style.Icon({
  src: "http://openlayers.org/en/master/examples/data/geolocation_marker_heading.png",
  anchor: [11, 24],
  anchorXUnits: 'pixels',
  anchorYUnits: 'pixels'
 });


 var featuresOverlay = new ol.FeatureOverlay({
  map: map,
  features: [positionFeature]
 });

 // convert degrees to radians
 function degToRad(deg) {
   return deg * Math.PI * 2 / 360;
 }

 // convert radians to degrees
 function radToDeg(rad) {
  return rad * 360 / (Math.PI * 2);
 }
diff --git a/style.css b/style.css
 /* Styles go here */
 html, body, #map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
 }
 #rotate {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
 }

 #rotate.active {
  background-color: yellow;
 }

	<!DOCTYPE html>
	<html>

	<head>
	<title>OpenLayers3 Map Rotation with device compass</title>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" type="text/css">
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="http://openlayers.org/en/master/build/ol.js"></script>
	</head>

	<body>
	<div id="map"></div>
	<button id="rotate">rotate</button>
	</body>
	<script src="script.js"></script>

	</html>
	// Code goes here

	var projection = ol.proj.get('EPSG:3857');
	var view = new ol.View({
	center: [0, 0],
	projection: projection,
	extent: projection.getExtent(),
	zoom: 2
	});
	var map = new ol.Map({
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM()
	})
	],
	target: 'map',
	controls: ol.control.defaults({
	attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
	collapsible: false
	}),
	rotateOptions: {
	autoHide: false
	}
	}),
	view: view
	});

	var rotateMap = false;

	$('#rotate').on('click', function() {
	$(this).toggleClass('active');
	rotateMap = !rotateMap;
	});

	var deviceOrientation = new ol.DeviceOrientation();

	deviceOrientation.on(['change:heading'], function(event) {

	var heading = event.target.getHeading() \|\| 0;

	var viewRotation = 0;
	var markerRotation = 0;
	if (rotateMap) {
	viewRotation = -heading;
	view.setCenter(geolocation.getPosition());
	} else {
	markerRotation = heading;
	}
	view.setRotation(viewRotation);
	positionMarkerIcon.setRotation(markerRotation)
	positionFeature.setStyle(new ol.style.Style({
	image: positionMarkerIcon
	}));
	});
	deviceOrientation.setTracking(true);

	var geolocation = new ol.Geolocation({
	projection: view.getProjection(),
	tracking: true
	});
	geolocation.once('change:position', function() {
	view.setCenter(geolocation.getPosition());
	view.setZoom(12);
	});

	var positionFeature = new ol.Feature();

	positionFeature.bindTo('geometry', geolocation, 'position')
	.transform(function() {}, function(coordinates) {
	return coordinates ? new ol.geom.Point(coordinates) : null;
	});

	var positionMarkerIcon = new ol.style.Icon({
	src: "http://openlayers.org/en/master/examples/data/geolocation_marker_heading.png",
	anchor: [11, 24],
	anchorXUnits: 'pixels',
	anchorYUnits: 'pixels'
	});


	var featuresOverlay = new ol.FeatureOverlay({
	map: map,
	features: [positionFeature]
	});

	// convert degrees to radians
	function degToRad(deg) {
	return deg * Math.PI * 2 / 360;
	}

	// convert radians to degrees
	function radToDeg(rad) {
	return rad * 360 / (Math.PI * 2);
	}
	/* Styles go here */
	html, body, #map {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	}
	#rotate {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	}

	#rotate.active {
	background-color: yellow;
	}