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.

Made with ♥️ and Gatsby © 2024