Leaflet: Documentation sur la façon de remplir le contenu contextuel via ajax

Si vous créez explicitement une fenêtre contextuelle, vous pouvez définir le contenu :

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

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

Écoutez donc l'événement 'click' sur vos marqueurs (vous pouvez le définir sur le MarkerClusterGroup). Ensuite, lorsqu'il est déclenché, vous créez une fenêtre contextuelle avec un message de chargement, chargez le contenu via ajax, puis définissez-le à l'intérieur lorsqu'il revient.

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
}

J'espère que cela pourra aider!

Merci, je vais étudier cela et mettre en œuvre!

Cela a été bien référencé sur google, alors voici pour les personnes qui recherchent :

• Vous n'avez pas besoin de créer manuellement une fenêtre contextuelle et d'appeler map.openPopup ; si vous avez un marqueur, vous pouvez utiliser bindPopup() et getPopup() si vous le souhaitez.
• n'oubliez pas d'appeler popup.update() http://leafletjs.com/reference.html#popup -update

Voici un exemple de travail avec la brochure 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();
    });

Notez que vous pouvez également passer une fonction à bindPopup() . Il sera appelé à l'ouverture de la fenêtre contextuelle et doit renvoyer un String ou un HTMLElement . Donc, une autre version de votre code (qui ne dicte pas quel type d'événement provoque l'ouverture de la fenêtre contextuelle):

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

Quelqu'un a-t-il un exemple concret de cela qu'il serait prêt à partager ?

Voici un plunkr-

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

@chriszrc qui m'a évité bien des ennuis. Merci mec

@chriszrc Impossible de le faire en utilisant les données JSON d'une API.

Aucune fenêtre contextuelle n'apparaît.

Les exemples de données ressemblent à ceci :
{"datapoint":[{"intensity":92,"latitud":"18.52","longitud":"82.4767"},{"intensity":68,"latitud":"17.7375","longitud":"82.8347"}]}

J'essaie d'afficher l'intensité dans la fenêtre contextuelle.

C'est ce que j'ai essayé :

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

' + datapoint[i].intensité + '

 return el;

@kunaldhariwal, vous devrez publier un plunkr ou quelque chose, impossible à dire sans un exemple. Pour commencer, l'URL sur laquelle vous chargez l'extrait de code ("http://www.example.com/data") ne semble pas renvoyer un json- valide.

@chriszrc C'est un exemple d'URL cependant. Pour des raisons évidentes, je ne peux pas révéler l'URL exacte.
Je suis désolé mais je vais essayer de trouver quelque chose.