80 lines
2.4 KiB
HTML
Executable File
80 lines
2.4 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Leaflet Layers Tree Basic Demo</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet-src.js" crossorigin=""></script>
|
|
|
|
<style type="text/css">
|
|
html, body { width: 100%; height: 100%; margin: 0; }
|
|
#map { width: 100%; height: 100%; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
<link rel="stylesheet" href="../L.Control.Layers.Tree.css" crossorigin=""/>
|
|
<script src="../L.Control.Layers.Tree.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var center = [40, 0];
|
|
|
|
// Define some base layers
|
|
var osm = L.tileLayer(
|
|
'//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
{attribution: '© OpenStreetMap contributors'}
|
|
);
|
|
|
|
var osmBw = L.tileLayer(
|
|
'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
|
|
{attribution: '© OpenStreetMap contributors'}
|
|
);
|
|
|
|
var otopomap = L.tileLayer(
|
|
'//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
|
|
{attribution: '© OpenStreetMap contributors. OpenTopoMap.org'}
|
|
);
|
|
|
|
var thunderAttr = {attribution: '© OpenStreetMap contributors. Tiles courtesy of Andy Allan'}
|
|
var transport = L.tileLayer(
|
|
'//{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
|
|
thunderAttr
|
|
);
|
|
|
|
var cycle = L.tileLayer(
|
|
'//{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
|
|
thunderAttr
|
|
);
|
|
|
|
// The tree containing the layers
|
|
var baseTree = [
|
|
{
|
|
label: 'OpenStreeMap',
|
|
children: [
|
|
{label: 'OSM', layer: osm, name: 'OpenStreeMap'},
|
|
{label: 'B&W', layer: osmBw, name: 'OpenStreeMap <b>B&W</b>'},
|
|
{label: 'OpenTopoMap', layer: otopomap, name: 'Topographic - OSM'},
|
|
]
|
|
},
|
|
{
|
|
label: 'Thunder',
|
|
children: [
|
|
{label: 'Cycle', layer: cycle},
|
|
{label: 'Transport', layer: transport},
|
|
]
|
|
},
|
|
];
|
|
|
|
// The map
|
|
var map = L.map('map', {
|
|
layers: [osm],
|
|
center: center,
|
|
zoom: 5
|
|
});
|
|
|
|
L.control.layers.tree(baseTree).addTo(map);
|
|
</script>
|
|
</body>
|
|
</html>
|