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

Make map on narrative center in first, keep eth in scope

Browse Source
This commit is contained in:
Franc Camps-Febrer
2019-01-09 07:52:52 +01:00
committed by Lachlan Kermode
parent aa3da2d744
commit 7beb5f4039
3 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Map.jsx
View File

@@ -35,17 +35,19 @@ class Map extends React.Component {
}
componentWillReceiveProps(nextProps) {
if (hash(nextProps.app.selected) !== hash(this.props.app.selected)) {
// Fly to first of events selected
const eventPoint = (nextProps.app.selected.length > 0) ? nextProps.app.selected[0] : null;
if (eventPoint !== null && eventPoint.latitude && eventPoint.longitude) {
this.map.setView([eventPoint.latitude, eventPoint.longitude]);
}
}
if (hash(nextProps.app.mapBounds) !== hash(this.props.app.mapBounds) && nextProps.app.mapBounds !== null) {
this.map.fitBounds(nextProps.app.mapBounds);
// Set appropriate zoom for narrative
if (hash(nextProps.app.mapBounds) !== hash(this.props.app.mapBounds)
&& nextProps.app.mapBounds !== null) {
this.map.fitBounds(nextProps.app.mapBounds);
} else {
if (hash(nextProps.app.selected) !== hash(this.props.app.selected)) {
// Fly to first of events selected
const eventPoint = (nextProps.app.selected.length > 0) ? nextProps.app.selected[0] : null;
if (eventPoint !== null && eventPoint.latitude && eventPoint.longitude) {
this.map.setView([eventPoint.latitude, eventPoint.longitude]);
}
}
}
}

4
src/components/Timeline.jsx
View File

@@ -60,8 +60,8 @@ class Timeline extends React.Component {
}
if (hash(nextProps.app.selected) !== hash(this.props.app.selected)) {
if (nextProps.app.selected !== null) {
this.onCenterTime(parseDate(nextProps.app.selected[0].timestamp));
if (!!nextProps.app.selected && nextProps.app.selected.length > 0) {
this.onCenterTime(parseDate(nextProps.app.selected[0].timestamp));
}
}
}

17
src/reducers/app.js
View File

@@ -47,6 +47,7 @@ function updateNarrative(appState, action) {
minTime = parseDate('2100-01-01T00:00:00');
maxTime = parseDate('1900-01-01T00:00:00');
// Find max and mins coordinates of narrative events
action.narrative.steps.forEach(step => {
const stepTime = parseDate(step.timestamp);
if (stepTime < minTime) minTime = stepTime;
@@ -59,7 +60,23 @@ function updateNarrative(appState, action) {
if (+step.latitude > cornerBound1[0]) cornerBound1[0] = +step.latitude;
}
});
// Adjust bounds to center around first event, while keeping visible all others
// Takes first event, finds max ditance with first attempt bounds, and use this max distance
// on the other side, both in latitude and longitude
const first = action.narrative.steps[0];
if (!!first.longitude && !!first.latitude) {
const firstToLong0 = Math.abs(+first.longitude - cornerBound0[1]);
const firstToLong1 = Math.abs(+first.longitude - cornerBound1[1]);
const firstToLat0 = Math.abs(+first.latitude - cornerBound0[0]);
const firstToLat1 = Math.abs(+first.latitude - cornerBound1[0]);
if (firstToLong0 > firstToLong1) cornerBound1[1] = +first.longitude + firstToLong0;
if (firstToLong0 < firstToLong1) cornerBound0[1] = +first.longitude - firstToLong1;
if (firstToLat0 > firstToLat1) cornerBound1[0] = +first.latitude + firstToLat0;
if (firstToLat0 < firstToLat1) cornerBound0[0] = +first.latitude - firstToLat1;
}
// Add some buffer on both sides of the time extent
minTime = new Date(minTime.getTime() - Math.abs((maxTime - minTime) / 10));
maxTime = new Date(maxTime.getTime() + Math.abs((maxTime - minTime) / 10));
}