diff --git a/functions.js b/functions.js
index 2471d16..804a9c6 100644
--- a/functions.js
+++ b/functions.js
@@ -104,79 +104,117 @@ async function createDb(){
                 //console.log(lasttime)
                 return lasttime;
               }
-              
-              var buffer_for_i = 0;
               async function getAllCoordinates(){
-              var db2 = await createDb()
-              const current_route = db2.all
-              // coordinates in this schema 49.123/8.2311
-              var coordinates = Object.values(current_route)
-              // parse to string for split and then split by / 
-              var coordinate_string = coordinates.toString()
-              var between_string = coordinate_string.split("/")
-              var final_string = between_string.toString()
-              //comma string looks now like this : 49.1212,8.1231,49.1231, ...
-              const comma_string = final_string.split(',')
-              // create new Array and put string back in to array for using paths/polylines with leafleat
-              var route0 =[];
-              var route1 = []
-              // use for loop for iterating over string and put it in the right order
-              //route 0
-              for (var i = 0; i < comma_string.length; i++) {
-                //console.log(comma_string[i])
-                if (comma_string[i] == "00"){
-                  console.log("00 gefunden")
-                  buffer_for_i = i +2;
-                  //console.log(buffer_for_i)
-                  break;
+                var db2 = await createDb()
+                const all_coordinates = db2.all
+                // coordinates in this schema 49.123/8.2311
+                var coordinates = Object.values(all_coordinates)
+                // parse to string for split and then split by / 
+                var coordinate_string = coordinates.toString()
+                var between_string = coordinate_string.split("/")
+                var final_string = between_string.toString()
+                //comma string looks now like this : 49.1212,8.1231,49.1231, ...
+                var comma_string = final_string.split(',')
+                // create new Array and put string back in to array for using paths/polylines with leafleat
+                var newArray =[];
+                // use for loop for iterating over string and put it in the right order
+                for (var i = 0; i < comma_string.length; i++) {
+                
+                   var increment = i+1;
+                   newArray.push([comma_string[i], comma_string[increment]])
+                   increment = increment+1
+                   i = i+1
                 }
-                route0.push([comma_string[i], comma_string[i+1]])
-                i = i+1       
-              }
-               // its only for converting the string array to a float array, because leaflethjs wants only a float array 
-              (function(elem) {
-              var callee = arguments.callee;
-                return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
-                                             : parseFloat(elem);
-              })
-              route0 = route0.map(function(elem) {
-                return elem.map(function(elem2) {
-                    return parseFloat(elem2);
+                 // its only for converting the string array to a float array, because leaflethjs wants only a float array 
+                (function(elem) {
+                var callee = arguments.callee;
+                  return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
+                                               : parseFloat(elem);
+                })
+                newArray = newArray.map(function(elem) {
+                  return elem.map(function(elem2) {
+                      return parseFloat(elem2);
+                  });
                 });
-              });
-              //console.log("route0")
-              //console.log(route0)
-              //route 1
-              for (var i = buffer_for_i; i < comma_string.length; i++) {
-                console.log(buffer_for_i)
-                if (comma_string[i] == "00"){
-                  //console.log("00 gefunden")
-                  //console.log(buffer_for_i)
-                  break;
-                }else if(comma_string[i] == "11"){
-                  noroutes = 1;
-                  //console.log("Ende gefunden")
+                console.log(newArray)
+                
+                //console.log(newArray)
+                return newArray;
                 }
-                route1.push([comma_string[i], comma_string[i+1]])
-                i = i+1        
-              }
-              //console.log("route1")
-              //console.log(route1)
-               // its only for converting the string array to a float array, because leaflethjs wants only a float array 
-              (function(elem) {
-              var callee = arguments.callee;
-                return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
-                                             : parseFloat(elem);
-              })
-              route1 = route1.map(function(elem) {
-                return elem.map(function(elem2) {
-                    return parseFloat(elem2);
-                });
-              });
-              
-              //console.log(route)
-              return [route0, route1];
-              }
+
+                
+async function getAllRoutes(){
+  var buffer_for_i = 0;
+  var db2 = await createDb()
+  const current_route = db2.all
+  // coordinates in this schema 49.123/8.2311
+  var coordinates = Object.values(current_route)
+  // parse to string for split and then split by / 
+  var coordinate_string = coordinates.toString()
+  var between_string = coordinate_string.split("/")
+  var final_string = between_string.toString()
+  //comma string looks now like this : 49.1212,8.1231,49.1231, ...
+  const comma_string = final_string.split(',')
+  // create new Array and put string back in to array for using paths/polylines with leafleat
+  var route0 =[];
+  var route1 = []
+  // use for loop for iterating over string and put it in the right order
+  //route 0
+  for (var i = 0; i < comma_string.length; i++) {
+    //console.log(comma_string[i])
+    if (comma_string[i] == "00"){
+      console.log("00 gefunden")
+      buffer_for_i = i +2;
+      //console.log(buffer_for_i)
+      break;
+    }
+    route0.push([comma_string[i], comma_string[i+1]])
+    i = i+1       
+  }
+   // its only for converting the string array to a float array, because leaflethjs wants only a float array 
+  (function(elem) {
+  var callee = arguments.callee;
+    return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
+                                 : parseFloat(elem);
+  })
+  route0 = route0.map(function(elem) {
+    return elem.map(function(elem2) {
+        return parseFloat(elem2);
+    });
+  });
+  //console.log("route0")
+  //console.log(route0)
+  //route 1
+  for (var i = buffer_for_i; i < comma_string.length; i++) {
+    console.log(buffer_for_i)
+    if (comma_string[i] == "00"){
+      //console.log("00 gefunden")
+      //console.log(buffer_for_i)
+      break;
+    }else if(comma_string[i] == "11"){
+      noroutes = 1;
+      //console.log("Ende gefunden")
+    }
+    route1.push([comma_string[i], comma_string[i+1]])
+    i = i+1        
+  }
+  //console.log("route1")
+  //console.log(route1)
+   // its only for converting the string array to a float array, because leaflethjs wants only a float array 
+  (function(elem) {
+  var callee = arguments.callee;
+    return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
+                                 : parseFloat(elem);
+  })
+  route1 = route1.map(function(elem) {
+    return elem.map(function(elem2) {
+        return parseFloat(elem2);
+    });
+  });
+  
+  //console.log(route)
+  return [route0, route1];
+}
 
 async function createRouteObject(){              
               var currentime = await getCurrentTime()
@@ -191,4 +229,88 @@ async function createlistitem() {
     li.appendChild(document.createTextNode("Last travelled route on: "   +currentime+""));
     ul.appendChild(li);
 }
+async function clearMap() {
+  for(i in map._layers) {
+      if(map._layers[i]._path != undefined) {
+          try {
+              map.removeLayer(map._layers[i]);
+          }
+          catch(e) {
+              console.log("problem with " + e + map._layers[i]);
+          }
+      }
+  }
+
+}
+async function allRoutes(number_of_ze_route) {
+  
+  //color theming
+  var color = ["blue","red","green","purple","gray","yellow"];
+  var i = Math.floor(Math.random() * 5) ;
+  let current = await prepare();
+  const current_route = current[number_of_ze_route];
+  clearMap()
+  //var marker = L.marker([49.41607523,8.67220049]).addTo(map);
+  polyline = L.polyline(current_route, {color: color[i]}).addTo(map);
+  var currentime = await getCurrentTime();
+ // does stuff ??
+  var ul = document.getElementById("list");
+  var li = document.createElement("li");
+  li.appendChild(document.createTextNode("Route "+ (number_of_ze_route + 1) + " was travelled on: " + currentime + "" ));
+  ul.appendChild(li);
+  
+ //important for maps
+  
+  map.fitBounds(polyline.getBounds());
+  map.fitBounds(polyline.getBounds());
+
+  return currentime;
+}
+async function showRoutes(){
+  var len_of_Routes = await getAllRoutes();
+  var len = len_of_Routes.length ;
+  console.log("Gotten all routes");
+  console.log(len);
+  var i = 0;
+  /* Doesnt work yet
+  var btn = [];
+  console.log("Beginning while with i = " + i)
+  while (i < len){
+    console.log("this is i: " + i)
+    console.log("this is len: " + len)
+    
+    btn[i] = document.createElement("button");
+    btn[i].innerHTML = ("Route " + (i + 1));
+    btn[i].onclick = function () {  
+    console.log("i is " + i)
+    console.log("setting allroutes with i as " + (i-1));
+      allRoutes((i-1));
+    };
+    
+    document.body.appendChild(btn[i]);
+    console.log("Button generated with i = "+ i)
+    i = i + 1;
+  }
+  */
+  // WORKS
+  
+    console.log("this is i: " + i)
+    console.log("this is len: " + len)
+    let btn0 = document.createElement("button");
+    btn0.innerHTML = ("Route 1");
+    btn0.onclick = function () {  
+      allRoutes((0));
+    };
+    let btn1 = document.createElement("button");
+    btn1.innerHTML = ("Route 2");
+    btn1.onclick = function () {  
+      allRoutes((1));
+    };
+ 
+    i = i + 1;
+    document.body.appendChild(btn0);
+    document.body.appendChild(document.createElement('br'));
+    document.body.appendChild(btn1);
+  //*/
+}
 
diff --git a/index.html b/index.html
index 8f7c2e6..0ae6ac8 100644
--- a/index.html
+++ b/index.html
@@ -17,12 +17,14 @@
     
   </head>
   <body>
-    <button onclick="showBike()"> Locate your Bike!</button>
-     <button onclick="displayRoute()"> Show last travelled route</button>
+    <div>
+      <button onclick="showBike()"> Locate your Bike!</button>
+      <button onclick="displayLastRoute()"> Show last travelled route</button>
+    </div>
     <!-- <button onclick="createlistitem()"> create route</button> -->
 
     <ul id="list">
-
+    
             
               
           
@@ -34,7 +36,8 @@
     </div>
   </li>
     </ul>
-    <div id="map"></div>
+    <!-- The MAP-->
+    <div style="position: relative; float:left;" id="map"></div>
 
     <script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
 
@@ -58,20 +61,25 @@
 
                  
     <style> #map { height: 600px; width: 600px; margin: auto }</style>
-    <style>
-      /*
-* {
+
+    <!-- Buttons for Route-->
+    <div class="routes">
+    <button onclick="showRoutes()"> Show Routes </button>
+    </div> 
+<style>
+  /*
+*{
   box-sizing: border-box;
 }
- 
-html, body {
+
+body {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items:flex-start;
   font-family: 'Roboto', sans-serif;
-  background: #d4d1d1;
+  background: #bb753b;
   overflow: hidden;
 }
 
@@ -132,4 +140,11 @@ html, body {
   flex-direction: column;
   flex-grow: 2;
   position: relative;
-}
\ No newline at end of file
+}
+.routes {
+  float:right ;
+  position: bottom;
+  margin-right: 20%;
+}
+*/
+</style>
\ No newline at end of file
diff --git a/map.js b/map.js
index 3f484c3..04ae14e 100644
--- a/map.js
+++ b/map.js
@@ -8,45 +8,38 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 // helper function for displayRoute()
 async function prepare(){
   console.log("prepare")
-   var route = getAllCoordinates('coordinates');
-   console.log(route);
+   var route = getAllRoutes('coordinates');
    return route;
 }
 
-async function displayRoute() {
-//color array
-  let color = ["blue","red","green","purple","gray","yellow"];
-  var i = 0;
-  let current_route = await prepare();
-  console.log("after prepare");
-  console.log(current_route);
-  console.log("Current_route");
-  console.log(current_route);
-  const current_route0 = current_route[0];
-  const current_route1 = current_route[1];
-  console.log("Route 0");
-  // this is test
-  console.log(current_route0);
-  console.log("Route 1");
-  console.log(current_route1);
+
+async function displayLastRoute() {
+  clearMap()
+  //color theming
+  let color = ["blue","red","green","purple","cyan","yellow"];
+  var i = Math.floor(Math.random() * 5) ;
+  let current = await prepare();
+  console.log("Length:")
+  console.log(current.length);
+  var len = current.length - 1;
+  const current_route = current[len];
   //var marker = L.marker([49.41607523,8.67220049]).addTo(map);
-  polyline0 = L.polyline(current_route0, {color: color[i]}).addTo(map);
-  polyline1 = L.polyline(current_route1, {color: color[i+1]}).addTo(map);
+  polyline = L.polyline(current_route, {color: color[i]}).addTo(map);
   var currentime = await getCurrentTime();
  // does stuff ??
   var ul = document.getElementById("list");
   var li = document.createElement("li");
-  li.appendChild(document.createTextNode("Last travelled route on: "   +currentime+""));
+  li.appendChild(document.createTextNode("Last travelled route on: " + currentime + "" ));
   ul.appendChild(li);
  //important for maps
-  map.fitBounds(polyline0.getBounds());
-  map.fitBounds(polyline0.getBounds());
-  map.fitBounds(polyline1.getBounds());
-  map.fitBounds(polyline1.getBounds());
+  map.fitBounds(polyline.getBounds());
+  map.fitBounds(polyline.getBounds());
 
   return currentime;
 }
 
+
+
 async function showBike(){
   var current_cord = await getCurrentCoordinate() 
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);