Sidebar is created outside map div about leaflet-sidebar-v2 HOT 4 CLOSED

Thanks for your suggestion. I'm not opposed to the idea of adding the sidebar to the map container instead of the body. But I wasn't able to get your method to work in a quick trial. Additionally, I think your method would also require us to pass in the id of the map div which might not always be 'map'.

I think the best way forward is to refactor the code to be similar to how other Leaflet controls are add to the map. I'd be happy to review a pull request if you are willing to.

from leaflet-sidebar-v2.

I made a minimal version where my method works.

I don't really understand how it's done in your link - where is the container added to any element?!

You're right that the map div id could be something other than 'map'. I'd suggest: Leave line 33 as it is (so that the sidebar is created outside at first) and modify the addTo method so that it moves the sidebar HTML element inside the map specified there (that would be intuitive imo).

A problem that arises then: Click events on the map are also emitted when the user clicks on the sidebar, which I think is not desirable.

from leaflet-sidebar-v2.

Yes, I agree. Modifying the addTo method is probably the best option. Perhaps the other Leaflet controls might give a clue on how to avoid map click events?

from leaflet-sidebar-v2.

The reason for the current implementation is to support the static definition of panes in HTML while allowing modification through the sidebar API.

Leaflet controls store their container within the map div, but the DOM insertion is handled by Leaflet's plugin API itself.
In general the inner content of the leaflet map div should not be manually touched.

This leaves the option to move the childNodes of a static div.sidebar into the container that will be passed to Leaflet.
I will try this and see if it works

from leaflet-sidebar-v2.