[GIS] Adding properties to pop ups in leaflet maps

featureshtmlleafletpopup

I have a leaflet map which display pop-ups that give the name of a country when clicked. How can I add additional properties and have them all displayed, similar to this map http://lotrproject.com/map.

For example, how can I make my Iceland pop-up feature display the properties for "name" and "language", rather than just "name".

var countries = [
        {   type: "Feature",
            properties: { name: "Iceland", language: "Icelandic"},
            geometry: { type: "Point", coordinates: [2535,911] }
        },
        {   type: "Feature",
            properties: { name: "Ireland" },
            geometry: { type: "Point", coordinates: [1324, 1580] }
        },
        {   type: "Feature",
            properties: { name: "England" },
            geometry: { type: "Point", coordinates: [1498, 1662] }
        },
        {   type: "Feature",
            properties: { name: "France" },
            geometry: { type: "Point", coordinates: [1608, 1918] }
        },
        {   type: "Feature",
            properties: { name: "Italia" },
            geometry: { type: "Point", coordinates: [1923, 2093] }
        },
        {   type: "Feature",
            properties: { name: "Hispania" },
            geometry: { type: "Point", coordinates: [1374, 2148] }
        },
    ];

    var layerCountries = L.geoJson(countries, {
        // correctly map the geojson coordinates on the image
        coordsToLatLng: function(coords) {
            return rc.unproject(coords);
        },
        // add a popup content to the marker
        onEachFeature: function (feature, layer) {
            if (feature.properties && feature.properties.name) {
                layer.bindPopup(feature.properties.name);
            }
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
                    radius: 8,
                    fillColor: "#800080",
                    color: "#D107D1",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });
        }
    });

Best Answer

In a Leaflet popup you can just write plain HTML with anything you want. So instead of writing 

layer.bindPopup(feature.properties.name);

you could simply write

layer.bindPopup('<h1>'+feature.properties.name+'</h1><p>Language: '+feature.properties.language+'</p>');

If you would like to display automatically all properties as a table inside the popup window, you could build up your HTML dynamically, something like:

var popupContent = '<table>';
for (var p in feature.properties) {
    popupContent += '<tr><td>' + p + '</td><td>'+ feature.properties[p] + '</td></tr>';
}
popupContent += '</table>';
layer.bindPopup(popupContent);
Related Question