fix compass

app/static/css/style.css

@@ -303,6 +303,7 @@ margin: 4em 0;
   border-radius: 50%;
   /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */
   margin: auto;
+  pointer-events: none;
 }
 
 

app/templates/home.html

@@ -9,7 +9,9 @@
   <div class="arrow"></div>
   <div class="compass-circle"><svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path class="st0" d="M13,2.6l6.2,7.5L20,9.5l-7.5-9L5,9.5l0.8,0.6L12,2.6v21.9h1C13,24.5,13,2.6,13,2.6z"/></svg></div>
   <div class="my-point"></div>
+  
 </div>
+<button class="start-btn">Start compass</button>
 
 
 <!-- <h1 class="header" id="title">GEO</h1> -->
@@ -341,12 +343,13 @@
       navigator.userAgent.match(/AppleWebKit/);
 
     function init() {
-      // startBtn.addEventListener("click", startCompass);
+      startBtn.addEventListener("click", startCompass);
       navigator.geolocation.getCurrentPosition(locationHandler);
 
       if (!isIOS) {
         window.addEventListener("deviceorientationabsolute", handler, true);
       }
+
     }
 
     function startCompass() {
@@ -354,7 +357,6 @@
         DeviceOrientationEvent.requestPermission()
           .then((response) => {
             if (response === "granted") {
-              alert("granted")
               window.addEventListener("deviceorientation", handler, true);
             } else {
               alert("has to be allowed!");
@@ -366,7 +368,7 @@
 
     function handler(e) {
       compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
-      compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
+      compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
 
       // ±15 degree
 
@@ -422,7 +424,7 @@
     }
 
     init();
-    startCompass();
+    //
     
     
     </script>