L. control Hide or show

[Nandjm]

Hello everyone

I am trying to hide or show an L.control of 4 check boxes depending on the option chosen in a first L.control composed of radio buttons. It should only be displayed in certain cases.

The only solution that I have currently found but which does not seem very optimized to me is to recreate then destroy this L.control.

Does anyone have any ideas on how to do the job?

With many thanks

Jean Michel

[Edwin Corrigan]

Hi Jean Michel, 

How about a custom event, you can emit them from the map object and they can be listened on in custom controls. I did a console log as an example, but you can add logic to show/hide the entire control, or add/remove radio buttons as per your requirements: Here is an example:

https://codepen.io/corrigancd/pen/GRedVxX 

In your case I think you want to show your custom control, or not, or change its content depending on what radio button is selected in the first control. You can listen to base layer changes (assuming your first control is a leaflet layer control - https://leafletjs.com/examples/layers-control/) with the below, then fire the custom-event in the codepen to trigger the event in your second control (no need to edit the layer control code itself, the baselayerchange event is built in).

map.on('baselayerchange', (newBaseLayer) => {

  // todo - fire a custom event from here, that is listened to in your custom control
  console.log('newBaseLayer:', newBaseLayer)

}) 

Best Regards, 

Edwin

Edwin Corrigan 

edwint....@gmail.com

Want to learn React-Leaflet? Check out this course

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/7fb29af5-6018-490e-9ff7-a748a5c828ecn%40googlegroups.com.