Domas Purr Domas Purr - 3 months ago 16x
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:


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


background: black;


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' })
             .setContent('<p>Hello world!<br />This is a nice popup.</p>')