rivers by micahstubbs

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="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <script src="//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 = "//{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="//stamen.com">Stamen Design</a>, under <a href="//creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="//openstreetmap.org">OpenStreetMap</a>, under <a href="//creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
  });

  basemap.addTo(map);

  const geojsonUrl = '//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>