CODEWITHSUNDEEP
javascripthtmlleafletarcgisleaflet.markercluster
Zee
Zee

Reputation: 9

getting error in showing markers on the leaflet map

I am using leaflet map with my data in a csv file for markers. the markers don't appear on map. cant sort the problem.

map.js

'''

let path = "data/ppv_full.csv";

// create the map
function createMap(){
    map = L.map('map').setView([0,0],3);


// function to read csv data
function readCSV(){
    Papa.parse(path, {
        header: true,
        download: true,
        complete: function(data) {
            console.log(data);
            
            // map the data
            mapCSV(data);

        }
    });
}

function mapCSV(data){
    
    // loop through each entry
    data.data.forEach(function(item,index){
        // create marker
        let marker = L.marker([item.latitude,item.longitude])

        // add marker to featuregroup
        markers.addLayer(marker)
    })

    // add featuregroup to map
    markers.addTo(map)

    // fit markers to map
    map.fitBounds(markers.getBounds())
}
'''

this is the error i am getting in the console:

LatLng.js:32 Uncaught Error: Invalid LatLng object: (undefined, undefined)
    at new D (LatLng.js:32:9)
    at j (LatLng.js:123:11)
    at i.initialize (Marker.js:102:18)
    at new i (Class.js:22:20)
    at t.marker (Marker.js:385:9)
    at map.js:42:18
    at Array.forEach (<anonymous>)
    at mapCSV (map.js:40:12)
    at Object.complete (map.js:31:4)
    at l.parseChunk (papaparse.min.js:7:6757)

the HTML page only shows the map without any markers.

Upvotes: 0

Views: 731

Answers (1)

Isma&#239;l Mourtada
Isma&#239;l Mourtada

Reputation: 472

This means that there is at least one item in your entries, that:

  • Either doesn't have a latitude and longitude property
  • Or has both its latitude and longitude properties set to undefined You need to use a debugger to enter the forEach loop and inspect the item value.

(or use console.log, but that isn't proper debugging)

Upvotes: 0

Related Questions