CODEWITHSUNDEEP
javascripthtmlcsspopupleaflet
Domas Purr
Domas Purr

Reputation: 35

Having two different leaflet popup styles simultaneously

I was wondering if it is possible to have two completely different styles of popup. Here is an example: Solid Transparent I want to use both of those styles independently of each other. For example have the solid background for a rectangle and transparent for a marker. This is the code that changes it to transparent:

.leaflet-popup-content-wrapper {
    background: #D3D3D3;
    background: transparent;
}

Thank you for any information you can provide for this noob :)

EDIT: I tried to go the way @n0m4d suggested by adding a class to my popup, however it did not seem to do anything:

JS:

var popup = L.popup({className: 'pareina'})
    .setLatLng([0, 0])
    .setContent("I am a standalone popup.")
    .openOn(map);

CSS:

.pareina{
    background: black;
}

EDIT2: I managed to get it to work, here is what I did:

JS:

var popup = L.popup({className: 'pareina'})
    .setLatLng([0, 0])
    .setContent("I am a standalone popup.")
    .openOn(map);

CSS this is where I did things a bit differently: 

.pareina .leaflet-popup-content-wrapper{
    background: transparent;
}

basically I made .leaflet-popup-content-wrapper a child element of .pareina and it worked! :) thank you for helping @n0m4d

Upvotes: 3

Views: 2072

Answers (1)

n0m4d
n0m4d

Reputation: 832

According to leaflet's js docs, you can pass in a class name into the popup options:

className option: A custom class name to assign to the popup.

So your code would look like something like this:

var popup = L.popup({className: 'leaflet-popup-content-wrapper' })
             .setLatLng(latlng)
             .setContent('<p>Hello world!<br />This is a nice popup.</p>')
             .openOn(map);

Upvotes: 1

Related Questions