Skip to content

Instantly share code, notes, and snippets.

@mgax

mgax/index.html

Last active May 30, 2016 16:27
Show Gist options
  • Save mgax/7dbe824d56f933239b8ac284d2bfd92c to your computer and use it in GitHub Desktop.
Save mgax/7dbe824d56f933239b8ac284d2bfd92c to your computer and use it in GitHub Desktop.
Download ZIP
cartodb basemaps
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<title>CartoDB Basemaps preview</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%; position: fixed; left:0; top:0; overflow:hidden;"></div>
<script>
var tileUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/{name}/{z}/{x}/{y}.png';
var attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
var light_all = L.tileLayer(tileUrl, {name: 'light_all', attribution: attrib});
var light_nolabels = L.tileLayer(tileUrl, {name: 'light_nolabels', attribution: attrib});
var light_only_labels = L.tileLayer(tileUrl, {name: 'light_only_labels', attribution: attrib});
var dark_all = L.tileLayer(tileUrl, {name: 'dark_all', attribution: attrib});
var dark_nolabels = L.tileLayer(tileUrl, {name: 'dark_nolabels', attribution: attrib});
var dark_only_labels = L.tileLayer(tileUrl, {name: 'dark_only_labels', attribution: attrib});
var map = L.map('map', {
center: [49.25, -123.1],
zoom: 11,
layers: [light_all]
});
var maplayers = {
"Positron": light_all,
"Positron (no labels)": light_nolabels,
"Positron (only labels)": light_only_labels,
"Dark Matter": dark_all,
"Dark Matter (no labels)": dark_nolabels,
"Dark Matter (only labels)": dark_only_labels,
};
L.control.layers(maplayers).addTo(map);
var hash = new L.Hash(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment