Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active July 19, 2016 20:15
Show Gist options
  • Save micahstubbs/c8a068042c204c7676a0a5d8e80bd8ec to your computer and use it in GitHub Desktop.
Save micahstubbs/c8a068042c204c7676a0a5d8e80bd8ec to your computer and use it in GitHub Desktop.
Download ZIP
rivers
Raw
.block
border: no,
height: 1000,
license: CC0-1.0
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map {
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script lang='babel' type='text/babel'>
const map = L.map('map').setView([37, -90], 6);
const tonerUrl = "http://{S}tile.stamen.com/toner-lite/{Z}/{X}/{Y}.png";
const url = tonerUrl.replace(/({[A-Z]})/g, s => s.toLowerCase());
const basemap = L.tileLayer(url, {
subdomains: ['', 'a.', 'b.', 'c.', 'd.'],
minZoom: 0,
maxZoom: 20,
type: 'png',
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
});
basemap.addTo(map);
const geojsonUrl = 'http://enjalot.github.io/wwsd/data/world/ne_50m_rivers_lake_centerlines.geojson';
d3.json(geojsonUrl, (err, geojson) => {
console.log('geojson data:', geojson);
L.geoJson(geojson, {
style() {
return {
color: '#2b8cbe',
opacity: 0.7,
weight: 3,
};
}
}).addTo(map);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment