Adding several lays to leaflet and display the basic information of the layers on the map is very useful. Leaflet provaided lots handy APIs.

This article talks about how to update the layers’ information according to users selection.

Leaflet Overlays

Add layers to leaflet

Base layer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// OSM map
var OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        });

// Mapbox map
var Mapbox_light = L.tileLayer('https://api.mapbox.com/styles/v1/cherylzuo/cji2tjfdj10032sp4xfjd7nvp/tiles/256/{z}/{x}/{y}?access_token=pk.yourowntoken', {
            attribution: '&copy; <a href="https://www.mapbox.com/">Mapbox</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        });

var baseLayers = {
	"Open Street Map": OpenStreetMap,
	"Light Map": Mapbox_light
};

In this example, Geojson is added as overlays (the geojson used in this case is polygons).

Overlay styles:

1
2
3
4
5
6
7
8
9
10
11
var transportationStyle = {
            "color": "#2340b9",
            "weight": 1,
            "opacity": 0.01
        };

var nature_resourceStyle = {
	    "color": "#60ee4c",
	    "weight": 1,
	    "opacity": 0.5
	};

Geojson layers:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//add geojson polygon to the map
var transportation = new L.geoJSON(transportation, {
    style: transportationStyle,
	// onEachFeature: layersOnEachFeature
});

//add geojson polygon to the map
var nature = new L.geoJSON(nature_resources, {
    style: nature_resourceStyle
});

var overlays_geojson = {
	    "Transportation": transportation,
		"Nature resources": nature
	};

Add baselays and overlays to map:

1
2
// add layer control to the map, overlays invisible by default
L.control.layers(baseLayers,overlays_geojson).addTo(map);

Add info box

When users click on overlays, the corresponding information will appear/disappear on the webpage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties pacssed
info.update = function (props) {
    this._div.innerHTML = '<h4>Dataset Information</h4>' +  (props ? props : 'Choose a category');
};

info.addTo(map);

Custermize info box

When users click the overlay button, we need to know which layer(s) is checked. We need to add listeners on overlayadd and overlayremove. By comparing the added/removed layers with the overlay elements, we can know which layer is clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// list of on display overlays
var layerDisplay = [];


map.on("overlayadd overlayremove", function (event) {
	var layer = event.layer;

    // get the information from all overlays
    var allLayers = Object.values(overlays_geojson);

	if (event.type == "overlayadd"){

		// when a layer is added, push the layer information into the list
		for (var l in allLayers){
		    if (layer === allLayers[l]){
                layerDisplay.push(layer);
			};
		};

	} else if(event.type == "overlayremove"){

        // when a layer is removed, pop the layer information out of the list
        for (var l in layerDisplay){
            if (layer === layerDisplay[l]){
                layerDisplay.splice(l,1);
            };
        };
	};

	// if no overlays, display default info
	if (layerDisplay.length == 0){
	    info.update();
	    return
	}

    // overlay info box
    var data_info = '';

    // Tget the information from layerDisplay and send it to update
    for(var l in layerDisplay){
		var tmplayer = layerDisplay[l]._layers;
		for(var i in tmplayer){
            var properties = tmplayer[i].feature.properties;
            data_info += properties.title + '  ' + properties.year + '<br\>';
		}
		data_info += '<br\>'
    }

	info.update(data_info);
});

Reference

Walkthrough: Adding interactive GeoJSON layers in Leaflet