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

You should customize the look and feel using css. The following selectors are probably interesting:

.leaflet-popup-content-wrapper {
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
}

.leaflet-popup-tip-container {
}

Depending on your browser, you can use tools like Firebug for Firefox or the build in developer tools in Chrome/Safari (right click anywhere on the page and click Inspect element, or use shortcuts), to inspect the popup and find additional css selectors that you may want to modify.

To extend it's functionality you should start by looking at the popup source code. Look at the sources of other Leaflet components until you get some feeling for what's going on. Extend the Popup class in the following way, and then change whatever you want:

L.CustomPopup = L.Popup.extend({
  // You changes here
});