Skip to content

Instantly share code, notes, and snippets.

@d3noob d3noob/index.html
Last active Oct 8, 2019

Embed
What would you like to do?
Multiple tile layers in leaflet.js

An example of using leaflet.js with multiple tile layers.

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; ' + osmLink + ' Contributors',
landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var map = L.map('map', {
layers: [osmMap] // only add one!
})
.setView([-41.2858, 174.78682], 14);
var baseLayers = {
"OSM Mapnik": osmMap,
"Landscape": landMap
};
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
You can’t perform that action at this time.