bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 13:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add svg transform to all locations as well

Browse Source
This commit is contained in:
Franc Camps-Febrer
2018-12-13 12:47:13 +01:00
parent ac1f20fd1d
commit fbec206f10
1 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/js/map/map.js
View File

@@ -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();