Leaflet: Documentation of how to populate popup contents via ajax

If you create a popup explicitly then you can set the content:

var popup = new L.Popup();
popup.setLatLng(latlng);
popup.setContent('seme content');
map.openPopup(popup);

http://leaflet.cloudmade.com/reference.html#popup

So listen to the 'click' event on your markers (you can set this on the MarkerClusterGroup). Then when it is fired you create a popup with a loading message, load the content via ajax, then setContent it inside when it comes back.

var group = new L.MarkerClusterGroup();
group.on('click', showMarker);

function showMarker(marker) {
//use marker.layer for the marker IIRC
//Create popup here and fetch content
}

Hope that helps!

Thanks, I'm going to study this and implement!

This was well referenced on google, so here's for people looking:

• You don't have to manually create a popup and calling map.openPopup; if you have a marker, you can use bindPopup() and getPopup() if you want.
• don't forget to call popup.update() http://leafletjs.com/reference.html#popup-update

Here's a working example with leaflet 0.7.3:

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup("Loading...")
marker.on('click', function(e) {
    var popup = e.target.getPopup();
    var url="DYNAMIC_CONTENT_URL";
    $.get(url).done(function(data) {
        popup.setContent(data);
        popup.update();
    });

Note that you can also pass a function to bindPopup(). It will be called when the popup is opened and has to return a String or HTMLElement. So another version of your code (that doesn't dictate which event type causes the popup to open):

var marker = L.marker([48.859085, 2.347403]);
marker.bindPopup(function() {
    var el = $('<div/>');

    $.get("DYNAMIC_CONTENT_URL").done(function(data) {
        el.setContent(data);
        popup.update();
    });

    return el;
});

Does anyone have a live working example of this that they'd be willing to share?

Here's a plunkr-

http://plnkr.co/edit/ps1MNhUMMO7vZCnQN7Cg?p=preview

@chriszrc that saved me a lot of trouble. thanks man

@chriszrc Unable to do it using the JSON data from an API.

No popup appears.

Sample data looks like this:
{"datapoint":[{"intensity":92,"latitud":"18.52","longitud":"82.4767"},{"intensity":68,"latitud":"17.7375","longitud":"82.8347"}]}

I am trying to display intensity in the popup.

This is what i have tried:

```
marker.bindPopup((popup)=>{
var el = document.createElement('div');
el.classList.add("my-class");
$.getJSON("http://www.example.com/data",function(datapoint){
el.innerHTML = '

' + datapoint[i].intensity + '

 return el;

@kunaldhariwal you'll need to post a plunkr or something, impossible to say without an example. For starters though, the url you're loading the code snippet ("http://www.example.com/data") doesn't appear to return valid json-

@chriszrc That's an example URL though. For some obvious reasons i cannot reveal the exact url.
I'm sorry but i'll try to figure out something.