search

publiclab / Leaflet.DistortableImage

A Leaflet extension to distort or "rubber sheet" images
https://publiclab.github.io/Leaflet.DistortableImage/examples/
BSD 2-Clause "Simplified" License
265 stars 284 forks source link

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

Open AliyanH opened 1 year ago

AliyanH commented 1 year ago

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: https://github.com/publiclab/Leaflet.DistortableImage/blob/ccf6e690410e21c3c7e04580d7984e1c1d0baba4/src/edit/actions/EditAction.js#L81 To this: this._map._container.querySelector('.leaflet-marker-pane').appendChild(el);

Please let me know what you think, Thanks.

welcome[bot] commented 1 year ago

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 commented 1 year ago

@AliyanH Can I work on this issue?

AliyanH commented 1 year ago

@AliyanH Can I work on this issue?

Yup, good with me. Thanks!