Leaflet popup for geojson Ajax

0
votes

With Leaflet, how have popup on each marker when I load geojson layer with Ajax? 

var map = L.map('map', {
    center: [44.3, -0.3],
    zoom: 9
 });

var my_layer_geoJson= new L.geoJson();
my_layer_geoJson.addTo(map);

$.ajax({
    dataType: "json",
    url: "geojson/data.php",
    success: function(data) {
        $(data.features).each(function(key, data) {
            my_layer_geoJson.addData(data);
        });
     }
 }).error(function() {});

Thank you ! Matthieu

1
javascriptajaxleaflet

1 Answers

3
votes

I would create the geojson layer when the data is received, like so ... 

var map = L.map('map', {
    center: [44.3, -0.3],
    zoom: 9
 });

$.ajax({
    dataType: "json",
    url: "geojson/data.php",
    success: function(data) {
            L.geoJson(data, {
                onEachFeature: onEachFeature
            }).addTo(map);
    }
 }).error(function() {});


function onEachFeature(feature, layer) {
   var popupContent = "<p>Hello world</p>";

   layer.bindPopup(popupContent);
}

Here is a working example: http://plnkr.co/edit/jQVoO3KTvfCisdpkjFrI?p=preview