leaflet-layer-tree-plugin
Version:
Leaflet.LayerTreePlugin
226 lines (201 loc) • 6.52 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);
// 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']
});
}
};
var rootLayerSettings = [
];
// The Tree Control
var theTreeControl = new L.Control.LayerTreeControl({
// layerTree: rootLayerSettings,
openByDefault: true,
layerBuilders: layerBuilders,
featureBuilders: {
WFS: {
zoom: L.Control.LayerTreeControl.WFSZoomFeature
}
}
}).addTo(map);
var rootLayerId = theTreeControl.addLayerDynamically({
code: "root",
name: "All the Layers",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [],
selectType: "NONE",
serviceType: null,
params: {}
});
var baseLayerId = theTreeControl.addLayerDynamically({
code: "base",
name: "Base layers",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [],
selectType: "SINGLE",
serviceType: null,
params: {}
}, rootLayerId);
var overlaysLayerId = theTreeControl.addLayerDynamically({
code: "overlays",
name: "Overlays",
active: true,
selectedByDefault: false,
openByDefault: true,
childLayers: [],
selectType: "MULTIPLE",
serviceType: null,
params: {}
}, rootLayerId);
var osmLayerId = theTreeControl.addLayerDynamically({
code: "osm",
name: "OpenStreetMap",
active: true,
selectedByDefault: true,
openByDefault: true,
childLayers: [],
selectType: "MULTIPLE",
serviceType: "OSM",
params: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
}
}, baseLayerId);
var googleLayerId = theTreeControl.addLayerDynamically({
code: "google",
name: "Google",
active: true,
selectedByDefault: false,
openByDefault: false,
childLayers: [],
selectType: "NONE",
serviceType: "GOOGLE",
params: {}
}, baseLayerId);
var coastLineId = theTreeControl.addLayerDynamically({
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\":2,\"opacity\":1,\"color\":\"red\",\"dashArray\":\"3\",\"fillOpacity\":1}",
version: "1.1.0",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25"
}
}, overlaysLayerId);
var scotlandLayerId = theTreeControl.addLayerDynamically({
code: "MPA_SCOTLAND",
name: "rsg:MPA_SCOTLAND",
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: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"
}
}, coastLineId);
var shellFishCages = theTreeControl.addLayerDynamically({
code: "MMO_Fish_Shellfish_Cages_A",
name: "rsg:MMO_Fish_Shellfish_Cages_A",
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:MMO_Fish_Shellfish_Cages_A",
style: "{\"stroke\":true,\"fillColor\":\"blue\",\"border\":\"violet\",\"weight\":3,\"opacity\":1,\"color\":\"orange\",\"dashArray\":\"1\",\"fillOpacity\":1}",
version: "1.1.1",
outputFormat: "application/json",
url: "https://rsg.pml.ac.uk/geoserver/wfs",
maxFeatures: "25"
}
}, coastLineId);
// theTreeControl.removeLayerDynamically(shellFishCages);
// theTreeControl.removeLayerDynamically(overlaysLayerId);
</script>
<div id="layersManipulationButtons">
</div>
</body>
</html>