rivers

a fork of enjalot's bl.ock WWSD #1: Leaflet starter

handcrafted in Berkeley, California with blockbuilder.org

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

basemap.addTo(map);

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

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js