Remove the use of document.querySelector to a more local search using 'this'

[AliyanH]

Hello, document.querySelector returns the first element in the document matching the specified selector. This can cause an issue when the web page has multiple Leaflet maps in the page (as the first map will always be selected even when called from the second map).

Similarly, document.querySelector does not search inside of a ShadowRoot which can cause an issue when the leaflet map is inside of one, and create an error (which is the case for me).

I believe the use of document.querySelector can be changed to do a more local search for the map, which can always return the right element. For ex, the following code (which is causing an error for me) can be change from this:

Leaflet.DistortableImage/src/edit/actions/EditAction.js

Line 81 in ccf6e69

document.querySelector('.leaflet-marker-pane').appendChild(el);

To this:
this._map._container.querySelector('.leaflet-marker-pane').appendChild(el);

Please let me know what you think, Thanks.

[welcome]

Thanks for opening your first issue here! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸
You can make a gif too!
Do join our Gitter channel for some brainstorming discussions.

[hound77]

@AliyanH Can I work on this issue?

[AliyanH]

@AliyanH Can I work on this issue?

Yup, good with me. Thanks!