From 948174f04d9dea93271bec62283b1c09e687e157 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 16 Dec 2018 17:47:21 +0100
Subject: map and citations workin

---
 client/map/index.js          | 115 +++++++++++++++++++++++--------------------
 client/map/leaflet.bezier.js |   7 +++
 2 files changed, 68 insertions(+), 54 deletions(-)

(limited to 'client/map')

diff --git a/client/map/index.js b/client/map/index.js
index d869ca33..e877cb62 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -1,8 +1,56 @@
 import L from 'leaflet'
-// import Snap from './snap.svg-min'
+import './leaflet.bezier'
 
-function build() {
-  let map = L.map('mapid').setView([25, 0], 2)
+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>,' +
@@ -13,62 +61,21 @@ function build() {
     accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
   }).addTo(map)
 
-  let points = read_json('citations')
-  let address = read_json('address')
+  let { address } = data
+  console.log(address)
   let source = [0, 0]
   if (address) {
     source = address.slice(3, 5).map(n => parseFloat(n))
-    console.log(address, source)
+    // console.log(map, address, source)
+    console.log(source)
   }
 
-  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 => {
-    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)
+  citations.forEach(point => {
+    const latlng = [point.lat, point.lng]
+    if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
+    addMarker(map, latlng, point[0], point[1])
+    addArc(map, source, latlng)
   })
 
-  var marker = L.marker(source, { icon: redDot }).addTo(map);
-  marker.bindPopup([
-    "<b>", document.querySelector('h2').innerText, "</b>",
-    '<br/>',
-    address[0]
-  ].join(''))
-
+  addMarker(map, source, document.querySelector('h2').innerText, address[0])
 }
-
-export default build
diff --git a/client/map/leaflet.bezier.js b/client/map/leaflet.bezier.js
index 387e0717..02adbe7f 100644
--- a/client/map/leaflet.bezier.js
+++ b/client/map/leaflet.bezier.js
@@ -1,3 +1,5 @@
+import L from 'leaflet'
+
 L.SVG.include({
     _updatecurve: function (layer) {
         let svg_path = this._curvePointsToPath(layer._points);
@@ -251,4 +253,9 @@ L.bezier = function (config, options) {
 
 };
 
+function noop() {}
 
+export {
+    Bezier,
+    noop,
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2