incorporating leaflet..

1 files changed, 82 insertions, 0 deletions

diff --git a/client/map/index.js b/client/map/index.js
new file mode 100644
index 00000000..b28abdea
--- /dev/null
+++ b/client/map/index.js
@@ -0,0 +1,82 @@
+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)
+}
+
+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
+});
+
+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"
+      ]
+    ]
+  */
+
+  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);
+  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)
+  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(''))