1. Import
This commit is contained in:
79
html/locating/Leaflet.Control.Layers.Tree-master/examples/basic_1.3.4.html
Executable file
79
html/locating/Leaflet.Control.Layers.Tree-master/examples/basic_1.3.4.html
Executable file
@@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Leaflet Layers Tree Basic Demo</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.3.4/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>
|
||||
Reference in New Issue
Block a user