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-->

<select id="viewSelector" onchange="changeViewSelect()" >  
  <option>---Choose view---</option>  
  <option value="all">all nodes</option>  
  <option value="closest">closest</option>  
</select>   


<div class="locations_popup">
  {% for location in locations %}
    <div class="row" id={{location.id}}>
      <div>{{location.longitude}}, {{location.latitude}}</div>
      <div>{{location.message if location.loc_type == "message"}}</div>
      <div>
        {% if location.loc_type == "audio" %}
        <audio id="audio-player" controls="" src="uploads/{{location.audio}}"></audio>
        {% endif %}
      </div>
    </div>
  {% endfor %}
</div>

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

<script>


    var locations;
    var zoom_level = 18;
    var markerArray = [];
    var circleArray = [];
    var view="closest";

    function assign_data(data) {
      locations = data;
    }
    assign_data({{ data_locations|tojson }});
    
    var map = L.map('map', { 
                            attributionControl:false,
                            zoomControl:false,
                            zoom: 2000,
                            zoomSnap: 0.1,
                            animate: true,
                            // dragging: false,
                            //scrollWheelZoom: false,
                          }).setView([48.505, 1.09], zoom_level);
    
    
    // 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: 10
              }).addTo(map).on("click", e => circleClick(e));
              circle.id = item.id;
              circleArray.push(circle);
            }
            else if(item.loc_type=="audio"){
              var circle = L.circle([item.latitude, item.longitude], {
              color: 'green',
              stroke:false,
              fillColor: 'green',
              fillOpacity: 0.5,
              radius: 10
              }).addTo(map).on("click", e => circleClick(e));
              circle.id = item.id;
              circleArray.push(circle);
            }
            else{
              var circle = L.circle([item.latitude, item.longitude], {
              color: 'black',
              stroke:false,
              fillColor: 'black',
              fillOpacity: 0.5,
              radius: 10
              }).addTo(map).on("click", e => circleClick(e));
              circle.id = item.id;
              circleArray.push(circle);
            }
            markerArray.push(L.marker([item.latitude, item.longitude]));
        } catch (error) {
        console.error(error);
        }
    });
    
    var myPositionCircle = L.circle([48.172934, 9.01236], {
        color: 'red',
        stroke:false,
        fillColor: 'red',
        fillOpacity: 0.5,
        radius: 10
    }).addTo(map);
    circleArray.push(myPositionCircle);
    
    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;
    
      updateView()

      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;
    }

    function updateView(){
       //update position on map
      // map.setView([my_location.latitude, my_location.longitude], zoom_level);
      myPositionCircle.setLatLng([my_location.latitude, my_location.longitude]);
      if(view == "all"){
        var group = new L.featureGroup(circleArray);
        map.fitBounds(group.getBounds().pad(0.1));
      }
      else if(view = "closest"){
        var closest = L.GeometryUtil.closestLayer(map, markerArray, myPositionCircle.getLatLng());
        var group = new L.featureGroup([closest.layer, myPositionCircle]);
        map.fitBounds(group.getBounds().pad(0.1));
      }
    }

    function changeViewSelect() {  
      var mylist = document.getElementById("viewSelector");  
      view = mylist.options[mylist.selectedIndex].value;  
      updateView();
    }  

    function circleClick(e){
      var id = e.target.id
      var divsToHide = document.getElementsByClassName("row"); //divsToHide is an array
      for(var i = 0; i < divsToHide.length; i++){
          divsToHide[i].style.display = "none"; // depending on what you're doing
      }
      document.getElementById(id).style.display = "block";
    }

    window.addEventListener('resize', function(event) {
      updateView()
}, true);
    
    
    </script>

{% endblock js %}