2

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?

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.