Leaflet Popup with additional information from GeoJSON

Question

I want to bind the additional information from geojson to a leaflet marker popup. I looked up a few things from the leaflet documentation but it doesn't work.

var map = L.map('map').setView([51.9, 7.6], 11);

L.tileLayer('http://{s}.tile.cloudmade.com/5e4495ff4b0d454eb0443225198b7e6c/997/256/{z}/{x}/{y}.png', {
    maxZoom: 16
}).addTo(map);

var polygon = {
    "type": "Feature",
    "properties": {
        "name":"City BoundingBox",
        "style": {
            "color": "#004070",
            "weight": 4,
            "opacity": 1
        }
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [7.5,52.05],                
            [7.7,51.92],
            [7.6,51.84],
            [7.4,51.94],
            [7.5,52.05]
        ]]
    }
};

var myLayer = L.geoJson().addTo(map);
//myLayer.addData(polygon);

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

<?php 
    $mdjson = file_get_contents("http://xxx/ows?service=WFS&version=1.0.0&outputFormat=JSON&request=GetFeature&typeName=xx:yy&maxFeatures=50");
    echo "var geojsonMD = ".$mdjson.";";    
?>

myLayer.addData(geojsonMD);

L.geoJson(geojsonMD, {
    style: function (feature) {
        return {color: feature.properties.color};
    },
    onEachFeature: function (feature, myLayer) {
        layer.bindPopup(feature.properties.description);
    }
}).addTo(map);

Hope you can help me.

Best regards.

Can you make it a bit clearer what you want to do? Do you want to combine the geoJson donwloaded from the service with the polygon you created yourself? — flup, Jan 26 '13 at 15:11

score 14 · Accepted Answer · answered Jan 26 '13 at 15:38

Assuming the service returns data with similar properties as the polygon, you can indeed add them to one and the same layer.

var myLayer = L.geoJson(geojsonMD, {
     style: function (feature) {
         return feature.properties.style;
     },
     onEachFeature: function (feature, layer) {
         layer.bindPopup(feature.properties.name);
     }
 })

myLayer.addData(polygon);
myLayer.addTo(map);

http://jsfiddle.net/Wn5Kh/ (without the downloaded data, for I do not have the URL)

If the geojsonMD has different feature properties, there's nothing wrong with adding two GeoJson layers. One for the data you retrieve from the service, and one with the polygon.

score 1 · Answer 2 · answered Jan 24 '13 at 18:34

As explained in the Leaflet documentation, you should use the "onEachFeature" to attach a popup with the desired information to each feature of your GeoJson:

The onEachFeature option is a function that gets called on each feature before adding it to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked

You can use it this way:

var myLayer = L.geoJson(polygon, {
    onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

function yourOnEachFeatureFunction(feature, layer){
    if (feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}

In this example the popup will show the content of the property "name" for each clicked feature

But that's not what he wants. He wants to dynamically add some extra data to the json. I think. — flup, Jan 26 '13 at 15:08

score 1 · Answer 3 · answered Jan 28 '13 at 18:47

Now it works. I wanted leaflet automatically gets coords and feature information from a wfs and adding them to the map.

thats the working code and thanks for your help =)

<?php 
                    echo "var geojsonMD = ".$mdjson.";";    
?>

 myLayer.addData(geojsonMD);

 var myLayer = L.geoJson(geojsonMD, {
 style: function (feature) {
     return feature.properties.style;
 },
 onEachFeature: function (feature, layer) {

        var strtype = '';

        if (feature.properties.mdtype == 0) {
            strtype = 'aaa';
        } else if (feature.properties.mdtype == 1) {
            strtype = 'bbb';
        }


     layer.bindPopup('<b>' + feature.properties.mdname + '</b><br>'
                        + strtype + '<br><br>'
                        + feature.properties.mdadress + '<br>'
                        + feature.properties.mdfon);
   }
   })
        myLayer.addTo(map);

Leaflet Popup with additional information from GeoJSON

3 Answers3