Leaflet throwing "Uncaught TypeError: Cannot read property 'lat' of undefined" when adding new marker to map

Question

I'm trying to loop through the results of an ajax call to create markers for sensors on click. For now, I just want the markers to show up when I click a button. This is not working. After debugging, it might be an issue with the timing / concurrency issue, but previous, similar issues resolved it using window.SetTimeOut(). This did not work for me. I'm including this code below and screenshots of the error messages:

Screen Shot of Leaflet where latlng object is null

Screen shot of error in console

This is my code

function sensorLayer(response) {
  response.forEach(function(item) {
    if (item["Latitude"] !== null && item["Longitude"] !== null) {
      window.setTimeout(() => {
        var mark = new L.marker((parseFloat(item["Latitude"]), parseFloat(item["Longitude"])))
          .addTo(map);
      }, 100);
    }
  });
}

Here's the call:

document.getElementById("sensorSwitch").addEventListener("click", function(){  $.ajax({  
url: ' ',//I deleted this
data: {
  db: ' ',
  q: "SELECT MEAN(\"pm2.5 (ug/m^3)\") from airQuality where time >='2017-09-06T00:00:00Z'"
},
success: function (response){
  console.log(response);  });  

Any help is appreciated! It won't let me add more that 2 links, otherwise I'd include an example of the data that I get back (oversharing isn't caring, I suppose).

Answer 1

You probably want to instantiate an L.latLng with your coordinates, or pass them as an array, instead of wrapping your 2 coordinates with normal parenthesis (lat, lng):

var mark = L.marker(
  L.latLng(
    parseFloat(item["Latitude"]),
    parseFloat(item["Longitude"])
  )
);

or:

var mark = L.marker([
  parseFloat(item["Latitude"]),
  parseFloat(item["Longitude"])
]);

BTW, you should definitely avoid using an SQL query originated from Client code. This is a classic security hole for code injection.

Answer 2

The problem may be because of passing an array and than in the receiver function again adding a parenthesis for coords access. For example you have function that accept an object that has an array that holds the lat and lng coords when you call this function and pass it the object having coords and inside a function accessing it using array bracket can cause this issue Just remove the [] from array coords

_renderWorkoutMarker(workout) {
    L.marker(workout.coords)
      .addTo(this.#map)
      .bindPopup(
        L.popup({
          maxWidth: 250,
          minWidth: 100,
          autoClose: false,
          closeOnClick: false,
          className: `${workout.type}-popup`,
        })
      )
      .setPopupContent('workout')
      .openPopup();
  }

in the code above I mistakenly added the brackets like L.marker([workout.coords]) but the actual code is L.marker(workout.coords) Thanks