An example of using leaflet.js with multiple tile layers.
This graph is part of the code samples for the update to the book Leaflet Tips and Tricks to version 1 of leaflet.js.
license: mit |
An example of using leaflet.js with multiple tile layers.
This graph is part of the code samples for the update to the book Leaflet Tips and Tricks to version 1 of leaflet.js.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Simple Leaflet Map</title> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" | |
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" | |
crossorigin=""/></head> | |
<body> | |
<div id="map" style="width: 600px; height: 400px"></div> | |
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" | |
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" | |
crossorigin=""></script> | |
<script> | |
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>', | |
otmLink = '<a href="http://opentopomap.org/">OpenTopoMap</a>'; | |
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | |
osmAttrib = '© ' + osmLink + ' Contributors', | |
otmUrl = 'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', | |
otmAttrib = '© '+otmLink+' Contributors'; | |
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}), | |
otmMap = L.tileLayer(otmUrl, {attribution: otmAttrib}); | |
var map = L.map('map', { | |
layers: [osmMap] // only add one! | |
}) | |
.setView([-41.2858, 174.78682], 14); | |
var baseLayers = { | |
"OSM Mapnik": osmMap, | |
"Topogrophy": otmMap | |
}; | |
L.control.layers(baseLayers).addTo(map); | |
</script> | |
</body> | |
</html> |