render map lines in different colors

2 files changed, 43 insertions, 16 deletions

diff --git a/client/map/index.js b/client/map/index.js
index b744c8e2..2a6686be 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -1,13 +1,35 @@
 import L from 'leaflet'
 import './leaflet.bezier'
 
-const arcStyle = {
-  color: 'rgb(245, 246, 150)',
-  fillColor: 'rgb(245, 246, 150)',
-  opacity: 0.8,
-  weight: '1',
+const arcStyles = {
+  'edu': {
+    color: 'rgb(245, 246, 150)',
+    fillColor: 'rgb(245, 246, 150)',
+    opacity: 0.5,
+    weight: '1',
+  },
+  'company': {
+    color: 'rgb(50, 100, 246)',
+    fillColor: 'rgb(50, 100, 246)',
+    opacity: 1.0,
+    weight: '2',
+  },
+  'gov': {
+    color: 'rgb(245, 150, 100)',
+    fillColor: 'rgb(245, 150, 150)',
+    opacity: 1.0,
+    weight: '2',
+  },
+  'mil': {
+    color: 'rgb(245, 0, 0)',
+    fillColor: 'rgb(245, 0, 0)',
+    opacity: 1.0,
+    weight: '2',
+  },
 }
 
+const sortOrder = ['edu', 'company', 'gov', 'mil']
+
 const redDot = L.icon({
   iconUrl: '/assets/img/reddot.png',
   iconSize: [17, 17], // size of the icon
@@ -25,7 +47,7 @@ function addMarker(map, latlng, title, subtext) {
   return marker
 }
 
-function addArc(map, src, dest) {
+function addArc(map, src, dest, arcStyle) {
   L.bezier({
     path: [
       [
@@ -38,9 +60,8 @@ function addArc(map, src, dest) {
 
 export default function append(el, payload) {
   const { data } = payload
-  let { paper, address } = data
+  let { paper, address, citations } = data
   let source = [0, 0]
-  const data.citations
 
   let map = L.map(el).setView([25, 0], 2)
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
@@ -54,16 +75,20 @@ export default function append(el, payload) {
   }).addTo(map)
 
   if (address) {
-    source = [address.lat, address.lng]
+    source = [address.lat, address.lng].map(n => parseFloat(n))
   }
 
-  citations.forEach(point => {
-    const latlng = [point.lat, point.lng]
+  citations.sort((a,b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
+  .forEach(citation => {
+    const address = citation.addresses[0]
+    const latlng = [address.lat, address.lng].map(n => parseFloat(n))
     if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
-    addMarker(map, latlng, point.title, point.address)
-    addArc(map, source, latlng)
+    addMarker(map, latlng, citation.title, address.name)
+    addArc(map, source, latlng, arcStyles[address.type])
   })
 
+  console.log(paper)
+
   const rootMarker = addMarker(map, source, paper.title, paper.address)
   rootMarker.openPopup()
 }
diff --git a/client/tables.js b/client/tables.js
index 9e134eb6..70ab5971 100644
--- a/client/tables.js
+++ b/client/tables.js
@@ -13,6 +13,7 @@ const datasetColumns = [
 const citationsColumns = [
   { title: 'Title', field: 'title', sorter: 'string' },
   { title: 'Institution', field: 'institution', sorter: 'string' },
+  { title: 'Year', field: 'year', sorter: 'number' },
 ]
 
 function getColumns(payload) {
@@ -33,9 +34,10 @@ function getColumns(payload) {
 
 function getCitations(dataset) {
   console.log(dataset.citations)
-  return dataset.citations.map(c => ({
-    title: c[0],
-    institution: c[2],
+  return dataset.citations.map(citation => ({
+    title: citation['title'],
+    institution: citation['addresses'][0]['name'],
+    year: citation['year'],
   }))
 }