How to add titles on leaflet’s layer control selection using react?

I am using Leaflet JS with Bing map. I need to add titles on top of Type 1 Layer and Category 1 overlays selection, displayed on right top of Map. I could not see any documentation for the same. Can someone help me.

My layers are,

Base Layers: Default and English

Overlays: Type 1 Layer, Type 2 Layer, Category 1, Category 2

image

let type1Layer = L.layerGroup()
let type2Layer = L.layerGroup()
let category1 = L.layerGroup()
let category2 = L.layerGroup()
let overlays = {
            'Type1Layer': type1Layer, 
            'Type2Layer': type2Layer, 
            'Category1': category1, 
            'Category2': category2 
}
L.control.layers(baseLayers, overlays).addTo(myMap)

Need to add titles Select Type and Select Category in layer selection window in map as below,

Select Type

Type1Layer

Type2Layer

Select Category

Category1

Category2

Answer

Use leaflet-groupedlayercontrol plugin to achieve the desired result.

When the component mounts you can separate your layer using groupedOverlays object by passing keys as Objects where their name would be your separation layer similar to a dictionary:

    useEffect(() => {
    var basemaps = {
      Grayscale: L.tileLayer(
        "http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png",
        {
          maxZoom: 18,
          attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
      ),
      Streets: L.tileLayer(
        "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          maxZoom: 19,
          attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
      )
    };

    var groups = {
      cities: new L.LayerGroup(),
      restaurants: new L.LayerGroup(),
      dogs: new L.LayerGroup(),
      cats: new L.LayerGroup()
    };

    L.marker([39.61, -105.02], { icon })
      .bindPopup("Littleton, CO.")
      .addTo(groups.cities);

    ...

    var map = L.map("map", {
      center: [39.73, -104.99],
      zoom: 10,
      layers: [basemaps.Grayscale, groups.cities]
    });

    // Overlay layers are grouped
    var groupedOverlays = {
      SelectType: {
        Type1Layer: groups.cities, // use your one
        Type2Layer: groups.restaurants // use your one
      },
      SelectCategory: {
        Category1: groups.dogs, // use your one
        Category2: groups.cats  // use your one
      }
    };

    // Use the custom grouped layer control, not "L.control.layers"
    L.control.groupedLayers(basemaps, groupedOverlays).addTo(map);
  }, []);

  return <div id="map" style={{ width: "600px", height: "400px" }} />;

Replace your layers with the ones in the exampel and you should be good

demo