How would I customise the look and feel of the leaflet popup?

Question

I am looking at customising a map built using leaflet and I would like to customise the Popup (L.popup).

The only method I can think of is to build a custom popup layer

Answer 1

Another way of customizing popup is by creating your custom css class for popup like:

and then in you map div you can set the marker custom popup with the bindPopup method and passing a customOptions object where you mention the css class name:

// create popup contents
var customPopup = "My office
";

// specify popup options 
var customOptions =
    {
    'maxWidth': '400',
    'width': '200',
    'className' : 'popupCustom'
    }


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map);

// bind the custom popup 
marker.bindPopup(customPopup,customOptions);

Hope it helps.