You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
XPPL/app/templates/home.html

174 lines
4.9 KiB
HTML

{% extends "base.html" %}
{% block main %}
<div id="home_content">
<h1 class="header" id="title">GEO</h1>
<p id="position"></p>
<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 -->
<!-- COMPAS 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 {
var circle = L.circle([item.latitude, item.longitude], {
color: 'red',
fillColor: 'red',
fillOpacity: 1,
radius: 30
}).addTo(map);
} catch (error) {
console.error(error);
}
});
var myPositionCircle = L.circle([48.172934, 9.01236], {
color: 'black',
fillColor: 'black',
fillOpacity: 1,
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 %}