Scrape the current page for h-geo data and plot the result as a polyline on a Stamen watercolour map.
(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)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment