Can anyone explain me how I can include one dynamic legend within a Leaflet map for 16 individual WMS layers? Is it possible to create ONE legend with the WMS service for multiple layers?

My code to add and remove the layer is like the Leaflet.Control.Layers.Tree https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree

enter image description here

Now I want to show a legend on my leaflet map - depending on the visibility of the layers: If a layer is not visible (removed) the legend symbols of this layer should not bee shown.

The WMS service works fine. I tried to use the wms request GetLegendGraphic like in this plugin: https://github.com/kartoza/leaflet-wms-legend

I checked in my code if a layer is active. Then I requested the legend only for the active ones. I then displayed the legend images together on one control. But: If all 16 layers are active/visible, then this legend is very big. Now I'm looking for a solution to make the legend more user-friendly.

And it would be great if - depending on the visibility of the layers - it should also display only the necessary symbols. I mean, if a symbol is not in the current display area, then it should not be displayed.

Is that possible and if so, how would you do that?

Edit: My question in more concrete form: Is it possible to create ONE legend with the WMS service for multiple layers?

closed as unclear what you're asking by TomazicM, Vince, nmtoken, Jochen Schwarze, whyzar Nov 4 at 18:23

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Without seeing your code and images of what goes wrong and what would you like to achieve any attempt to help you would be shot in the dark. – TomazicM Nov 3 at 14:48
  • Thank you very much. There is nothing wrong and I do not have any finished code yet. I am currently in the planning phase. Maybe I did not put my question exactly enough. I just added something to this. – astridx Nov 4 at 7:45
  • As I wrote: picture is worth a thousand words. Please add a picture of what you would like your control to look like and explanation from where should individual parts of this control come from. – TomazicM Nov 4 at 7:56
  • 1
    On the point of possibility, you could ask for the style of the root layer: XPath /WMS_Capabilities/Capability[1]/Layer[1]/Style[1]/LegendURL[1]/OnlineResource[1] but whether or not this is desirable is another matter – nmtoken Nov 4 at 8:13
  • @nmtoken Thanks for your tip. With your critical comment, do you mean that the root layer is just as cluttered as displaying all the legends together, right? But you gave me an idea. I could just create a WMS layer for the legend. This should then not be displayed. That's why I can position and resize everything the way I want it to be as a legend for this zoom level. That is certainly a lot of effort. But I will try. – astridx Nov 4 at 8:25

First of all Add an empty layercontrol to map.

var layerControl = L.control.layers().addTo(map);

Add all of your layers to map using the code below.

   var cycle= L.tileLayer.wms('{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {
    minZoom: 5,
    minNativeZoom: 10,
    maxZoom: 24,
    attribution: '',
    format: 'image/png',
    transparent: true

Now to remove a layer from layer control [Legend] when it is inactive you can compare the zoomLevels of layer and map. If zoom level of map lies within the zoom levels of layer [minZoom, maxZoom] then add this layer to the layer Control [Legend] otherwise remove it from layer control.

You have to check this whenever user zooms in or out so,

map.on('zoomend', function(event){

    if(map._zoom > cycle.options.minZoom && map._zoom < cycle.options.maxZoom ){

This way you can add and remove layers in layer control [legend] dynamically.

Not the answer you're looking for? Browse other questions tagged or ask your own question.