|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
|
|
|
|
|
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
|
|
|
|
|
crossorigin=""/>
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
|
|
|
|
|
integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
|
|
|
|
|
crossorigin=""></script>
|
|
|
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
|
|
|
<title>GEO</title>
|
|
|
|
|
|
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
|
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
|
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
|
|
|
{% block css %} {% endblock%}
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
{% block header %}
|
|
|
|
|
<header>
|
|
|
|
|
{% include "header.html" %}
|
|
|
|
|
</header>
|
|
|
|
|
{% endblock %}
|
|
|
|
|
<main>
|
|
|
|
|
<div class="container">
|
|
|
|
|
{% block main %}{% endblock %}
|
|
|
|
|
</div>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<div class="container">
|
|
|
|
|
{% include "footer.html" %}
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
{% block js %} {% endblock%}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="{{ url_for("static", filename="js/jquery-3.3.1.min.js") }}"></script>
|
|
|
|
|
<script src="{{ url_for("static", filename="js/app.js") }}"></script>
|
|
|
|
|
|
|
|
|
|
<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], 10);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
zoom:2,
|
|
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
locations.forEach(function (item, index) {
|
|
|
|
|
var circle = L.circle([item.latitude, item.longitude], {
|
|
|
|
|
color: 'red',
|
|
|
|
|
fillColor: 'red',
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
radius: 30
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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: false,
|
|
|
|
|
timeout: 5000,
|
|
|
|
|
maximumAge: 0
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
}));
|
|
|
|
|
location.reload();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
