Combining data sources without control structures

Posted on 5. November 2015

Inspired by a tweet of Dominikus Herzberg (@denkspuren), I have created a small JavaScript which combines location data with Google Maps to show the current location of the ISS above the ground in almost real-time without any control structures in the code.

1. Create Map and Marker

var map;
var marker;

// init google map and marker after window.load
google.maps.event.addDomListener(window, "load", function () {
    
    // init map
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 5
    });
    
    // init marker
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(0, 0),
        map: map,
        icon: "http://www.lizard-tail.com/isana/tracking/image/iss.png"
    });
});

2. Add timer

This can be seen as some kind of control structure. But it is just a timer for refreshing the map every x milliseconds.

// refresh map every 1000 miliseconds
var t=setInterval(updateMap, 1000);

3. Get current location of the ISS and refresh map and marker

// refresh map every 1000 miliseconds
var issLocationApi = "https://api.wheretheiss.at/v1/satellites/25544";

// callback function for refresh
function updateMap() {
    $.getJSON(issLocationApi, function( data ) {
        // set new center of Map
        map.setCenter({lat: data.latitude, lng: data.longitude});
        
        //set new Marker position
        marker.setPosition(new google.maps.LatLng(data.latitude, data.longitude));
    });     
}

Example

You can find the whole code on JSFiddle.