Merge pull request #10 from danielgilbers/feature/rotation

Feature/rotation

index.html

@@ -118,6 +118,7 @@ <h4 style="margin-top:0.75rem;">Orientation</h4>
                         <li>X-axis (β): <span id="Orientation_b">0</span><span>°</span></li>
                         <li>Y-axis (γ): <span id="Orientation_g">0</span><span>°</span></li>
                         <li>Z-axis (α): <span id="Orientation_a">0</span><span>°</span></li>
+                        <li>Compass: <span id="Orientation_compass">0</span><span>°</span></li>
                     </ul>
 
                     <h4>Accelerometer</h4>

js/map.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+import 'https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate-src.js'
 import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'
 import { findProduct, searchProducts } from './Products.js'
 
@@ -92,7 +93,14 @@ let userPosition = L.latLng(100, 645) // Start: 100, 645
 export const map = L.map('map', {
   zoomControl: false,
   crs: L.CRS.Simple,
-  minZoom: -2
+  minZoom: -2,
+  rotate: true,
+  rotateControl: {
+    closeOnZeroBearing: true,
+    position: 'bottomleft',
+  },
+  bearing: 0,
+  touchRotate: true
 })
 
 /**

js/sensor.js

@@ -2,6 +2,7 @@ function handleOrientation(event) {
   updateFieldIfNotNull('Orientation_a', event.alpha);
   updateFieldIfNotNull('Orientation_b', event.beta);
   updateFieldIfNotNull('Orientation_g', event.gamma);
+  updateFieldIfNotNull('Orientation_g', event.webkitCompassHeading);
   incrementEventCount();
 }