2

I've produced Leaflet map based on the CSV data as per the project below: https://github.com/HandsOnDataViz/leaflet-map-csv https://handsondataviz.org/leaflet-maps-with-csv.html

It works well, although I am stuck on one functionality. Namely, I would like to have the circle with a radius populated when clicking on the marker.

My code looks like this:

 $.get('survey.csv', function(csvString) {
        var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;

        for (var i in data) {
            var row = data[i];

            var marker = L.marker([row.lat, row.lng], {
                opacity: 1
            }).bindPopup('<b> Name: </b>' + row.sp + '<br><b> Phone: </b>' + row.phone).on('click', function(e) {
                console.log(data);
            });
            marker.addTo(map).on('click', addCircle).on('popupclose', removeCircle);

            function removeCircle() {
                map.eachLayer(function(layer){
                    if (layer instanceof L.Circle)
                    map.removeLayer(layer)
                });
            }

            function addCircle(e) {
                coords = e.latlng
                var radius = row.radius * 1560
                removeCircle()

                var circle = L.circle([coords.lat,coords.lng]).addTo(map)

                circle.setStyle({
                    color: 'black',
                    fillcolor: 'black'
                })
                circle.setRadius(radius)
            }
        }
    })

and it doesn't work, because I am getting an error:

Uncaught Error: Invalid LatLng object: (NaN, -0.351635159)

at:

  circle.setRadius(radius)

When the radius is defined as a number, everything is fine. When I try to assign the radius defined in my CSV file under column radius by calling row.radius, the error appears.

I tried to define the csv data again within the addCircle(e) function, but it didn't work either. How could I set the csv-based radius on my pop-up circle?

enter image description here

1
  • What does your csv file look like?
    – XaC
    Jan 23, 2023 at 12:43

1 Answer 1

1

Problem is that you are defining functions addCircle() and removeCircle again and again in for (var i in data) loop within $.get('survey.csv', function(csvString) call.

Just move those definition outside:

function removeCircle() {
  map.eachLayer(function(layer){
  if (layer instanceof L.Circle)
    map.removeLayer(layer);
  });
}

function addCircle(e, row) {
  var coords = e.latlng
  var radius = row.radius * 1560
  removeCircle();

  var circle = L.circle([coords.lat,coords.lng]).addTo(map);

  circle.setStyle({
    color: 'black',
    fillcolor: 'black'
  });
  circle.setRadius(radius);
}

$.get('survey.csv', function(csvString) {
  var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
  for (var i in data) {
    var row = data[i];
    var marker = L.marker([row.lat, row.lng], {
        opacity: 1
    }).bindPopup('<b> Name: </b>' + row.sp + '<br><b> Phone: </b>' + row.phone).on('click', function(e) {
      console.log(data);
    });
    marker.addTo(map).on('click', function(evt) {
      addCircle(evt, row);
    }).on('popupclose', removeCircle);
  }
});
4
  • When I move them outside I have the following error: Uncaught ReferenceError: row is not defined they must be inside the csv function
    – Geographos
    Jan 23, 2023 at 14:44
  • Yes, I forgot about row variable. See modified answer.
    – TomazicM
    Jan 23, 2023 at 14:57
  • Now the same error as at the very beginning: Uncaught Error: Invalid LatLng object: (NaN, -0.3597904) but I see that the reason might be at this line: var marker = L.marker([row.lat, row.lng] which throws another error: Uncaught Error: Invalid LatLng object: (undefined, undefined) despite presence of all markers.
    – Geographos
    Jan 23, 2023 at 15:09
  • Without your survey.csv file it's hard to say what/where/why it goes wrong.
    – TomazicM
    Jan 23, 2023 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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