GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → bambrikii → leaflet-layer-tree-plugin

bambrikii / leaflet-layer-tree-plugin

Licence: GPL-3.0 license
No description or website provided.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Labels

pluginmaptreenavigationleaflet

Projects that are alternatives of or similar to leaflet-layer-tree-plugin

Papyruscs
PapyrusCS renders maps of Minecraft: Bedrock Edition worlds using C#, LevelDB and leaflet.
Stars: ✭ 146 (+370.97%)
Mutual labels:  map, leaflet
Xcsoar
... the open-source glide computer
Stars: ✭ 196 (+532.26%)
Mutual labels:  map, navigation
Mapbox.js
Mapbox JavaScript API, a Leaflet Plugin
Stars: ✭ 1,819 (+5767.74%)
Mutual labels:  map, leaflet
Gods
GoDS (Go Data Structures). Containers (Sets, Lists, Stacks, Maps, Trees), Sets (HashSet, TreeSet, LinkedHashSet), Lists (ArrayList, SinglyLinkedList, DoublyLinkedList), Stacks (LinkedListStack, ArrayStack), Maps (HashMap, TreeMap, HashBidiMap, TreeBidiMap, LinkedHashMap), Trees (RedBlackTree, AVLTree, BTree, BinaryHeap), Comparators, Iterators, …
Stars: ✭ 10,883 (+35006.45%)
Mutual labels:  map, tree
leaflet-tag-filter-button
Adds tag filter control for layers (marker, geojson features etc.) to LeafLet.
Stars: ✭ 48 (+54.84%)
Mutual labels:  map, leaflet
Containers
This library provides various containers. Each container has utility functions to manipulate the data it holds. This is an abstraction as to not have to manually manage and reallocate memory.
Stars: ✭ 125 (+303.23%)
Mutual labels:  map, tree
Mapsapi
Карты 2ГИС — это точные данные обо всех объектах города, включая новостройки, с детализацией до заборов и внутриквартальных проездов.
Stars: ✭ 193 (+522.58%)
Mutual labels:  map, leaflet
Leaflet.labeltextcollision
Leaflet.LabelTextCollision is a LeafletJS plug-in to display labels on vector data while avoiding label collisions.
Stars: ✭ 65 (+109.68%)
Mutual labels:  map, leaflet
coronavirus-map-dashboard
🦠 Coronavirus (COVID-19) Map Dashboard using coronavirus-tracker-api
Stars: ✭ 41 (+32.26%)
Mutual labels:  map, leaflet
jh-weapp-demo
微信小程序项目- 实现一些常用效果、封装通用组件和工具类
Stars: ✭ 60 (+93.55%)
Mutual labels:  map, tree
Flutter map marker cluster
Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster
Stars: ✭ 101 (+225.81%)
Mutual labels:  map, leaflet
navdatareader
Navdatareader is a command line tool that uses the atools fs/bgl and fs/writer to store a full flight simulator scenery database into a relational database like Sqlite or MySql.
Stars: ✭ 35 (+12.9%)
Mutual labels:  map, navigation
Quizzity
A fast-paced geography quiz
Stars: ✭ 80 (+158.06%)
Mutual labels:  map, leaflet
Vue2leaflet
Vue 2 components for Leaflet maps
Stars: ✭ 1,809 (+5735.48%)
Mutual labels:  map, leaflet
Exploretrees Sg
🌳 Explore Trees in Singapore 🇸🇬
Stars: ✭ 68 (+119.35%)
Mutual labels:  map, tree
Tangram
WebGL map rendering engine for creative cartography
Stars: ✭ 1,964 (+6235.48%)
Mutual labels:  map, leaflet
Buckets Js
A complete, fully tested and documented data structure library written in pure JavaScript.
Stars: ✭ 1,128 (+3538.71%)
Mutual labels:  map, tree
Leaflet Ng2
Angular.io integration of Leaflet
Stars: ✭ 66 (+112.9%)
Mutual labels:  map, leaflet
Libdict
C library of key-value data structures.
Stars: ✭ 234 (+654.84%)
Mutual labels:  map, tree
php-sorted-collections
Sorted Collections for PHP
Stars: ✭ 22 (-29.03%)
Mutual labels:  map, tree
View All Similar Projects ➔

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"
	}
	}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].