This is an example of using multiple basemap tiles on Leaflet.
The detailed explanation can be found on my blog.
Camilo Cruz, 2017.
-
-
Save zautomata/b93d8a1b3a7337f8c992bc17a88e9abc to your computer and use it in GitHub Desktop.
Leaflet.js multiple basemap tiles example
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Multiple tiles</title> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 600px; height: 400px"></div> | |
| <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | |
| <script type="text/javascript"> | |
| //OSM tiles attribution and URL | |
| var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>'; | |
| var osmURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; | |
| var osmAttrib = '© ' + osmLink; | |
| //Carto tiles attribution and URL | |
| var cartoLink = '<a href="http://cartodb.com/attributions">CartoDB</a>'; | |
| var cartoURL = 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'; | |
| var cartoAttrib = '© ' + osmLink + ' © ' + cartoLink; | |
| //Stamen Toner tiles attribution and URL | |
| var stamenURL = 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}'; | |
| var stamenAttrib = '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>'; | |
| //Creation of map tiles | |
| var osmMap = L.tileLayer(osmURL, {attribution: osmAttrib}); | |
| var cartoMap = L.tileLayer(cartoURL, {attribution: cartoAttrib}); | |
| var stamenMap = L.tileLayer(stamenURL,{ | |
| attribution: stamenAttrib, | |
| subdomains: 'abcd', | |
| minZoom: 0, | |
| maxZoom: 20, | |
| ext: 'png' | |
| }); | |
| //Map creation | |
| var map = L.map('map',{ | |
| layers: [osmMap] | |
| }).setView([-41.2858, 174.78682], 14); | |
| //Base layers definition and addition | |
| var baseLayers = { | |
| "OSM Mapnik": osmMap, | |
| "Carto DarkMatter": cartoMap, | |
| "Stamen Toner": stamenMap | |
| }; | |
| //Add baseLayers to map as control layers | |
| L.control.layers(baseLayers).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment