Search code examples
leafletopenstreetmapgeojsonqgis

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

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?

Solution

  • 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:

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