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 with my new dialog in and reposition this every time the user interacts with a marker, this way the popup stays aligned when the user drags the map.

Is anyone aware of any alternatives or existing ways of doing this?

Thanks

score 53 · Answer 1 · edited Nov 17 '16 at 23:08

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

I was after more of an official/structured method, something similar to the way you can extend the popup on google maps. Thanks anyway — ArthurGuy, Oct 09 '12 at 15:44
So you want to change it's functionality? I've updated my answer. — Robert Kajic, Oct 09 '12 at 23:37

score 28 · Answer 2 · answered Nov 05 '16 at 15:34

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

<style>
/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
    background: #e0e0e0;
    color: #234c5e;
}
</style>

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 = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>";

// 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.

score 5 · Answer 3 · edited Jan 27 '16 at 19:50

There is an example over at mapbox which uses leaflet.js. The example shows how to use custom tooltip in leaflet.

<style>
/*
 * These CSS rules affect the tooltips within maps with the custom-popup
 * class. See the full CSS for all customizable options:
 * https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
  }
</style>

<div class='custom-popup' id='map'></div>

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

3 Answers3

Linked