From 1aac4e1c15565aecc607d78671ec5cf5f16755f9 Mon Sep 17 00:00:00 2001 From: michigg Date: Wed, 18 Oct 2017 15:47:28 +0200 Subject: [PATCH] add accuracy circle --- ofu_app/static/js/donar/navigate.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/ofu_app/static/js/donar/navigate.js b/ofu_app/static/js/donar/navigate.js index c666d5e..607ae2c 100644 --- a/ofu_app/static/js/donar/navigate.js +++ b/ofu_app/static/js/donar/navigate.js @@ -5,6 +5,7 @@ var endLat = ''; var endLon = ''; var startLat = 49.8955663; var startLon = 10.886907899999999; +var accuracy = 1; document.addEventListener('DOMContentLoaded', loadData); document.addEventListener('DOMContentLoaded', resizeMap); document.addEventListener('DOMContentLoaded', getPos); @@ -34,10 +35,9 @@ function generateMap(streets) { if (streets.length > 0) { endLon = streets[0]['lon']; endLat = streets[0]['lat']; - console.log(endLat); var map = L.map('map').setView([endLat, endLon], zoomlevel); - L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); @@ -47,6 +47,12 @@ function generateMap(streets) { L.marker([startLat, startLon]).addTo(map) .bindPopup('You are here!') .openPopup(); + L.circle([startLat, startLon], { + color: '#6b6b6b', + fillColor: '#6b6b6b', + fillOpacity: 0.4, + radius: accuracy + }).addTo(map); } } @@ -62,15 +68,17 @@ function resizeMap() { function getPos() { if (navigator.geolocation) { var geo_option = { - enableHighAccuracy: true, - } + enableHighAccuracy: true + }; navigator.geolocation.getCurrentPosition(function (position) { console.log(position); startLat = position.coords.latitude; startLon = position.coords.longitude; + accuracy = position.coords.accuracy; + console.log('Lat: ' + startLat + ' Lon: ' + startLon + ' Acc: ' + accuracy) }, function (err) { - console.log(err.code) - console.log(err.message) + console.log(err.code); + console.log(err.message); }, geo_option) } else { document.getElementById('map').innerHTML('Geolocation not available')