diff --git a/web/js/bc.js b/web/js/bc.js
index 70a584d..9a45de8 100644
--- a/web/js/bc.js
+++ b/web/js/bc.js
@@ -1,14 +1,38 @@
 window.onload = function () {
+  index = 0
   var map = L.map('map',{
       minZoom: 2,
       maxZoom:5,
 
-      }).setView([38.0, -97.0], 3);
+      }).setView(latlong[index], 2);
 
   L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);
+      //the slider bar
+      $('#button').bind('click', function(){
+          $('#bar').animate({"width": '200'})
+          var info = $("<div id = info><p>this is where info goes</p><p>I will make a 'slide back' option later</p></div>")
+              .appendTo("#bar")
+          console.log('click')
+
+          })
 
+        $('#but').bind('click', function(){
+    console.log('click')
+    $('.leaflet-popup-content-wrapper').css({'height':'700px'})
+    $('#metadata-content').show()
+  })window.onload = function () {
+  index = 0
+  var map = L.map('map',{
+      minZoom: 2,
+      maxZoom:5,
+
+      }).setView(latlong[index], 2);
+
+  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
       //the slider bar
       $('#button').bind('click', function(){
           $('#bar').animate({"width": '200'})
@@ -18,17 +42,90 @@ window.onload = function () {
 
           })
 
+        $('#but').bind('click', function(){
+    console.log('click')
+    $('.leaflet-popup-content-wrapper').css({'height':'700px'})
+    $('#metadata-content').show()
+  })
+
   //function chain for drawing the markers and lines on the map.
-  index = 0
+  
+  delay = (400+timestamp_list[index])
+  clusterGroup = new L.MarkerClusterGroup();
+  AddStep(latlong[index], latlong[index+1], index)
+  
+
+  function AddMarkerCluster(marker, index){
+    clusterGroup.addLayer(marker)
+  }
+  function AddMarker(src, index){
+  var marker = L.marker([src[0], src[1]])
+  var popup = L.Popup({
+      maxHeight: 50})
+  var popupcontent = "<p>Hop no:"+hop_list[index]+"<br /><div id='metadata' $(this).hide()><button id='but'>show metadata</button><div id='metadata-content'>Server name:<br />"+server_name_list[index]+"<br />Network owner:<br />"+asn_list[index]+"</div></div>"
+  marker.bindPopup(popupcontent)
+  //marker.addTo(map).openPopup()
+   $('#metadata-content').hide()
+   AddMarkerCluster(marker)
+   map.addLayer(clusterGroup)
+  }
+
+  function AddStep(src, dest, index){
+  var b = new R.BezierAnim([src, dest], {})
+  map.addLayer(b)
+  AddMarker(src, index)
+  processStep(index)
+  //console.log(delay)
+  }
+
+  function processStep (index) {
+    map.panTo(latlong[index]);
+    if (index < counter_max-2) {
+      //console.log('hop#', hop_list[index])
+      changeFavicon('js/world/'+country_code_list[index]+'.png')
+      window.setTimeout(function () {
+      AddStep(latlong[index], latlong[index+1], index)
+     }, delay);}
+    else
+    if (index < counter_max-1){
+    //console.log('hop#', hop_list[index])
+    changeFavicon('js/world/'+country_code_list[index]+'.png')
+      window.setTimeout(function () {
+      AddStep(latlong[index], latlong[index], index)
+     }, delay);}
+
+    else
+    if (index = counter_max-1){
+      changeFavicon('js/world/'+country_code_list[index]+'.png')
+      //console.log('fin')
+      //map.fitBounds([bounds])
+      
+    }
+
+    index = index + 1
+    delay = (400 + timestamp_list[index])
+    }
+$('.leaflet-marker-icon').bind('click', function(){
+  console.log('clickkkk')
+})
+};
+
+
+
+  //function chain for drawing the markers and lines on the map.
+  
   delay = (400+timestamp_list[index])
 
   AddStep(latlong[index], latlong[index+1], index)
 
   function AddMarker(src, index){
-  var marker = L.marker([src[0], src[1]]).bindPopup(
-    "<p>Hop no:"+hop_list[index]+"<br /><a>show metadata</a></p><p id=metadata'>Server name:<br />"+server_name_list[index]+"<br />Network owner:<br />"+asn_list[index]+"</p>"
-    );
+  var marker = L.marker([src[0], src[1]])
+  var popup = L.Popup({
+      maxHeight: 50})
+  var popupcontent = "<p>Hop no:"+hop_list[index]+"<br /><div id='metadata' $(this).hide()><button id='but'>show metadata</button><div id='metadata-content'>Server name:<br />"+server_name_list[index]+"<br />Network owner:<br />"+asn_list[index]+"</div></div>"
+  marker.bindPopup(popupcontent)
   marker.addTo(map).openPopup()
+   $('#metadata-content').hide()
   }
 
   function AddStep(src, dest, index){
@@ -66,5 +163,8 @@ window.onload = function () {
     index = index + 1
     delay = (400 + timestamp_list[index])
     }
+$('.leaflet-marker-icon').bind('click', function(){
+  console.log('clickkkk')
+})
 };