1var urlroutes = "https://api.routes.fair.coop/api/";
  2
  3var routes = [];
  4var routesMarkers = L.markerClusterGroup();
  5
  6function getRoute(id) {
  7  for(var i=0; i<routes.length; i++) {
  8    console.log(routes[i]._id);
  9    console.log(id);
 10    if(routes[i]._id==id) {
 11      return(routes[i]);
 12    }
 13  }
 14  return("not found");
 15}
 16function showRouteRightCard(route) {
 17  console.log(route);
 18  document.getElementById("rightCard-title").innerHTML = route.title;
 19
 20  if(route.description!=null) {
 21    document.getElementById("rightCard-text").innerHTML = "<i>"+route.description+"</i>";
 22  }else{
 23    document.getElementById("rightCard-text").innerHTML = "";
 24  }
 25  var html = `<img style='width:30px;height:30px;'
 26      src='statics/img/categories/transport_black.svg'
 27      title="CommonRoute"/>`;
 28  document.getElementById("rightCard-categories").innerHTML = html;
 29
 30  document.getElementById("rightCard-img").src="";
 31  document.getElementById("rightCard-img").className = "card-img-top hidden";
 32  document.getElementById("rightCard-web").href= "https://routes.fair.coop";
 33  document.getElementById("rightCard-web").innerHTML = "CommonRoutes website";
 34  document.getElementById("rightCard-mastodon").href="#";
 35  document.getElementById("rightCard-mastodon").innerHTML="";
 36  document.getElementById("rightCard-twitter").href="#";
 37  document.getElementById("rightCard-twitter").innerHTML="";
 38  document.getElementById("rightCard-facebook").href="#";
 39  document.getElementById("rightCard-facebook").innerHTML="";
 40  document.getElementById("rightCard-telegram").href="#";
 41  document.getElementById("rightCard-telegram").innerHTML="";
 42  document.getElementById("rightCard-email").href="#";
 43  document.getElementById("rightCard-email").innerHTML="";
 44  html = `
 45    <p>
 46      From: <b>` + route.from.name + `</b>
 47    </p>
 48    <p>
 49      To: <b>` + route.to.name + `</b>
 50    </p>
 51    <div class='float-right'>` + route.date + `</div>
 52  `;
 53  document.getElementById("rightCard-text").innerHTML += html;
 54  document.getElementById("rightCard").className+=" rightCard-show";
 55}
 56
 57function updateRoutesMarkers() {
 58  routesMarkers.clearLayers();
 59  for(var i=0; i<routes.length; i++) {
 60    console.log(routes[i]);
 61    var lat = routes[i].from.lat;
 62    var lon = routes[i].from.long;
 63    var icon = L.divIcon({
 64        className: 'markerInvisible',
 65        iconAnchor:   [20, 10],
 66        popupAnchor:  [-4, 0], // point from which the popup should open relative to the iconAnchor
 67        html: "<img src='statics/img/gps.svg' style='width:30px;height:30px;' class='routeMarker' />"
 68    });
 69    var marker = L.marker([lat, lon], {icon: icon});
 70    marker.id = routes[i]._id;
 71    marker.bindPopup("From: <b>"+routes[i].from.name+"</b><br>" + routes[i].date);
 72    marker.on('mouseover', function(e) {
 73      this.openPopup();
 74    });
 75    marker.on('mouseout', function(e) {
 76      this.closePopup();
 77    });
 78    marker.on('click', function(e) {
 79      var route = getRoute(this.id);
 80      showRouteRightCard(JSON.parse(JSON.stringify(route)));
 81    });
 82    routesMarkers.addLayer(marker);
 83
 84
 85    var lat = routes[i].to.lat;
 86    var lon = routes[i].to.long;
 87    var icon = L.divIcon({
 88        className: 'markerInvisible',
 89        iconAnchor:   [20, 10],
 90        popupAnchor:  [-4, 0], // point from which the popup should open relative to the iconAnchor
 91        html: "<img src='statics/img/gps.svg' style='width:30px;height:30px;' class='routeMarker' />"
 92    });
 93    var marker = L.marker([lat, lon], {icon: icon});
 94    marker.id = routes[i]._id;
 95    marker.bindPopup("To: <b>"+routes[i].to.name+"</b><br>" + routes[i].date);
 96    marker.on('mouseover', function(e) {
 97      this.openPopup();
 98    });
 99    marker.on('mouseout', function(e) {
100      this.closePopup();
101    });
102    marker.on('click', function(e) {
103      var route = getRoute(this.id);
104      showRouteRightCard(JSON.parse(JSON.stringify(route)));
105    });
106    routesMarkers.addLayer(marker);
107
108    var polyline = L.polyline([
109            [routes[i].from.lat, routes[i].from.long],
110            [routes[i].to.lat, routes[i].to.long]
111            ],
112            {
113                color: '#9575CD',
114                weight: 5,
115                opacity: .7,
116                dashArray: '20,15',
117                lineJoin: 'round'
118            }
119          ).addTo(routesMarkers);
120  }
121  map.addLayer(routesMarkers);
122}
123function showCommonRoutes() {
124  $.get(urlroutes+"travels?page=", function(data){
125    console.log(data);
126    routes = data;
127    console.log(routes);
128    updateRoutesMarkers();
129    // document.getElementById("loadingbar").innerHTML="";
130  });
131}