Scrape the current page for h-geo data and plot the result as a polyline on a Stamen watercolour map.

indyMap.js

(function (win, doc) {
  win.addEventListener('load', function() {
    var latlons = [];
    doc.querySelectorAll('.h-geo').forEach( function(geo) {
      var lat = geo.querySelector('data.p-latitude').getAttribute('value');
      var lon = geo.querySelector('data.p-longitude').getAttribute('value');
      if (lat && lon) {
        latlons.push([lat, lon]);
      }
    });
    if (latlons.length > 2) {
      var div = doc.createElement('div');
      div.setAttribute('id', 'map');
      div.style.height = '50vh';
      doc.querySelector('aside').appendChild(div);
      var link = doc.createElement('link');
      link.setAttribute('rel', 'stylesheet');
      link.setAttribute('href', '/leaflet/leaflet.css');
      doc.head.appendChild(link);
      var script = doc.createElement('script');
      script.setAttribute('src', '/leaflet/leaflet.js');
      doc.head.appendChild(script);
      script.addEventListener('load', function() {
        var map = L.map(document.getElementById('map'), { zoom: 12 });
        L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png').addTo(map);
        var polyline = L.polyline(latlons, {
          color: '#b52',
          weight: 5,
          opacity: 0.75
        }).addTo(map);
        map.fitBounds(polyline.getBounds());
        latlons.forEach( function(latlon) {
          L.circle([latlon[0], latlon[1]], {
            color: '#b52',
            weight: 10,
            opacity: 0.5
          }).addTo(map);
        });
      })
    }
  });
}(this, this.document));