Is there a way to set the background image of a leaflet pop up dynamically?
I have multiple markers with popups, which all need a different background image. The filepaths for the images are being pulled from a database.
I have tried using jQuery to change the background property of the ".custom-popup .leaflet-popup-content-wrapper" classes, but the change does not occur. When I type $(".leaflet-popup-content-wrapper") into the console, it returns an empty array which tells me that the current page cannot even see this class.
How can I dynamically apply a background image to each of the popups?
Best Answer
You can access the popups' DOM elements with
marker.getPopup().getElement()
and work from there - see a working example here.First: you don't need jQuery. Second: wait until the popups are shown. Leaflet does not create DOM elements until things are actually added to a map. See this example for a practical demonstration.