1

I am using OpenLayers 3 and GeoServer to create a map with multiple layers. I am able to generate legend for each layer from GeoServer using GetLegendGraphic and display them using the following:

<div>
 <img src="http://localhost:8080/geoserver/wms?service=WMS&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=12&HEIGHT=12&LAYER=country:Layer1">
</div>

I tried to control the legend visibility based on the visibility of its corresponding layer. I searched various sources and found How to add a legend and toggle the legend with a layer in Openlayers? which did not work for my case.

Now I have the following problem:

When a Map layer is made invisible, the legend is still displayed. How, can I control the legend visibility dynamic i.e. make the legend visible only when its corresponding layer is selected and make the legend invisible when its corresponding layer is invisible.

Is there a working example?

closed as off-topic by Ian Turton Aug 31 '17 at 17:04

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • you just hide the legend image for that layer when you make the layer invisible – Ian Turton Aug 31 '17 at 17:04
  • Yes, do you have any examples or some links to relevant examples. – OSMuser Sep 1 '17 at 15:56
  • Nope, that is just basic css/js stuff google.co.uk/search?q=hide+image+with+javascript – Ian Turton Sep 1 '17 at 15:57
  • Thank You. To monitor the Layer selection event and hide/show legend image: LayerID.on('change:visible', function(){ // javascript code to hide/show legend image }); – OSMuser Sep 4 '17 at 9:07