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

268 lines
8.3 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{% extends "base.html" %}
{% block main %}
<div id="home_content">
<p id="position"></p>
<!-- <h1 class="header" id="title">GEO</h1> -->
<div id="button_group">
<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>
<select id="viewSelector" onchange="changeViewSelect()" >
<option>Choose view</option>
<option value="all">all nodes</option>
<option value="closest">closest</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-->
<div class="locations_popup">
{% for location in locations %}
<div class="row" id={{location.id}}>
<div onclick="closeLocation()" class="close">×</div>
<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 to tent: " + 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";
}
function closeLocation(){
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
}
}
window.addEventListener('resize', function(event) {
updateView()
}, true);
</script>
{% endblock js %}