How can I change the background color of a Leaflet popup?

user_2888381 0
Viewed 14512

I'm creating a map using Leafletjs, and I'd like to change the background color of a popup (which is currently displaying and image and a link) from white to a different color. It seems that basic background color css syntax won't cut it. Any advice? Thanks, -Scott

leaflet popup javascript
4 Answers
      const marker = new L.marker(lastPoint, {
        icon: markerIconSnake
      }).bindPopup(getDataInHtml(dataPopup), {
        className: 'stylePopup'
      })

If you want to change the background color of a popup you can use the method .bindPopup (in your marker) and add a css class.

    .stylePopup .leaflet-popup-content-wrapper,
    .stylePopup .leaflet-popup-tip {
        background-color: #f4913b;
        padding: 8px;
    }

If you wanna know more head to the docs!

user_121898840

In my case I'm using react-leaflet v2 and wasn't able to use css in js with material/core/styles. I created a function

const updatePopupCss = (color) => {
    let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
    let htmlPopupElement;
    if (popupElement[0] instanceof HTMLElement) {
        htmlPopupElement = popupElement[0] as HTMLElement;
        htmlPopupElement.style.backgroundColor = color;
        console.log(htmlPopupElement)
    }
}

Then called it from the onOpen attribute like so

 <Popup onOpen={() => {updatePopupCss("#036597")}} >

user_44433330
Related