leaflet-layer-tree-plugin
Version:
Leaflet.LayerTreePlugin
282 lines (271 loc) • 8.11 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<!-- fontawesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
type="text/css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.2/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js"
integrity="sha512-2fA79E27MOeBgLjmBrtAgM/20clVSV8vJERaW/EcnnWCVGwQRazzKtQS1kIusCZv1PtaQxosDZZ0F1Oastl55w=="
crossorigin=""></script>
<script src="https://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<link rel="stylesheet" href="../src/leaflet-layer-tree-control.css" type="text/css"/>
<script type="text/javascript" src="../src/leaflet-layer-tree-control.js"></script>
<script type="text/javascript" src="../src/leaflet-layer-tree-control-wfs-zoom.js"></script>
</head>
<body>
<div style="wdith: 100%; height: 100%;">
<div id="map1" style="width: 100%; height: 100%;"></div>
</div>
<script type="text/javascript">
function buildContentFromLayer(layer) {
var content = "<table>";
var properties = layer.feature.properties;
for (var i in properties) {
content += "<tr><td>" + i + "</td><td>" + properties[i] + "</td></tr>";
}
content += "</table>";
return content;
}
var map = L.map("map1");
map.setView(new L.LatLng(0, 0), 1);
// Icons
var greenIcon = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
});
var tree = [
{
code: "root",
name: "All the Layers",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [
{
code: "base",
name: "Base layers",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [
{
code: "osm",
name: "OpenStreetMap",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [],
selectType: "MULTIPLE",
serviceType: "OSM",
params: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
}
},
{
code: "google",
name: "Google",
active: true,
selectedByDefault: true,
openByDefault: true,
childLayers: [],
selectType: "NONE",
serviceType: "GOOGLE",
params: {}
},
{
code: "google_terrain",
name: "Google Terrain",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [],
selectType: "NONE",
serviceType: "GOOGLE_TERRAIN",
params: {}
}
],
selectType: "SINGLE",
serviceType: null,
params: {}
},
{
code: "overlays",
name: "Overlays",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [
{
code: "50m_coastline",
name: "rsg:50m_coastline",
active: true,
selectedByDefault: true,
openByDefault: true,
selectType: "MULTIPLE",
serviceType: "WFS",
coordinateSystem: "EPSG:4326",
onPopup: function (layer) {
return buildContentFromLayer(layer);
},
params: {
request: "getFeature",
service: "WFS",
typeName: "rsg:50m_coastline",
style: "{\"stroke\":true,\"fillColor\":\"violet\",\"border\":\"orange\",\"weight\":3,\"opacity\":0.5,\"color\":\"red\",\"dashArray\":\"5\",\"fillOpacity\":0.1}",
version: "1.1.0",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25"
},
childLayers: [
{
code: "MPA_SCOTLAND",
name: "rsg:MPA_SCOTLAND",
active: true,
selectedByDefault: true,
openByDefault: true,
childLayers: [],
selectType: "MULTIPLE",
serviceType: "WFS",
coordinateSystem: "EPSG:4326",
onPopup: function (layer) {
return buildContentFromLayer(layer);
},
params: {
request: "getFeature",
service: "WFS",
typeName: "rsg:MPA_SCOTLAND",
style: "{\"stroke\":true,\"fillColor\":\"yellow\",\"border\":\"gray\",\"weight\":3,\"opacity\":0.5,\"color\":\"gray\",\"dashArray\":\"5\",\"fillOpacity\":0.1}",
version: "1.1.1",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25"
}
},
{
code: "MMO_Fish_Shellfish_Cages_A",
name: "rsg:MMO_Fish_Shellfish_Cages_A",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [],
selectType: "MULTIPLE",
serviceType: "WFS",
coordinateSystem: "EPSG:4326",
onPopup: function (layer) {
return buildContentFromLayer(layer);
},
params: {
request: "getFeature",
service: "WFS",
typeName: "rsg:MMO_Fish_Shellfish_Cages_A",
version: "1.1.1",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25"
}
}
]
},
{
code: "tiger_roads",
name: "tiger:tiger_roads",
active: true,
selectedByDefault: false,
openByDefault: true,
selectType: "MULTIPLE",
serviceType: "WFS",
coordinateSystem: "EPSG:4326",
onPopup: function (layer) {
return buildContentFromLayer(layer);
},
params: {
request: "getFeature",
service: "WFS",
typeName: "tiger:tiger_roads",
style: "{\"stroke\":true,\"fillColor\":\"green\",\"border\":\"cyan\",\"weight\":3,\"opacity\":0.5,\"color\":\"red\",\"dashArray\":\"3\",\"fillOpacity\":0.1}",
version: "1.1.1",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25"
},
childLayers: [
{
code: "poi",
name: "tiger:poi",
active: true,
selectedByDefault: true,
openByDefault: true,
childLayers: [],
selectType: "MULTIPLE",
serviceType: "WFS",
coordinateSystem: "EPSG:4326",
onPopup: function (layer) {
return buildContentFromLayer(layer);
},
params: {
request: "getFeature",
service: "WFS",
typeName: "tiger:poi",
version: "1.1.1",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25",
icon: greenIcon
},
}
]
}
],
selectType: "MULTIPLE",
serviceType: null,
params: {}
}
],
selectType: "NONE",
serviceType: null,
params: {}
}
];
// Base Layers
var layerBuilders = {
GOOGLE: function (layerSettings) {
return L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
},
GOOGLE_TERRAIN: function (layerSettings) {
return L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
}
};
// The Tree Control
new L.Control.LayerTreeControl({
layerTree: tree,
openByDefault: true,
layerBuilders: layerBuilders,
featureBuilders: {
WFS: {
zoom: L.Control.LayerTreeControl.WFSZoomFeature
}
}
}).addTo(map);
</script>
</body>
</html>