compass?

app/static/css/style.css

@@ -59,11 +59,19 @@ audio{
   border-bottom: 1px solid black;
 }
 
+.locations_list .row img{
+  max-height: 2em;
+}
+
 
 .locations_list .row div:first-of-type {
   width: 5%;
 }
 
+.locations_list .row div:nth-of-type(2) {
+  width: 10%;
+}
+
 .locations_list .row div:last-of-type{
   
 }
@@ -254,6 +262,12 @@ margin: 4em 0;
   box-sizing: border-box;
 }
 
+#distance_close{
+  font-family: 'Courier New', Courier, monospace;
+
+}
+
+
 #button_group button, #button_group select{
   background-color: grey;
   color: white;
@@ -261,8 +275,56 @@ margin: 4em 0;
   border: 1px solid white;
   border-radius: 2em;
   padding: 0.8em;
+  vertical-align: middle;
+  margin-top: 0.5em;
+  cursor: pointer;
+}
+
+#button_group select option{
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
 }
 
 #button_group img{
   width: 1em;
+  margin-right: 0.2em;
+  vertical-align: middle;
+}
+
+
+
+/* COMPAS */
+
+.compass {
+  position: relative;
+  width: 320px;
+  height: 320px;
+  border-radius: 50%;
+  /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */
+  margin: auto;
+}
+
+
+
+.compass > .compass-circle,
+.compass > .my-point {
+  position: absolute;
+  width: 90%;
+  height: 90%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: transform 0.1s ease-out;
+}
+
+.compass > .compass-circle svg{
+  width: 100%;
+  height: 100%;
+}
+
+
+
+.start-btn {
+  margin-bottom: auto;
 }

app/templates/home.html

@@ -3,10 +3,20 @@
 {% block main %}
 <div id="home_content">
 <p id="position"></p>
+
+
+<div class="compass">
+  <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>
+
+
 <!-- <h1 class="header" id="title">GEO</h1> -->
   <div id="button_group">
+    <div id="distance_close">(distance to mosquito)</div>
     <button id="store_location" onclick="store_location()"><img src="/static/img/hangout.png" alt="">add hangout</button>
-    <button id="store_location" onclick="store_location()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
+    <button id="store_location_mosquito" onclick="store_location_mosquito()"><img src="/static/img/mosquito.png" alt="">add mosquito</button>
     <button id="add_text" onclick="add_text()"><img src="/static/img/text.png" alt="">add message</button>
     <button id="add_audio" onclick="add_audio()"><img src="/static/img/audio.png" alt=""> add audio</button>
 
@@ -14,15 +24,17 @@
       <option>Choose view</option>  
       <option value="all">show all entries</option>  
       <option value="closest">show closest mosquito</option>  
+      <option value="me">my position</option>  
     </select> 
   </div>
 </div>
 
-<!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation -->
-<!-- COMPASS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
 
 
 
+<!-- HEADING DIRECTION https://stackoverflow.com/questions/46033649/heading-javascript-geolocation -->
+<!-- COMPASS CROSS DEVICE https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android-->
+
 
 <div class="locations_popup">
   {% for location in locations %}
@@ -43,12 +55,11 @@
 {% block js %}
 
 <script>
-
-
     var locations;
     var zoom_level = 18;
     var markerArray = [];
     var circleArray = [];
+    var mosquitoArray = [];
     var view="closest";
 
     function assign_data(data) {
@@ -60,21 +71,21 @@
                             attributionControl:false,
                             zoomControl:false,
                             zoom: 2000,
-                            zoomSnap: 0.1,
+                            zoomSnap: 0.5,
                             animate: true,
-                            // dragging: false,
+                            maxZoom: 19,
+                            minZoom: 10
+                            //dragging: false,
                             //scrollWheelZoom: false,
                           }).setView([48.505, 1.09], zoom_level);
     
-    
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
-    //     maxZoom: 19,
+        zoom:2,
-    //     zoom:2,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    //     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
-    // }).addTo(map);
     
     locations.forEach(function (item, index) {
-
         try {
             var icon;
             if(item.loc_type=="message"){
@@ -84,7 +95,6 @@
               iconAnchor: [25, 25],
               popupAnchor: [-3, -76],
               });
-
             }
             else if(item.loc_type=="audio"){
               icon = L.icon({
@@ -94,22 +104,32 @@
               popupAnchor: [-3, -76],
               });
             }
-            else{
+            else if(item.loc_type=="mosquito"){
               icon = L.icon({
               iconUrl: '/static/img/mosquito.png',
               iconSize: [50, 50],
               iconAnchor: [25, 25],
               popupAnchor: [-3, -76],
               });
-              
+            }
+            else if(item.loc_type=="hangout"){
+              icon = L.icon({
+              iconUrl: '/static/img/hangout.png',
+              iconSize: [50, 50],
+              iconAnchor: [25, 25],
+              popupAnchor: [-3, -76],
+              });
             }
             var circle = L.marker([item.latitude, item.longitude], {icon: icon}).addTo(map).on("click", e => circleClick(e));
             circle.id = item.id;
             circleArray.push(circle);
 
             markerArray.push(L.marker([item.latitude, item.longitude]));
+
+            if(item.loc_type=="mosquito") mosquitoArray.push(L.marker([item.latitude, item.longitude]));
+
         } catch (error) {
-          console.error(error);
+            console.error(error);
         }
     });
     
@@ -124,7 +144,7 @@
     var myIcon = L.icon({
     iconUrl: '/static/img/me.png',
     iconSize: [50, 50],
-    iconAnchor: [50, 50],
+    iconAnchor: [25, 25],
     popupAnchor: [-3, -76],
     });
 
@@ -155,7 +175,7 @@
       my_location.longitude = crd.longitude;
       my_location.latitude = crd.latitude;
     
-      updateView()
+      if(view == "closest") updateView()
 
       console.log("updated")
     
@@ -194,7 +214,14 @@
               Math.sin(dLon/2) * Math.sin(dLon/2); 
       var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
       var d = R * c; // Distance in km
-      return d;
+      var text;
+      if(d < 1){
+        text = Math.round(d * 100) / 100*1000+" m";
+      }
+      else{
+        text = Math.round(d * 100) / 100+" km"
+      }
+      return text;
     }
     
     /** Converts numeric degrees to radians */
@@ -222,6 +249,24 @@
         }      
     }
 
+    function store_location_mosquito(){
+      console.log("storing location");
+      console.log(my_location)
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", "./addlocationmosquito", true);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.send(JSON.stringify({
+          longitude: my_location.longitude,
+          latitude: my_location.latitude
+      }));
+    
+      xhr.onreadystatechange=function(){
+           if (xhr.readyState==4 && xhr.status==200){
+                 location.reload();
+           }
+        }      
+    }
+
 
     function add_text(){
         window.location.href = "addtext?longitude="+ my_location.longitude +"&latitude="+my_location.latitude;
@@ -239,11 +284,22 @@
         var group = new L.featureGroup(circleArray);
         map.fitBounds(group.getBounds().pad(0.4));
       }
-      else if(view = "closest"){
+      else if(view == "closest"){
-        var closest = L.GeometryUtil.closestLayer(map, markerArray, myPositionCircle.getLatLng());
+        var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
+        // L.polyline([closest.layer.getLatLng(), myPositionCircle.getLatLng()], {
+        //   color: 'black',
+        //   weight: 1,
+        // }).addTo(map)
+        document.getElementById("distance_close").innerHTML = "closest mosquito: " + distance(closest.layer.getLatLng().lat,closest.layer.getLatLng().lng,myPositionCircle.getLatLng().lat, myPositionCircle.getLatLng().lng)
         var group = new L.featureGroup([closest.layer, myPositionCircle]);
         map.fitBounds(group.getBounds().pad(0.4));
       }
+      else if(view == "me"){
+        map.setView([my_location.latitude, my_location.longitude], zoom_level);
+      }
+      else if(view == "free"){
+
+      }
     }
 
     function changeViewSelect() {  
@@ -273,6 +329,102 @@
 }, true);
 
 
+
+
+    // COMPASS
+    const compassCircle = document.querySelector(".compass-circle");
+    const myPoint = document.querySelector(".my-point");
+    const startBtn = document.querySelector(".start-btn");
+    var compass;
+    var pointDegree;
+    const isIOS =
+      navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
+      navigator.userAgent.match(/AppleWebKit/);
+
+    function init() {
+      // startBtn.addEventListener("click", startCompass);
+      navigator.geolocation.getCurrentPosition(locationHandler);
+
+      if (!isIOS) {
+        window.addEventListener("deviceorientationabsolute", handler, true);
+      }
+    }
+
+    function startCompass() {
+      if (isIOS) {
+        DeviceOrientationEvent.requestPermission()
+          .then((response) => {
+            if (response === "granted") {
+              window.addEventListener("deviceorientation", handler, true);
+            } else {
+              alert("has to be allowed!");
+            }
+          })
+          .catch(() => alert("not supported"));
+      }
+    }
+
+    function handler(e) {
+      compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
+      compassCircle.style.transform = `translate(-50%, -50%) rotate(${pointDegree-compass}deg)`;
+
+      // ±15 degree
+
+      // if (
+      //   (pointDegree < Math.abs(compass) &&
+      //     pointDegree + 15 > Math.abs(compass)) ||
+      //   pointDegree > Math.abs(compass + 15) ||
+      //   pointDegree < Math.abs(compass)
+      // ) {
+      //   myPoint.style.opacity = 0;
+      // } else if (pointDegree) {
+      //   myPoint.style.opacity = 1;
+      // }
+    }
+
+    
+
+    function locationHandler(position) {
+      
+      const { latitude, longitude } = position.coords;
+      pointDegree = calcDegreeToPoint(latitude, longitude);
+
+      if (pointDegree < 0) {
+        pointDegree = pointDegree + 360;
+      }
+
+      // compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
+
+    }
+
+    function calcDegreeToPoint(latitude, longitude) {
+      // Qibla geolocation
+      var closest = L.GeometryUtil.closestLayer(map, mosquitoArray, myPositionCircle.getLatLng());
+      console.log(closest);
+
+      const point = {
+        lat: closest.layer.getLatLng().lat,
+        lng: closest.layer.getLatLng().lng
+      };
+
+      const phiK = (point.lat * Math.PI) / 180.0;
+      const lambdaK = (point.lng * Math.PI) / 180.0;
+      const phi = (latitude * Math.PI) / 180.0;
+      const lambda = (longitude * Math.PI) / 180.0;
+      const psi =
+        (180.0 / Math.PI) *
+        Math.atan2(
+          Math.sin(lambdaK - lambda),
+          Math.cos(phi) * Math.tan(phiK) -
+            Math.sin(phi) * Math.cos(lambdaK - lambda)
+        );
+      return Math.round(psi);
+    }
+
+    init();
+    startCompass();
+    
+    
     </script>
 
 {% endblock js %}

app/templates/list.html

@@ -7,12 +7,12 @@
   <div class="locations_list">
     {% for location in locations %}
       <div class="row">
-        <div>{{location.id}}</div> 
+        <div>{{location.id}} </div>
+        <div><img src="{{"/static/img/text.png" if location.loc_type == "message"}}{{"/static/img/audio.png" if location.loc_type == "audio"}}{{"/static/img/hangout.png" if location.loc_type == "hangout"}}{{"/static/img/mosquito.png" if location.loc_type == "mosquito"}}" alt=""></div> 
         <div>{{location.longitude}}, {{location.latitude}}</div>
         <div>{{location.message if location.loc_type == "message"}}{{location.message if location.loc_type == "audio"}}</div>
         <div>
           {% if location.loc_type == "audio" %}
-          
           <audio id="audio-player" controls="" src="uploads/{{location.audio}}" type="audio/mp3"></audio>
           {% endif %}
         </div>

app/views.py

@@ -73,6 +73,17 @@ def hello(name):
 
 @app.route('/addlocation', methods=['POST', 'GET'])
 def add_location():
+    if request.method == 'POST':
+        data = request.get_json()
+        print("UPDATING DATA")
+        print(data['longitude'])
+        location = Location(data['longitude'],data['latitude'], "hangout", "", "")
+        db.session.add(location)
+        db.session.commit()
+        return redirect(url_for('home'))
+    
+@app.route('/addlocationmosquito', methods=['POST', 'GET'])
+def add_location_mosquito():
     if request.method == 'POST':
         data = request.get_json()
         print("UPDATING DATA")