1

I am using the Leaflet GeoCSV plug in to try and add markers with popups to my map. With the help of this post, I have been able to add the markers to the map, but I still want to add a popup to the those markers.

I tried using code from the previously mentioned post and used one of the examples of the plug in and played around with it, but I did not have any success with that.

The code I used to declare how the markers should be added (works for adding the markers but not the popups):

(function() {                                                                             
  'use strict';            
  var blob = new Blob([csvContent], { type: 'text/plain' });
  var blobUrl = URL.createObjectURL(blob);
  $.get(blobUrl, function(csvContents) {
    var geoLayer = L.geoCsv(csvContents, {firstLineTitles: true, fieldSeparator: ';'});
    map.addLayer(geoLayer);
  });
})();

Othe Code I played around with (example from plug in):

L.geoCsv(null,{
  titles: ['lat', 'lng', 'popup'],
  fieldSeparator: ';',
  lineSeparator: '\n',
  deleteDobleQuotes: true,
  firstLineTitles: false,
  onEachFeature: function (feature, layer) {
    var popup = '';
    for (var clave in feature.properties) {
      var title = geo_csv.getPropertyTitle(clave);
      popup += '<b>'+title+'</b><br />'+feature.properties[clave]+'<br /><br />';
    }
    layer.bindPopup(popup);
  }
});

My currnet csv file:

var csvContent = `lat;lng;title
52;8;test
8;52;test2`;

Note that the csv is converted to a js file to get around CORS policy.

2
  • So you want to display title value in you popup?
    – TomazicM
    Jul 25 at 6:46
  • yes, so one popup says "test" and the other one "test2"
    – CLa
    Jul 25 at 6:50

1 Answer 1

2

GeoCSV plugin returns data from additional columns (besides lat and lng) of CSV file as feature properties.

Relevant part of code to add popup with content from title column would then look like this:

var geoLayer = L.geoCsv(csvContents, {
  firstLineTitles: true,
  fieldSeparator: ';',
  onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.title);
  }
});

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.