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

Adjust dimensions of sites-layer innarrative mode

Browse Source
This commit is contained in:
Franc Camps-Febrer
2018-12-19 11:41:42 +01:00
parent 301891e143
commit c416c12698
4 changed files with 31 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Map.jsx
View File

@@ -40,8 +40,6 @@ class Map extends React.Component {
.attr('width', width)
.attr('height', height);
this.g = this.svg.append('g');
this.state.map.on('zoomstart', () => {
this.svg.classed('hide', true);
});
@@ -49,7 +47,7 @@ class Map extends React.Component {
this.svg.classed('hide', false);
});
this.mapLogic = new MapLogic(this.state.map, this.svg, this.g, this.props.app, this.props.ui, this.props.methods)
this.mapLogic = new MapLogic(this.state.map, this.svg, this.props.app, this.props.ui)
this.mapLogic.update(this.props.app)
this.setState({ isInitialized: true })
@@ -66,9 +64,6 @@ class Map extends React.Component {
initializeMap() {
/**
* Creates a Leaflet map and a tilelayer for the map background
* @param {string} id: DOM element to create map onto
* @param {array} center: [lat, long] coordinates the map will be centered on
* @param {number} zoom: zoom level
*/
const map =
L.map(this.props.mapId)
@@ -99,10 +94,18 @@ class Map extends React.Component {
map.keyboard.disable();
map.on("move", () => this.updateSVG());
map.on("zoomend viewreset moveend", () => this.updateSVG());
this.addResizeListener();
this.setState({ map });
}
addResizeListener() {
window.addEventListener('resize', () => {
this.updateSVG();
});
}
getSVGBoundaries() {
const mapNode = d3.select('.leaflet-map-pane').node();
if (mapNode === null) return { transformX: 0, transformY: 0 };
@@ -122,10 +125,10 @@ class Map extends React.Component {
}
updateSVG() {
//const boundingClient = d3.select(`#${this.props.mapId}`).node().getBoundingClientRect();
const boundingClient = d3.select(`#${this.props.mapId}`).node().getBoundingClientRect();
//let WIDTH = boundingClient.width;
//let HEIGHT = boundingClient.height;
let WIDTH = boundingClient.width;
let HEIGHT = boundingClient.height;
// Offset with leaflet map transform boundaries
const { transformX, transformY } = this.getSVGBoundaries();
@@ -135,9 +138,9 @@ class Map extends React.Component {
mapTransformY: transformY
})
/*this.svg.attr('width', WIDTH)
this.svg.attr('width', WIDTH)
.attr('height', HEIGHT)
.attr('style', `left: ${-transformX}px; top: ${-transformY}px`);*/
.attr('style', `left: ${-transformX}px; top: ${-transformY}px`);
}
renderSites() {