Why Vizioneer?

My photo
Atlanta, Georgia, United States
The "Vizioneer" comes from mashing two words that have shaped my world for most of my adult life - Engineer and [data] Visualizations (or Vizes to those who know what's up). Graduating from first from Oglethorpe University in Atlanta, followed by Georgia Tech with my Bachelors and Masters in Civil Engineering, all of which taught me to think through anything and everything - problem solving, "engineering" solutions, teaching to the "ah ha" moments - is what I love to do. In 2010 that investigative, engineering mindset intersected a job change and a plunge into the world of Data Analysis. In the search for the next great thing I stumbled on to a data visualization and dashboarding product called Tableau software and things just took off. So now I guess you could call me that engineer with the sweet data visualizations - or just "The Vizioneer" :)

In 2013, I joined the incredible team at Slalom, focusing on Tableau and it's been an amazing experience. Recently in 2014, I was honored and humbled to receive Tableau's highest recognition of being named a Tableau Zen Master. Follow along to see what happens next :)

Sunday, August 17, 2014

Tableau and Google Maps - Finally friends again!

How to integrate the Google Maps APIs with Tableau


Oh mapping, how I love thee. Some of you may know that in a previous life (like less than a year ago) I lived in a transportation world.  A transportation civil engineer by trade, all my analysis was about maps, points and asset management all over the beautiful city of Atlanta.  One of the coolest things that I ever did was to figure out how to create a magical URL that allowed me to feed a latitude and longitude into a Tableau web page and have a fully interactive Google Street View window showing me what was going on at that location.  It was my first really big Tableau hack and when I showed it as part of my potential presentation for TCC 2013 the people that saw it at Tableau had never seen it before (which is probably why I got to speak last year in Washington, DC).  Back then it was a fairly simple and elegant trick, you just needed to have the magical URL and it would work basically just like the example you see below:



 The problem is if you want to recreate this functionality and you start by downloading the above Tableau Public workbook you open it up and immediately see some ugliness: 




So what happened?  The "New" Google Maps happened, that's what.  It's here and it's breaking all the cool stuff that tons of cool people put together.  Here's what happens when you download the Google Maps example from Ben Jones (one of the be known examples of this integration).  It goes from this:



to this:

So what can we do?

This saddened me.  The lowest moment of my sadness happened the night of April 8, 2014 - as I attempted to show how to integrate Google Street View into Tableau for the day 9 (birthday edition) of the Tableau 30 for 30 (it WAS my favorite trick!)  That night I fought with Google for over 2 hours trying to make this work.  I had to switch to Bing maps before I could declare any kind of victory, but it just wasn't the same.  While the "New" Google Maps made it seem impossible, I had the feeling that if I could employ a different skill set and leverage the Google Maps APIs the situation could be made whole again.

This past week I finally had an occasion to dig back into this problem.  And I'm happy to announce that I have returned a victorious man - Google Street View is ours once again!  I have to warn you, it's not as simple as it once was, but if you are bold (and knowing someone who does JavaScript doesn't hurt) this solution can once again make you the coolest kid on the block.  There's two levels of making this work - a fairly basic way that allows you to have this work on a local machine and a more advanced method that allows this to work on any machine.  I'll walk you through both, at least sorta :)

How does it work?

In general terms, here's what we're going to do - we're going to use Tableau URL actions in a dashboard to feed the latitude and longitude of a location selected on a map.  The URL is going to reference an HTML webpage that uses JavaScript to take in the Latitude and Longitude from Tableau and display a Google Street View interactive page.  Sound simple? It's easier than you think.

Getting a Google Maps API Key

First things first - for both solutions you're going to need a Google Maps API key.  Don't have a Google account?  It's time to join the NSA and the rest of us and get one.  Once you have that in place, it's time to get going with your API Keys by going here. Decide which APIs you want to turn on. Me? I turned on most anything that looked like it had to do with Maps and was free :)


Go ahead and make your note of that API key, as we're going to need it in just a minute. 

Set up a Tableau Dashboard

This is as simple as having a map with points on it, bringing it on to a dashboard and adding a blank webpage that will ultimately return our Google Street View.  Here's a simple example:


You're going to take your dashboard, with the map and blank web page and feed it a magical URL - here's what goes into it...

How to setup and create the URL Action

The URL is going to reference one of the HTML files from here (or you can write your own - and send me a copy), which has your Google Maps API key pasted in (this is what you wrote down from above).

The file is then placed by you either on your local machine (like on your computer's C drive ) or a web server (like something that starts with http://....).

 Placing the HTML file on your local machine is simplest, but this means that it can only be accessed by you on this one machine - not very useful if you plan on sharing this dashboard with anyone - or on Tableau Public.

 If you want to share it with the world, you're going to need to use a web server.  A web server is what starts with http://.....  and can be accessed be anyone who can hit the server. Want to set one up?  I did, using an Azure VM and Ben Sullin's favorite WAMP Server, the scope of which is above and beyond what we're going to cover here.  Trust me, me teaching you about VMs and Web Servers would be the definition of the blind leading the blind - but take heart - if I can do it, so can you!

Ok, so once the HTML file is in place (and you note it's location) you can use these example of the URL you'll type into the Tableau URL action. 

If the HTML file is on your local machine, then the URL looks something like this:
file:///<path to file>/gstreetview.html?lat=<Latitude>&lon=<Longitude> 

or for example:

file:///c:/wamp/www/gmaps/gstreetview.html?lat=<Latitude>&lon=<Longitude>

If the HTML File is on a web server, then you just reference that:
http://<server ip or dns name>/<folder>/gstreetview.html?lat=<Latitude (generated)>&lon=<Longitude (generated)>

or for example:

http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=<Latitude (generated)>&lon=<Longitude (generated)>

The file has javascript that takes in the two parameters that get named "lat" and "lon" in the url and returns a Google Street View fullscreen page right there in the dashboard.  So when you put it all together you get something like this:

As you can see there's two tabs - one that's returning a Google Street View window and the other is returning directions for origin-destination routing.  This is using a different HTML file, which is calling on the Google Maps Directions API, and feeding it four parameters OrgLat, OrgLon, DestLat, and DestLon.  The point here is that ALL the APIs for any service could now be in your hands :) meaning that the possibilities are endless!

 Also, so long as I'm running my web server (for which I make zero promises of level of service, and reserve the right to shut down at any time), you can use it for your own use.  Just simply use the following URLs and you'll be able to leverage the Streetview and Directions sheets just as I have without having to host the files anywhere (because I'm hosting them for you - see what a nice guy I am?)

 Street View:
http://tndtableau.cloudapp.net/gmaps/gstreetview.html?lat=<Latitude>&lon=<Longitude>

 Directions:
http://tndtableau.cloudapp.net/gmaps/orgdestdir.html?OrgLat=<DC Latitude>&OrgLon=<DC Longitude>&DestLat=<Latitude>&DestLon=<Longitude>
I hope that helps! Welcome back to Google Maps to the Tableau Toolkit.  Happy Mapping month.  Can't wait to see everyone in Seattle in a couple weeks!

 Nelson

Posted by at 131 comments:
Subscribe to: Posts (Atom)