datasetsss

1 files changed, 64 insertions, 72 deletions

diff --git a/client/map/index.js b/client/map/index.js
index b28abdea..d869ca33 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -1,82 +1,74 @@
 import L from 'leaflet'
 // import Snap from './snap.svg-min'
 
-let map = L.map('mapid').setView([25, 0], 2)
-L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
-  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
-    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
-    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-  maxZoom: 18,
-  id: 'mapbox.dark',
-  style: 'mapbox://styles/mapbox/dark-v9',
-  accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
-}).addTo(map)
-let points = read_json('citations')
-let address = read_json('address')
-let source = [0,0]
-if (address) {
-  source = address.slice(3,5).map(n => parseFloat(n))
-  console.log(address, source)
-}
+function build() {
+  let map = L.map('mapid').setView([25, 0], 2)
+  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
+      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
+      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    maxZoom: 18,
+    id: 'mapbox.dark',
+    style: 'mapbox://styles/mapbox/dark-v9',
+    accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
+  }).addTo(map)
+
+  let points = read_json('citations')
+  let address = read_json('address')
+  let source = [0, 0]
+  if (address) {
+    source = address.slice(3, 5).map(n => parseFloat(n))
+    console.log(address, source)
+  }
 
-var redDot = L.icon({
-  iconUrl: '../reddot.png',
-  iconSize:     [17, 17], // size of the icon
-  iconAnchor:   [8, 8], // point of the icon which will correspond to marker's location
-  popupAnchor:  [0, -5] // point from which the popup should open relative to the iconAnchor
-});
+  let redDot = L.icon({
+    iconUrl: '../reddot.png',
+    iconSize: [17, 17], // size of the icon
+    iconAnchor: [8, 8], // point of the icon which will correspond to marker's location
+    popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
+  })
 
-points.forEach(point => {
-  /*
-    [
-      "Face Alignment by Local Deep Descriptor Regression",
-      "Rutgers University",
-      [
-        "Rutgers University",
-        "40.47913175",
-        "-74.431688684404",
-        "Rutgers Cook Campus - North, Biel Road, New Brunswick, Middlesex County, New Jersey, 08901, USA"
+  points.forEach(point => {
+    const latlng = point.slice(5, 7).map(n => parseFloat(n))
+    if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return
+    const marker = L.marker(latlng, { icon: redDot }).addTo(map)
+    marker.bindPopup([
+      "<b>", point[0], "</b>",
+      "<br>",
+      point[1],
+    ].join(''))
+    // var arcStyle = {
+    //   color: 'rgb(245, 246, 150)',
+    //   fillColor: 'rgb(245, 246, 150)',
+    //   opacity: 0.8,
+    //   weight: '1',
+    //   vertices: 100,
+    // }
+    // L.Polyline.Arc(source, latlng, arcStyle).addTo(map);
+    // console.log(latlng)
+    const pathStyle = {
+      color: 'rgb(245, 246, 150)',
+      fillColor: 'rgb(245, 246, 150)',
+      opacity: 0.8,
+      weight: '1',
+    }
+    L.bezier({
+      path: [
+        [
+            { lat: source[0], lng: source[1] },
+            { lat: latlng[0], lng: latlng[1] },
+        ],
       ]
-    ]
-  */
+    }, pathStyle).addTo(map)
+  })
 
-  const latlng = point.slice(5,7).map(n => parseFloat(n))
-  // console.log(point)
-  if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return
-  var marker = L.marker(latlng, { icon: redDot }).addTo(map);
+  var marker = L.marker(source, { icon: redDot }).addTo(map);
   marker.bindPopup([
-    "<b>", point[0], "</b>",
-    "<br>",
-    point[1],
+    "<b>", document.querySelector('h2').innerText, "</b>",
+    '<br/>',
+    address[0]
   ].join(''))
-  // var arcStyle = {
-  //   color: 'rgb(245, 246, 150)',
-  //   fillColor: 'rgb(245, 246, 150)',
-  //   opacity: 0.8,
-  //   weight: '1',
-  //   vertices: 100,
-  // }
-  // L.Polyline.Arc(source, latlng, arcStyle).addTo(map);
-  // console.log(latlng)
-  var pathStyle = {
-    color: 'rgb(245, 246, 150)',
-    fillColor: 'rgb(245, 246, 150)',
-    opacity: 0.8,
-    weight: '1',
-  }
-  L.bezier({
-    path: [
-      [
-          {lat: source[0], lng: source[1]},
-          {lat: latlng[0], lng: latlng[1]},
-      ],
-    ]
-  }, pathStyle).addTo(map)
-})
 
-var marker = L.marker(source, { icon: redDot }).addTo(map);
-marker.bindPopup([
-  "<b>", document.querySelector('h2').innerText, "</b>",
-  '<br/>',
-  address[0]
-].join(''))
+}
+
+export default build