Step 1 - Build a Tableau Viz
The first step is creating a Tableau visualization that plots a point on a map using a parameter. This requires two parameters and two calculated fields.
Create a new parameter called Lat and use the default floating format. Set the starting value at 39.123
Create a new parameter called Long and use the default floating format. Set the starting value at -84.51
Create a new calculated field Latitude and set it equal to the parameter [Lat]
Create a new calculated field Longitude and set it equal to the parameter [Long]
Right click on Latitude and set the "Geographic Role" to Latitude.
Right click on Longitude and set the "Geographic Role" to Longitude.
Place Longitude on Column and Latitude on Rows.
You should now have a visualization that plots a point on a map in Cincinnati, Ohio. Pretty simple, right? Just two quick parameters and two calculated field. Now style the visualization as you wish and save it to Tableau Public.
Optional step - find a space station icon to use as a custom shape.
Using a basic HTML page, the code below retrieves the latitude and longitude from this JSON feed and stores them in the variables Lat and Long.
Note - because of the 'jsonp' it is very important that the Tableau function is called inside the GetValue function.
The code below creates a workbook variable and then 3 additional variables for a placeholderDiv, the URL and options. Once those are all created, then the last line of code is used to put it all together, var viz = new tableauSoftware.Viz(placeholderDiv, Url, options);
onFirstInteractive is used to set up the workbook and getValue is the functon we created above to get the very first reading of the latitude and longitude. I call the function so that the viz updates the ISS position immediately after it loads. var viz = new tableauSoftware.Viz(placeholderDiv, Url, options); puts all the pieces together for the JavasScript API using the variables that were just set (placeholderDiv, Url, options). I added window.setInterval("getValue()","8000"); which refreshes the browser every 8 seconds.
Note - the URL needs to be set to read your Tableau Public viz. The format of the URL is: https://public.tableau.com/views/[VIZ NAME}/[WORKSHEET NAME]?:showVizHome=no
The last step in the code above is creating a function that passes the parameters to a Tableau workbook. In step 1 we created two parameters in Tableau, one for Lat and one for Long. The function LatLong(a,b) creates a function that changes the workbook parameters using workbooka.changeParameterValueAsync("Lat", [a]); and workbooka.changeParameterValueAsync("Long", [b]);. Remember, this function is called above as the last line of code in the GetValue function. In other words, after the GetValue returns the latitude and longitude of the space station and holds them in variables, then it calls this functions to pass them to Tableau into the parameters that are set up.
You now have all the code you need to control your viz. You can add some additional styling of the webpage background color and CSS styling of the viz as you see fit. Here's what the finished code looks like all put together.