Merge branch 'master' of github.com:adamhrv/megapixels_dev

1 files changed, 81 insertions, 0 deletions

diff --git a/client/map/index.js b/client/map/index.js
new file mode 100644
index 00000000..788894f9
--- /dev/null
+++ b/client/map/index.js
@@ -0,0 +1,81 @@
+import L from 'leaflet'
+import './leaflet.bezier'
+
+function getCitations(dataset) {
+  // console.log(dataset.citations)
+  return dataset.citations.map(c => ({
+    title: c[0],
+    location: c[2],
+    lat: c[5],
+    lng: c[6],
+    type: c[7],
+  }))
+}
+
+const arcStyle = {
+  color: 'rgb(245, 246, 150)',
+  fillColor: 'rgb(245, 246, 150)',
+  opacity: 0.8,
+  weight: '1',
+}
+
+const redDot = L.icon({
+  iconUrl: '/assets/img/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
+})
+
+function addMarker(map, latlng, title, subtext) {
+  const marker = L.marker(latlng, { icon: redDot }).addTo(map)
+  marker.bindPopup([
+    "<b>", title, "</b>",
+    "<br>",
+    subtext,
+  ].join(''))
+}
+function addArc(map, src, dest) {
+  L.bezier({
+    path: [
+      [
+        { lat: src[0], lng: src[1] },
+        { lat: dest[0], lng: dest[1] },
+      ],
+    ]
+  }, arcStyle).addTo(map)
+}
+
+export default function append(el, payload) {
+  const { cmd, data } = payload
+  const citations = getCitations(data)
+
+  // console.log(el)
+  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}', {
+    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 { address } = data
+  console.log(address)
+  let source = [0, 0]
+  if (address) {
+    source = address.slice(3, 5).map(n => parseFloat(n))
+    // console.log(map, address, source)
+    console.log(source)
+  }
+
+  citations.forEach(point => {
+    const latlng = [point.lat, point.lng]
+    if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
+    addMarker(map, latlng, point.title, point.location)
+    addArc(map, source, latlng)
+  })
+
+  addMarker(map, source, document.querySelector('h2').innerText, address[0])
+}