Leaflet geoCSV Popup Customisation

Question

I am currently using the leaflet geoCSV plugin to bring through CSV data into the map frame.

I am struggling to be able to customise the popup to only show certain attributes of the CSV and different titles. Using the Bankias Example the popup currently uses the script below to pull through all of the attributes using the titles within the CSV.

var popup = '';
    for (var clave in feature.properties) {
        var title = bankias.getPropertyTitle(clave);
        popup += '<b>'+title+'</b><br />'+feature.properties[clave]+'<br /><br />';
    }
    layer.bindPopup(popup);

The issue I have is that I cannot change the titles within the CSV as they are exported from a database so I therefore need to manually change them in the script above.

Using the Bankias example would it be possible to only show the "Localidad" and "Provincia" attributes and change the titles to "locality" and "province" without having to change them in the CSV?

Answer 1

There should be no special difficulty in building a specific popup content like what you describe.

The only trick is to note that the keys in feature.properties are derived from your CSV first line (when using option firstLineTitles as in the mentioned example), but lower-cased and with white-spaces replaced by underscores (_).

So the "Localidad" data can be accessed through feature.properties["localidad"] for example.

Then you would achieve what you describe with a code like:

var bankias = L.geoCsv(null, {
    onEachFeature: function (feature, layer) {
        var popup = '';
        if (feature.properties["localidad"]) { // lower-cased
          popup += '<b>locality</b><br />' +
            feature.properties["localidad"] + '<br /><br />';
        }
        if (feature.properties["provincia"]) {
          popup += '<b>province</b><br />' +
            feature.properties["provincia"] + '<br /><br />';
        }
        layer.bindPopup(popup);
    },
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon:L.icon({
                iconUrl: 'marcador-bankia.png',
                shadowUrl: 'marker-shadow.png',
                iconSize: [25,41],
                shadowSize:   [41, 41],
                shadowAnchor: [13, 20]
            })
        });
    },
    firstLineTitles: true // This overrides anything set in "titles" option.
});

Demo: http://plnkr.co/edit/YKfiYacRo4K1ie9CVq4d?p=preview

If that is an option for you, you might be interested in doing that functionality yourself based on individual libraries (e.g. PapaParse to load a CSV by AJAX) so that you get more robust CSV parsing and more control.