arcs on dark maps

1 files changed, 46 insertions, 12 deletions

diff --git a/reports/map.js b/reports/map.js
index bf268d26..b1b896e7 100644
--- a/reports/map.js
+++ b/reports/map.js
@@ -1,16 +1,27 @@
-let mymap = L.map('mapid').setView([25, 0], 2);
-L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg', {
+function read_json(selector) {
+  try {
+    return JSON.parse(document.querySelector('#' + selector).innerText)
+  } catch(e) {
+    console.log("json error!")
+    return []
+  }
+}
+
+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.streets',
-    accessToken: 'your.mapbox.access.token'
-}).addTo(mymap);
-let points;
-try {
-  points = JSON.parse(document.querySelector('script[type="text/json"]').innerText)
-} catch(e) {
-  console.log("json error!")
-  points = []
+    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[0] = parseFloat(address[1])
+  source[1] = parseFloat(address[2])
+  console.log(address, source)
 }
 points.forEach(point => {
   /*
@@ -26,10 +37,33 @@ points.forEach(point => {
     ]
   */
 
-  var marker = L.marker(point[2].slice(1,3)).addTo(mymap);
+  const latlng = point[2].slice(1,3)
+  var marker = L.marker(latlng).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);
+  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)
 })
\ No newline at end of file