mgoetz/basta-server
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add route

Browse Source
This commit is contained in:
Götz 2017-10-13 23:45:08 +02:00
parent a513750a86
commit 20054971b1
1 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ofu_app/templates/donar/show_room.jinja
View File

@ -6,11 +6,21 @@
<!-- Make sure you put this AFTER Leaflet's CSS --> <!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script> crossorigin="">
</script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<link rel="stylesheet" href="leaflet-routing-machine.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-routing-machine.js"></script>
<script> <script>
var endLat = '';
var endLon = '';
var startLat = '';
var startLon = '';
document.addEventListener('DOMContentLoaded', loadData); document.addEventListener('DOMContentLoaded', loadData);
document.addEventListener('DOMContentLoaded', resizeMap); document.addEventListener('DOMContentLoaded', resizeMap);
getPos(); document.addEventListener('DOMContentLoaded', getPos);
document.getElementById("navigate").onclick = makeRoute();
window.onresize = resizeMap; window.onresize = resizeMap;
@ -28,15 +38,15 @@
function generateMap(streets) { function generateMap(streets) {
if (streets.length > 0) { if (streets.length > 0) {
var lon = streets[0]['lon']; endLon = streets[0]['lon'];
var lat = streets[0]['lat']; endLat = streets[0]['lat'];
var map = L.map('map').setView([lat, lon], 13); var map = L.map('map').setView([endLat, endLon], 16);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); }).addTo(map);
L.marker([lat, lon]).addTo(map) L.marker([endLat, endLon]).addTo(map)
.bindPopup('{{ room.short }} </br> {{ room.address }}') .bindPopup('{{ room.short }} </br> {{ room.address }}')
.openPopup(); .openPopup();
} }
@ -51,14 +61,26 @@
function getPos() { function getPos() {
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) { navigator.geolocation.getCurrentPosition(function (position) {
console.log(position) console.log(position);
}, function () { startLat = position.coords.latitude;
console.log('no pos') startLon = position.coords.longitude;
}, function (err) {
console.log(err.code)
console.log(err.message)
}) })
} else { } else {
document.getElementById('map').innerHTML('Geolocation not available') document.getElementById('map').innerHTML('Geolocation not available')
} }
} }
function makeRoute() {
L.Routing.control({
waypoints: [
L.latLng(startLat, startLon),
L.latLng(endLat, endLon)
]
}).addTo(map);
}
</script> </script>
{% endblock %} {% endblock %}
{% block headline %} {% block headline %}
@ -68,4 +90,5 @@
{# TODO: implement Leaflet #} {# TODO: implement Leaflet #}
<div id="kart"></div> <div id="kart"></div>
<div id="map"></div> <div id="map"></div>
<button class="button" type="button" id="navigate">Route</button>
{% endblock %} {% endblock %}