Add all features to a popup using in Leaflet using WMS GetFeatureInfo

Question

I'm using the function below to successfully add data to a popup in Leaflet.

Unfortunately, only the data from the last feature found is added. Is there any way to add the data from all features found to the popup.

function identify (e) {

var BBOX = map.getBounds().toBBoxString();
var WIDTH = map.getSize().x;
var HEIGHT = map.getSize().y;
var X = map.layerPointToContainerPoint(e.layerPoint).x;
var Y = map.layerPointToContainerPoint(e.layerPoint).y;
var url = 'http://maps.dartmoor.gov.uk/geoserver/wms/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&layers=general:dnpa_planapps&BBOX='+BBOX+'&FEATURE_COUNT=5&info_format=application/json&propertyName=appcode,url&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&query_layers=general:dnpa_planapps&SRS=EPSG:4326&buffer=15&X='+X+'&Y='+Y;  

$.ajax({
    url:url,
    datatype: "json",
    type: "GET",
    success:handleJson
    }); 
    function handleJson(data) {
    for (var i = 0; i < data.features.length; i++) {
    var feature = data.features[i];
    console.log(feature)
        L.popup()
        .setLatLng(e.latlng)
        .setContent(L.Util.template("<h2>{appcode}</h2><p>{url}</p>", feature.properties))
        .openOn(map);
        }
    }
}

Answer 1

I think your loop needs to be something like:

var txt="";
for (var i = 0; i < data.features.length; i++) {
    var feature = data.features[i];
    console.log(feature);
    txt = txt.concat( L.Util.template("<h2>{appcode}</h2><p>{url}</p>", feature.properties));     
 }
 L.popup()
   .setLatLng(e.latlng)
   .setContent(txt)
   .openOn(map);