Updating Leaflet Marker Position Every x Seconds with JSON

Question

I have a marker on my map representing the current location of the International Space Station (pulled from http://open-notify-api.herokuapp.com/iss-now.json?callback=?). I'm also trying to get it to move every 1 second to follow along with the station's orbit.

This is the code I have now:

$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {                 
               var latitude = data["data"]["iss_position"]["latitude"];
               var longitude = data["data"]["iss_position"]["longitude"];
               var iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
               $(function() {
                 setInterval(function() {
                    iss.setLatLng([latitude,longitude]).update();
                 },1000);
               });
              });

Here's everything in a jsFiddle: http://jsfiddle.net/zmkqu/

It seems to place the marker in the correct position on load, but does not update every second as it should be. Any tips on what I'm doing wrong?

Thanks!

Solution

You should put the whole Ajax call inside the setInterval callback. Right now you are setting the marker to the same position very second, because data does not change. You have to make a new call every second:

var iss;

function update_position() {
    $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
        var latitude = data["iss_position"]["latitude"];
        var longitude = data["iss_position"]["longitude"];
        if (!iss) {
            iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map);
        }
        iss.setLatLng([latitude,longitude]).update();
        setTimeout(update_position, 1000);
    });
}

update_position();

DEMO

Note: It's better to use setTimeout together with Ajax calls, since you don't know how a long it takes to get the response.

Comments

[Febrium]

Ah, that makes much more sense (and works great)!. Thanks for your help, Felix.

[Felix Kling]

You're welcome :) Don't forget to mark the answer as accepted (as soon as you can) by clicking the tick next to it. It marks the question as answered (and gives you reputation points). You should do this for your old questions too if they have an answered that helped you.

[jotamon]

This doesn't seem to be working anymore. Did something change with $getJSON ?

[Felix Kling]

@snowgage: No, but it seems they changed the data structure of the response. Updated the code and demo. Thanks!

[gtato]

For me setLatLng updates the coordinates of the marker when i see it in debugger, but it's position in the map does not change. update() does nothing.