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.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 => {
  /*
    [
      "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[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)
})