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.

Answer 1

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.

Answer 2

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

Answer 3

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