How can I add multiple overlay layers in leaflet.js having three categories at the right top of the map?

Question

I want to make a map where I will have three categories at the right top of it, such as Toilets, Dustbins, and Hospitals. I have created a map layer using QGIS open source mapping.

Here is my code, where I have created just one category.

var baseMaps = {'OSM': basemap0};
    L.control.layers(baseMaps,{'<img src="legend/sampletoiletsurvey0.png" /> TOILETS': sampleJSON,},{collapsed:false},{autoZIndex :true}).addTo(map);
    L.control.layers(null, overlays).addTo(map);

Now I want to have two categories below it. For latitudes and longitudes, I have geojson files. How can I create additional two categories using layer group functionality in leaflet.js?

Answer 1

First, store a reference to the instance of L.Control.Layers that you want to add items to.

var myLayersControl = L.control.layers(null, overlays).addTo(map);

Then fetch the geojson files asynchronously from the network...

fetch('http://wherever/stuff.geojson')

...when that's finished, get the json representation of the network response, and create an instance of L.GeoJson for it...

fetch('http://wherever/stuff.geojson')
.then(function(response){
    return response.json();
})
.then(function(jsonData){
    var geoJsonLayer = L.geoJson(jsonData);
});

...add it to the map...

.then(function(jsonData){
    var geoJsonLayer = L.geoJson(jsonData).addTo(map);
});

...and finally, add the newly created L.GeoJSON instance to your layers control:

.then(function(jsonData){
    var geoJsonLayer = L.geoJson(jsonData).addTo(map);
    myLayersControl.addOverlay(geoJsonLayer, "Stuff!!");
});

Remember to RTFM if any of this is confusing:

• http://leafletjs.com/reference-1.3.0.html#control-layers-addoverlay
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• https://developer.mozilla.org/en-US/docs/Web/API/Body/json

If you're trying to load several pieces of data asynchronously and they're coming in a arbitrary order, then do read:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all