CODEWITHSUNDEEP
javascriptpopupleaflet
Scott
Scott

Reputation: 137

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

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

Upvotes: 7

Views: 18953

Answers (4)

geraldarthur
geraldarthur

Reputation: 1524

After you call leaflet.css, you can include a <style> tag with the following rule to change the color of the popup and popup tip.

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background-color: #000
}

Here's a screenshot I took after I edited background-color of a popup on Leaflet's homepage.

enter image description here

Upvotes: 14

Norbert
Norbert

Reputation: 879

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")}} >

Upvotes: 1

Jafi
Jafi

Reputation: 59

      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!

Upvotes: 4

geoSAM
geoSAM

Reputation: 203

Open leaflet.css and search for: 

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
    background: rgb(111, 51, 51);
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

Then change the background value to whatever color you want.

Upvotes: 7

Related Questions