From 020193100015baf42a5a056292737a503022aaf6 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Mon, 12 Nov 2018 15:18:32 -0500 Subject: [PATCH] Pass narratives and render in map --- src/components/Dashboard.jsx | 3 ++ src/components/Timeline.jsx | 2 ++ src/components/View2D.jsx | 2 ++ src/components/Viewport.jsx | 1 + src/js/map/map.js | 68 +++++++++++++++++++++--------------- 5 files changed, 47 insertions(+), 29 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index b764983..0fb2905 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -113,6 +113,7 @@ class Dashboard extends React.Component { return (
item)} + narratives={this.props.domain.narratives} categoryGroups={this.props.domain.categoryGroups} range={this.props.app.filters.range} @@ -214,6 +216,7 @@ function mapStateToProps(state) { categoryGroups: selectors.getCategoryGroups(state), sites: selectors.getSites(state), tags: selectors.getAllTags(state), + narratives: selectors.getFilteredNarratives(state), notifications: state.domain.notifications, }), diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 48471b5..a7e3157 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -12,6 +12,7 @@ class Timeline extends React.Component { componentDidMount() { const domain = { events: this.props.events, + narratives: this.props.narratives, categoryGroups: this.props.categoryGroups } const app = { @@ -37,6 +38,7 @@ class Timeline extends React.Component { componentWillReceiveProps(nextProps) { const domain = { events: nextProps.events, + narratives: nextProps.narratives, categoryGroups: nextProps.categoryGroups } diff --git a/src/components/View2D.jsx b/src/components/View2D.jsx index da35994..c617f74 100644 --- a/src/components/View2D.jsx +++ b/src/components/View2D.jsx @@ -11,6 +11,7 @@ class View2D extends React.Component { componentDidMount() { const domain = { locations: this.props.locations, + narratives: this.props.narratives, sites: this.props.sites, categoryGroups: this.props.categoryGroups } @@ -34,6 +35,7 @@ class View2D extends React.Component { componentWillReceiveProps(nextProps) { const domain = { locations: nextProps.locations, + narratives: nextProps.narratives, sites: nextProps.sites, categoryGroups: nextProps.categoryGroups } diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx index 78e17d6..e3620bb 100644 --- a/src/components/Viewport.jsx +++ b/src/components/Viewport.jsx @@ -12,6 +12,7 @@ class Viewport extends React.Component { return ( lMap.latLngToLayerPoint(d).x) .y(d => lMap.latLngToLayerPoint(d).y) @@ -268,6 +272,7 @@ Stop and start the development process in terminal after you have added your tok .attr('class', 'location') .attr('transform', (d) => { d.LatLng = new L.LatLng(+d.latitude, +d.longitude); + console.log(lMap.latLngToLayerPoint(d.LatLng)) return `translate(${lMap.latLngToLayerPoint(d.LatLng).x}, ${lMap.latLngToLayerPoint(d.LatLng).y})`; }) @@ -324,37 +329,40 @@ Stop and start the development process in terminal after you have added your tok } } - // NB: is this a function to be removed for future features? - /** - * Creats a marker for an eventPoint along a path - * @param {Object} eventPoint: data for an evenPoint - time, loc, tags, etc - * @param {number} step: the portion of the entire path this event corresponds to - */ - function createPathEventMarker(eventPoint, step) { - const { - latitude, - longitude - } = getEventLocation(eventPoint); - const pathEventMarker = L.circleMarker( - [latitude, longitude], { - color: ui.colors.DARKGREY, - fill: ui.colors.DARKGREY, - weight: 2, - fillOpacity: 0.6, - radius: 10 * step, - }, - ); - // Add marker event handlers - pathEventMarker.bindPopup(''); - pathEventMarker.on('popupopen', () => { - select([eventPoint]); - }); - pathEventMarker.on('popupclose', () => { - select(); - }); + const getCoords = (d) => { + d.LatLng = new L.LatLng(+d.latitude, +d.longitude); + return { + x: lMap.latLngToLayerPoint(d.LatLng).x, + y: lMap.latLngToLayerPoint(d.LatLng).y + } + } - return pathEventMarker; + const sequenceLine = d3.line() + .x(d => getCoords(d).x) + .y(d => getCoords(d).y) + + /** + * Clears existing narrative layer + * Renders all narrativ as paths + * Adds eventlayer to map + */ + + function renderNarratives() { + const narrativesDom = g.selectAll('.narrative') + .data(domain.narratives.map(d => d.steps)) + + narrativesDom + .exit() + .remove(); + + narrativesDom + .enter().append('path') + .attr('class', 'narrative') + .attr('d', sequenceLine) + .style('stroke-width', 3) + .style('stroke', '#fff') + .style('fill', 'none'); } /** @@ -366,6 +374,7 @@ Stop and start the development process in terminal after you have added your tok if (hash(domain) !== hash(newDomain)) { domain.locations = newDomain.locations; + domain.narratives = newDomain.narratives; domain.categoryGroups = newDomain.categoryGroups; domain.sites = newDomain.sites; renderDomain(); @@ -386,6 +395,7 @@ Stop and start the development process in terminal after you have added your tok function renderDomain () { renderSites(); renderEvents(); + renderNarratives(); } function renderSelectedAndHighlight () { renderSelected();