From 20054971b1e386862e75842e208ca89ac73ba5a1 Mon Sep 17 00:00:00 2001
From: michigg <michael-guenther.goetz@stud.uni-bamberg.de>
Date: Fri, 13 Oct 2017 23:45:08 +0200
Subject: [PATCH] add route

---
 ofu_app/templates/donar/show_room.jinja | 41 +++++++++++++++++++------
 1 file changed, 32 insertions(+), 9 deletions(-)

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