Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active December 6, 2019 20:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d3noob/a9fcff8acd440397cbbcf2fe0d879816 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d3noob/a9fcff8acd440397cbbcf2fe0d879816 to your computer and use it in GitHub Desktop.
Download ZIP
Multiple tile layers in leaflet.js v1
Raw
.block
license: mit
Raw
README.md

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.

Raw
index.html
<!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 = '&copy; ' + osmLink + ' Contributors',
otmUrl = 'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
otmAttrib = '&copy; '+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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment