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="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 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