Leaflet : Invalid LatLng object: (undefined, undefined)

Question

l am trying to get objects keys from JSON API url , content on latitude and longitude from server . The data json api content on Object keys and those keys are change all time . l want to get only the coordinates inside of those Object keys and add it to leaflet map marker as array then show on map . But the problem is i have Error: Uncaught (in promise): Error: Invalid LatLng object: (undefined, undefined)

  //coords
  points: Array<any> = [];

  // short data json
   data =[
{

  "22a7f183": [
    "502F0C",
    56.9227,
    23.9790,
    16,
    0,
    0,
    "0000",
    "T-EVRA43",
    "",
    "",
    1573389319,
    "RIX",
    "",
    "",
    1,
    0,
    "GPSMONT",
    0,
    ""
  ],
}]

  MarkerMap() {      

      this.points = Object.keys(this.data)
      .map(key => this.data[key])
      .map((position) => ({
        lat: position[1],
        lng: position[2]
      }));
      this.points.forEach((point) => {

        L.marker([point.lat,point.lng]).addTo(globalMap)
        .bindPopup('Ionic 4 <br> Leaflet.')
        .openPopup();
        console.log(point.lat,point.lng)


      });
    }

Also how can i avoid empty objects insides array ?

Live Code

kklimczak kklimczak · Accepted Answer · 2019-11-10T16:05:51

What is your data source? Maybe, some records don't have coordinates? Did you validate that?

If you have incomplete elements in the array, you can filter the array using the filter method:

this.points = Object.keys(this.data)
  .map(key => this.data[key])
  .map((position) => ({
    lat: position[1],
    lng: position[2]
  }))
  .filter(position => position.lat && position.lng);

Additionally, you should check your coordinates are numbers.

Leaflet : Invalid LatLng object: (undefined, undefined)

1 Answers