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 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 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 , eg
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'
Many thanks if you can help to create our map resource. Andy
var bankias = L.geoCsv(null, { onEachFeature: function (feature, layer) { var popup = 'SID='+ feature.properties['SID'] +'
'; popup += 'Colour='+ feature.properties.Colour +'
'; 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 += ''+title+': '+csvtext+'
'; //} } 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 });
أكثر...
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 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 , eg
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'
Many thanks if you can help to create our map resource. Andy
var bankias = L.geoCsv(null, { onEachFeature: function (feature, layer) { var popup = 'SID='+ feature.properties['SID'] +'
'; popup += 'Colour='+ feature.properties.Colour +'
'; 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 += ''+title+': '+csvtext+'
'; //} } 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 });
أكثر...