2.0.1 • Published 6 years ago

leaflet-layer-tree-plugin v2.0.1

Weekly downloads
9
License
GPL-3.0
Repository
github
Last release
6 years ago

leaflet-layer-tree-plugin

Leafet.LayerTreePlugin

This plugin for Leaflet allows to switch layers on and off, structure them in a tree-like way

The list of layers to be displayed can be provided as a JavaScript object where each layer may look like as follows:

var layer = {
	code: "osm",
	name: "OpenStreetMap",
	active: true,
	selectedByDefault: true,
	openByDefault: true,
	childLayers: [],
	selectType: "MULTIPLE", // "SINGLE", "NONE"
	serviceType: "OSM", // "TILE", "WMS", "WFS", custom.
	params: {
		url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
	}
}

Static Definition of Layers

Basic usage: https://github.com/bambrikii/leaflet-layer-tree-plugin/blob/master/examples/basic-example.htm

Preview: https://rawgit.com/bambrikii/leaflet-layer-tree-plugin/master/examples/basic-example.htm

See code example below

Dynamic Definition of Layers

Basic usage: https://github.com/bambrikii/leaflet-layer-tree-plugin/blob/master/examples/dynamic-example.htm

Preview: https://rawgit.com/bambrikii/leaflet-layer-tree-plugin/master/examples/dynamic-example.htm

See code example below

Static Definition of Layers (Code Example)

More complex example:

// Preinitialized Icons That Could be Used for Customizing Layers' Markers
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 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]
});

// The Tree Control Configuration
[
		{
			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: false,
							openByDefault: true,
							childLayers: [],
							selectType: "NONE",
							serviceType: "GOOGLE",
							params: {}
						},
						{
							code: "google_terrain",
							name: "Google Terrain",
							active: true,
							selectedByDefault: true,
							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: false,
									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: {}
		}
]

Dynamic Definition of Layers (Code Example)

Layers can also be inserted dynamically (see #10):

	    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);

Popups

One can use "onPopup" property to define WFS layers in configuration. The property value should be a function that accepts "layer" argument and returns html of the popup:

var layer = {
	code: "adygeaPrevlik",
	name: "Adygeya:prevlik",
	active: true,
	selectedByDefault: true,
	openByDefault: true,
	childLayers: [],
	selectType: "MULTIPLE",
	serviceType: "WFS",
	onPopup: function (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;
	},
	params: {
		request: "getFeature",
		service: "WFS",
		typeName: "Adygeya:prevlik",
		version: "1.0.0",
		outputFormat: "application/json",
		url: "http://geoportal.sovzond.ru:10090/geoserver/Adygeya/wfs"
	}
	}
2.0.1

6 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

8 years ago

1.0.13

8 years ago

1.0.12

8 years ago

1.0.11

8 years ago

1.0.10

10 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago