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).

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).

• javascript
• leaflet

• hmm, my guess is that one of your markers does not have a latlng - how is the function being called? Can you post your js file please? – stephenmurdoch Commented Oct 19, 2017 at 0:18
• So the problem is that none of the values I have are null; how can a marker have a null latlng if when I make the marker there are no null values? That's why I initially thought it was a concurrency issue. – skitree Commented Oct 19, 2017 at 2:03
• I added the call! – skitree Commented Oct 19, 2017 at 2:09
• I'd add the entire document, but it's over 400 lines long – skitree Commented Oct 19, 2017 at 2:22

2 Answers 2

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.

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