Update marker position json Leaflet and WebGLEarth

Question

This question is related to this question: Updating Leaflet Marker Position Every x Seconds with JSON. Only I want to project the map created with Leaflet onto a 3D globe with WebGLEarth. Normally you can combine Leaflet and WebGLEarth by replacing L.map, L.marker and so on with WE.map, WE.marker in your original Leaflet code.

I would like to have the current location of the International Space Station projected on my 3D globe, so I replaced the L.marker in the update_position function of this code...

var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg';
            var subDomains = ['otile1','otile2','otile3','otile4'];
            var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 11,     subdomains: subDomains});

            var map = new L.Map('map', {layers : [cloudmade]}).fitWorld();

var iss;

function update_position() {
$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {
    console.log(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

...by WE.marker. Unfortunately, the updating of the position doesn't work anymore on my 3D globe, whereas it did work on the 2D map. I tried adding

setInterval(update_position,2000);

just above update_position();, then the marker gets updated a few times (~5) and then suddenly stops. If I interact with my mouse on the globe by panning, the marker gets updated to its current position and gets updated a few times afterwards, and eventually stops again.

Main Question: Does anyone know how to fix this so that I have a continuous marker update?

Additional Question: Ideally I would like the International Space Station track to look like https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases, with a colored path the station travelled in its last orbit around the earth. Any tips on how to do this?

Thanks in advance!

[Edit 23-1-2015: I managed to update it continuously by making a new variable for iis, namely iis2. Why this works is not clear to my. Unfortunately, all 'old' markerpositions don't dissapear, so I get a blurred marker track.

    var iss;
var iis2;

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

]

Shafiq Mustapa Shafiq Mustapa · Accepted Answer · 2017-08-18T14:58:59

remove the marker

var iss;
var iis2;

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

Update marker position json Leaflet and WebGLEarth

1 Answers