var map = L.map('map').setView([49.41607523, 8.672200499], 19);  
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 44,
    attribution: '© OpenStreetMap'
}).addTo(map);

// helper function for displayRoute()
async function prepare(){
  console.log("prepare")
   var route = getAllCoordinates('coordinates');
   console.log(route);
   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);
  //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);
  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+""));
  ul.appendChild(li);
 //important for maps
  map.fitBounds(polyline0.getBounds());
  map.fitBounds(polyline0.getBounds());
  map.fitBounds(polyline1.getBounds());
  map.fitBounds(polyline1.getBounds());

  return currentime;
}

async function showBike(){
  var current_cord = await getCurrentCoordinate() 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    L.marker(current_cord).addTo(map)
    .bindPopup(' Your BIKE!')
    .openPopup();
}