Skip to content

Instantly share code, notes, and snippets.

@adactio adactio/indyMap.js
Created Oct 21, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.