Last active
April 10, 2017 18:36
-
-
Save rfriberg/169ad43af27511c5bf4ef4f32a77d406 to your computer and use it in GitHub Desktop.
Leaflet Layers Control with Tangram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Layers Control test</title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> | |
| <style> | |
| html,body{margin: 0; padding: 0} | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> | |
| <script src="https://mapzen.com/tangram/tangram.min.js"></script> | |
| <script> | |
| var manhattan = [40.7510, -73.9783]; | |
| var map = L.map('map'); | |
| map.setView(manhattan, 13); | |
| var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + | |
| '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="http://mapbox.com">Mapbox</a>', | |
| mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', | |
| mapzenAttr = '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | © OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>'; | |
| var streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); | |
| var watercolor = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', | |
| subdomains: 'abcd', | |
| minZoom: 1, | |
| maxZoom: 16, | |
| ext: 'png' | |
| }); | |
| var darkmatter = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>', | |
| subdomains: 'abcd', | |
| maxZoom: 19 | |
| }); | |
| var opentopomap = L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 17, | |
| attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' | |
| }); | |
| var walkabout = Tangram.leafletLayer({ | |
| scene: 'https://mapzen.com/carto/walkabout-style/2/walkabout-style.yaml', | |
| attribution: mapzenAttr | |
| }); | |
| var refill = Tangram.leafletLayer({ | |
| scene: 'https://mapzen.com/carto/refill-style/4/refill-style.yaml', | |
| attribution: mapzenAttr | |
| }); | |
| var refill = Tangram.leafletLayer({ | |
| scene: 'https://mapzen.com/carto/refill-style/4/refill-style.yaml', | |
| attribution: mapzenAttr | |
| }); | |
| // Set up Layers Control | |
| var baseLayers = { | |
| "Refill (Mapzen)": refill, | |
| "Walkabout (Mapzen)": walkabout, | |
| "Streets (Mapbox)": streets, | |
| "Watercolor (Stamen)": watercolor, | |
| "DarkMatter (Carto)": darkmatter, | |
| "OpenTopoMap": opentopomap | |
| }; | |
| L.control.layers(baseLayers).addTo(map); | |
| // Set initial layer | |
| refill.addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment