Leaflet JS with loop in JavaScript

Question

I'm trying to create a loop to add multiple markers to an Leaflet map. One marker works, but when I try to do this with a loop, the markers don't work. I receive the data for the markers from a google spreadsheet.

$(document).ready(function() {
    console.log("ready!");

    // ID of the Google Spreadsheet
    var spreadsheetID = "spreadsheetID";
    // Make sure it is public or set to Anyone with link can view 
    var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/1/public/values?alt=json";

    $.getJSON(url, function(data) {

        var entry = data.feed.entry;
        var amount = entry.lenght;

        var i;
        for (i = 0; i <= amount; i++) {

            var lat = data.feed.entry[i]['gsx$lat']['$t'];
            var lon = data.feed.entry[i]['gsx$lon']['$t'];
            var name = data.feed.entry[i]['gsx$name']['$t'];
            var to = data.feed.entry[i]['gsx$to']['$t'];
            var time = data.feed.entry[i]['gsx$time']['$t'];
            var tel = data.feed.entry[i]['gsx$tel']['$t'];

            var marker = L.marker([lon, lat]).addTo(mymap);
            marker.bindPopup('<b>Name:</b> ' + name + '<br><b>To:</b> ' + to + '<br><b>Time:</b> ' + time + '<br><b> Tel:</b> ' + tel);
        }
    })
});

**It's just a typo** in this line: `var amount = entry.lenght;` `lenght` should be `length`. (Also note that in your loop, it should be `< amount`, not `<= amount`.) — T.J. Crowder, Apr 28 '18 at 13:14
Also: `var marker = L.marker([lon, lat]).addTo(mymap);` should be `var marker = L.marker([lat, lon]).addTo(mymap);` - when you use a simple array as a `LatLng`, the `Lat` comes first. — peeebeee, May 01 '18 at 13:49

score 0 · Answer 1 · answered May 01 '18 at 13:51

Your code with typo and LatLng problem fixed:

$(document).ready(function() {
console.log("ready!");

// ID of the Google Spreadsheet
var spreadsheetID = "spreadsheetID";
// Make sure it is public or set to Anyone with link can view 
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/1/public/values?alt=json";

$.getJSON(url, function(data) {

    var entry = data.feed.entry;
    var amount = entry.length;

    var i;
    for (i = 0; i < amount; i++) {

        var lat = data.feed.entry[i]['gsx$lat']['$t'];
        var lon = data.feed.entry[i]['gsx$lon']['$t'];
        var name = data.feed.entry[i]['gsx$name']['$t'];
        var to = data.feed.entry[i]['gsx$to']['$t'];
        var time = data.feed.entry[i]['gsx$time']['$t'];
        var tel = data.feed.entry[i]['gsx$tel']['$t'];

        var marker = L.marker([lat, lon]).addTo(mymap);
        marker.bindPopup('<b>Name:</b> ' + name + '<br><b>To:</b> ' + to + '<br><b>Time:</b> ' + time + '<br><b> Tel:</b> ' + tel);
    }
})
});

Leaflet JS with loop in JavaScript

1 Answers1