Domas Purr Domas Purr - 4 months ago 30
HTML Question

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;
}

Answer

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);
Comments