diff --git a/src/js/map/map.js b/src/js/map/map.js index 41b1bb6..78c2e4e 100644 --- a/src/js/map/map.js +++ b/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