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

Question

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

So you want to invoke a function to change the language when switching between default and English and you also use react with leaflet, correct? — kboul
– kboul, Commented Apr 16, 2020 at 17:14
@kboul: I am using React with Leaflet. I need to add two titles in layer selection window. I have updated my question agin. Sorry for the updations. — Jerry
– Jerry, Commented Apr 16, 2020 at 17:34
You can use this plugin but it does not support space between words. that means you have to write SelectType instead of Select Type otherwise you will have to write your own custom plugin that extends LayersControl. If it fits your needs I can post an example — kboul
– kboul, Commented Apr 16, 2020 at 17:53

kboul · Accepted Answer · 2020-04-16 18:23:36Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related