Revert "Refactor Timeline component and timeline, mapping logic"

src/js/map/map.js

@@ -125,16 +125,6 @@ Stop and start the development process in terminal after you have added your tok
   }
 
   function getSVGBoundaries() {
-    const mapNode = d3.select('.leaflet-map-pane').node();
-
-    // We'll get the transform of the leaflet container,
-    // which will let us offset the SVG by the same quantity
-    const transform = window
-      .getComputedStyle(mapNode)
-      .getPropertyValue('transform');
-
-    // However getComputedStyle returns an awkward string of the format
-    // matrix(0, 0, 1, 0, 0.56523, 123123), hence this awkwardness
     return {
       transformX: +transform.split(',')[4],
       transformY: +transform.split(',')[5].split(')')[0]
@@ -147,8 +137,7 @@ Stop and start the development process in terminal after you have added your tok
     let WIDTH = boundingClient.width;
     let HEIGHT = boundingClient.height;
 
-    // Offset with leaflet map transform boundaries
-    const { transformX, transformY } = getSVGBoundaries();
+    g.attr('transform', `translate(${-(topLeft.x - 100)},${-(topLeft.y - 100)})`);
 
     svg.attr('width', WIDTH)
       .attr('height', HEIGHT)
@@ -161,9 +150,14 @@ Stop and start the development process in terminal after you have added your tok
 
     g.selectAll('.narrative')
       .attr('d', sequenceLine);
+
+    const busLine = d3.line()
+      .x(d => lMap.latLngToLayerPoint(d).x)
+      .y(d => lMap.latLngToLayerPoint(d).y)
+      .curve(d3.curveMonotoneX);
   }
 
-  lMap.on("zoomend viewreset moveend", updateSVG);
+  lMap.on("zoom viewreset move", updateSVG);
 
   /**
    * Returns latitud / longitude