From d8cb6f4ba8d8e1a01182bc594f1dc4665c4d3890 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 13 Dec 2018 12:05:50 +0100 Subject: [PATCH 1/4] Fix updateSVG for FF in map --- src/js/map/map.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/js/map/map.js b/src/js/map/map.js index 3e30e93..ee16867 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -129,18 +129,17 @@ Stop and start the development process in terminal after you have added your tok } function updateSVG() { - const boundaries = getSVGBoundaries(); - const { - topLeft, - bottomRight - } = boundaries; - svg.attr('width', bottomRight.x - topLeft.x + 200) - .attr('height', bottomRight.y - topLeft.y + 200) - .style('left', `${topLeft.x - 100}px`) - .style('top', `${topLeft.y - 100}px`); + const boundingClient = d3.select(`#${ui.dom.map}`).node().getBoundingClientRect(); + + let WIDTH = boundingClient.width; + let HEIGHT = boundingClient.height; g.attr('transform', `translate(${-(topLeft.x - 100)},${-(topLeft.y - 100)})`); + svg.attr('width', WIDTH) + .attr('height', HEIGHT) + .attr('style', `left: ${-transformX}px; top: ${-transformY}px`); + g.selectAll('.location').attr('transform', (d) => { const newPoint = projectPoint([+d.latitude, +d.longitude]); return `translate(${newPoint.x},${newPoint.y})`; From 17e14dee2a6b2682eeb0358986610b2332ef8cbd Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 13 Dec 2018 12:21:14 +0100 Subject: [PATCH 2/4] Improve transformY alignment on svg layer --- src/js/map/map.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/map/map.js b/src/js/map/map.js index ee16867..286af42 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -123,8 +123,8 @@ Stop and start the development process in terminal after you have added your tok function getSVGBoundaries() { return { - topLeft: projectPoint(maxBoundaries[0]), - bottomRight: projectPoint(maxBoundaries[1]) + transformX: +transform.split(',')[4], + transformY: +transform.split(',')[5].substring(0, transform.split(',')[5].length - 1) } } From ac1f20fd1d50cf1bc952be3337779e8c31694174 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 13 Dec 2018 12:24:17 +0100 Subject: [PATCH 3/4] Remove console --- src/js/map/map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/map/map.js b/src/js/map/map.js index 286af42..1f26094 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -124,7 +124,7 @@ Stop and start the development process in terminal after you have added your tok function getSVGBoundaries() { return { transformX: +transform.split(',')[4], - transformY: +transform.split(',')[5].substring(0, transform.split(',')[5].length - 1) + transformY: +transform.split(',')[5].split(')')[0] } } From fbec206f10979eb777fcb6b337c2314920e62236 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 13 Dec 2018 12:47:13 +0100 Subject: [PATCH 4/4] Add svg transform to all locations as well --- src/js/map/map.js | 46 +++++++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/src/js/map/map.js b/src/js/map/map.js index 1f26094..41b1bb6 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -118,10 +118,23 @@ Stop and start the development process in terminal after you have added your tok function projectPoint(location) { const latLng = new L.LatLng(location[0], location[1]); - return lMap.latLngToLayerPoint(latLng); + return { + x: lMap.latLngToLayerPoint(latLng).x + getSVGBoundaries().transformX, + y: lMap.latLngToLayerPoint(latLng).y + getSVGBoundaries().transformY + }; } 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] @@ -134,7 +147,8 @@ Stop and start the development process in terminal after you have added your tok let WIDTH = boundingClient.width; let HEIGHT = boundingClient.height; - g.attr('transform', `translate(${-(topLeft.x - 100)},${-(topLeft.y - 100)})`); + // Offset with leaflet map transform boundaries + const { transformX, transformY } = getSVGBoundaries(); svg.attr('width', WIDTH) .attr('height', HEIGHT) @@ -147,14 +161,9 @@ 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("zoom viewreset move", updateSVG); + lMap.on("zoomend viewreset moveend", updateSVG); /** * Returns latitud / longitude @@ -331,10 +340,13 @@ Stop and start the development process in terminal after you have added your tok } } - const sequenceLine = d3.line() + /*const sequenceLine = d3.line() .x(d => getCoords(d).x) - .y(d => getCoords(d).y) + .y(d => getCoords(d).y)*/ + const sequenceLine = d3.line() + .x(d => getCoords(d).x + getSVGBoundaries().transformX) + .y(d => getCoords(d).y + getSVGBoundaries().transformY); /** * Clears existing narrative layer * Renders all narrativ as paths @@ -406,13 +418,13 @@ Stop and start the development process in terminal after you have added your tok } /** - * Renders events on the map: takes data, and enters, updates and exits - */ - function renderDomain () { - renderSites(); - renderEvents(); - renderNarratives(); - } + * Renders events on the map: takes data, and enters, updates and exits + */ + function renderDomain () { + renderSites(); + renderNarratives(); + renderEvents(); + } function renderSelectedAndHighlight () { renderSelected(); renderHighlighted();