XPPL/app/templates/home.html

{% extends "base.html" %}

{% block main %}
<div id="home_content">
<p id="position"></p>
<!-- <h1 class="header" id="title">GEO</h1> -->
<button id="store_location" onclick="store_location()">store my position</button>
<button id="add_text" onclick="add_text()">add message</button>
<button id="add_audio" onclick="add_audio()">add audio</button>
</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-->

{% endblock main %}
{% block js %}

<script>


    var locations;
    function assign_data(data) {
      console.log(data);
      locations = data;
    }
    assign_data({{ data_locations|tojson }});
    
    
    var map = L.map('map', {zoomControl:false, 
                            attributionControl:false,
                            scrollWheelZoom: false,
                            zoom: 2000
                          }).setView([48.505, 1.09], 16);
    
    
    // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //     maxZoom: 19,
    //     zoom:2,
    //     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    // }).addTo(map);
    
    locations.forEach(function (item, index) {

        try {
            if(item.loc_type=="message"){
              var circle = L.circle([item.latitude, item.longitude], {
              color: 'blue',
              stroke:false,
              fillColor: 'blue',
              fillOpacity: 1,
              radius: 15
              }).addTo(map).on("click", circleClick);;
            }
            else if(item.loc_type=="audio"){
              var circle = L.circle([item.latitude, item.longitude], {
              color: 'green',
              stroke:false,
              fillColor: 'green',
              fillOpacity: 0.5,
              radius: 15
              }).addTo(map).on("click", circleClick);;
            }
            else{
              var circle = L.circle([item.latitude, item.longitude], {
              color: 'black',
              stroke:false,
              fillColor: 'black',
              fillOpacity: 0.5,
              radius: 30
              }).addTo(map).on("click", circleClick);;
            }
        } catch (error) {
        console.error(error);
        }
        
    
    });
    
    var myPositionCircle = L.circle([48.172934, 9.01236], {
        color: 'red',
        stroke:false,
        fillColor: 'red',
        fillOpacity: 0.5,
        radius: 30
    }).addTo(map);
    
    
    
    var x = document.getElementById("position");
    
    let id;
    let target;
    let options;
    
    
    //first: latitude, second: longitude
    target = {
      latitude : 48.172934,
      longitude: 9.01236
    };
    
    var my_location = {
      latitude : 0,
      longitude: 0
    };
    
    function success(pos) {
      const crd = pos.coords;
      my_location.longitude = crd.longitude;
      my_location.latitude = crd.latitude;
    
      map.setView([my_location.latitude, my_location.longitude], 16);
      myPositionCircle.setLatLng([my_location.latitude, my_location.longitude])
    
      console.log("updated")
    
      x.innerHTML = "Latitude: " + crd.latitude +
      "<br>Longitude: " + crd.longitude +
      "<br>Distance: " + distance(target.longitude, target.latitude, crd.longitude, crd.latitude);
    
        // if we want to clear the watch
      // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
      //   console.log('Congratulations, you reached the target');
      //   navigator.geolocation.clearWatch(id);
      // }
    
    }
    
    function error(err) {
      console.error(`ERROR(${err.code}): ${err.message}`);
      console.log("trying again")
      // id = navigator.geolocation.watchPosition(success, error, options);
    }
    
    
    options = {
      enableHighAccuracy: true,
      timeout: 1000,
      maximumAge: 1000
    };
    
    id = navigator.geolocation.watchPosition(success, error, options);
    
    function distance(lon1, lat1, lon2, lat2) {
      var R = 6371; // Radius of the earth in km
      var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
      var dLon = (lon2-lon1).toRad(); 
      var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
              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;
    }
    
    /** Converts numeric degrees to radians */
    if (typeof(Number.prototype.toRad) === "undefined") {
      Number.prototype.toRad = function() {
        return this * Math.PI / 180;
      }
    }
    
    function store_location(){
      console.log("storing location");
      console.log(my_location)
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "./addlocation", 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;
    }

    function add_audio(){
        window.location.href = "addaudio?longitude="+ my_location.longitude +"&latitude="+my_location.latitude;
    }
    
    
    </script>

{% endblock js %}