1

I run a non-profit online resource called the Megalithic Portal and have created a Leaflet map that uses Leaflet.geoCSV to load in points from a CSV file https://github.com/joker-x/Leaflet.geoCSV

To see ultimately what I'm hoping to create, I've made a map with several thousand megalithic sites, based on data from the Megalithic Portal

Here's the full map http://www.megalithic.co.uk/leaflet_megalith_map-old.html

So far so good but I'm struggling with the JavaScript to get any further

I've created a simpler test map here for debugging purposes:

http://www.megalithic.co.uk/leaflet_megalith_map.html

I can load in the CSV points, and loop around the marker properties as in the code below (var clave) which outputs the CSV data in the marker popups.

What I'm struggling with is how do I refer to the properties individually , e.g.

popup += 'Colour=' + feature.properties.Colour;

(which is wrong as it shows as 'undefined' in the popup)

I think the CSV loads in as an extension of the GeoJSON format http://leafletjs.com/examples/geojson.html

The second thing I'd like to do is to display custom markers set by a column in the CSV.

eg in the properties I have Icon: tp6 Icon: tg60 etc

I would like to create a different marker for each point based on this property - Do I need to do this as part of the onEachFeature and loop around all the markers to set the property?

I've tried the following (full code below) but it doesn't work so I must have the syntax wrong:

iconUrl: 'images/mapic/' + feature.properties.Icon + '.gif'

var bankias = L.geoCsv(null, {
    onEachFeature: function (feature, layer) {
        var popup = 'SID='+ feature.properties['SID'] +'<br />';
        popup += 'Colour='+ feature.properties.Colour +'<br />';
        for (var clave in feature.properties) {
            var title = bankias.getPropertyTitle(clave);
            var csvtext = feature.properties[clave]; 
            //if (title != 'SID' && title != 'Colour' && title != 'Icon' && title != 'CatID' && title != 'TypeID') {
                popup += '<b>'+title+':</b> '+csvtext+'<br />';
            //}
        }
        layer.bindPopup(popup);
    },
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon:L.icon({
                //iconUrl: 'images/mapic/' + feature.properties.Icon + '.gif', // WRONG
                iconUrl: 'leaflet/images/marcador-bankia.png',
                shadowUrl: 'leaflet/images/marker-shadow.png',
                iconSize: [25,41],
                shadowSize:   [41, 41],
                shadowAnchor: [13, 20]
            })
        });
    },
    firstLineTitles: true
});
1

For geoJson you use mixed case as in my JSFiddle example which worked:

http://jsfiddle.net/megalithic/zuz4urb7/

But the CSV plugin lowers the case of all the variables - but by no means obvious so I thought I should follow up with the working code - CSV users be aware!

Working map http://www.megalithic.co.uk/leaflet_megalith_map.html

working code

var bankias = L.geoCsv(null, {
onEachFeature: function (feature, layer) {
var popup = '';
popup += feature.properties.name +'<br>'+feature.properties.type + '<br>' + feature.properties.colour + '<br>';
if (feature.properties.condition == -1) {popup += 'Condition:Destroyed<br>';}
if (feature.properties.condition > 0) {popup += 'Condition:'+feature.properties.condition +'<br>';}
if (feature.properties.ambience > 0) {popup += 'Ambience:'+feature.properties.ambience +'<br>';}
if (feature.properties.access > 0) {popup += 'Access:'+feature.properties.access +'<br>';}
if (feature.properties.accuracy > 0) {popup += 'Accuracy:'+feature.properties.accuracy +'<br>';}
    popup += '<a target="_blank" href="article.php?sid='+feature.properties.sid+'">Link to site</a>';
    layer.bindPopup(popup);
},
pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
        icon:L.icon({
            // modify icon
            iconUrl: 'images/mapic/'+feature.properties.icon+'.gif',
            iconSize: [20,20],
            })
        });
    },
    firstLineTitles: true
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.