Dynamically Change Leaflet PopUp Background

Question

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?

Answer 1

You can access the popups' DOM elements with marker.getPopup().getElement() and work from there - see a working example here.

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.

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.