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.