Easy Peasy Lemon Squeezy Mapbox Maps and Layers in Tableau 9.2

Multiple-Layers-Tutorial2.png

One of the features that I am most excited about in 9.2 is the ability to add Mapbox map layers from the UI in Tableau instead of having to deal with all the .tms hackery!  If you are a beta tester for 9.2 and are publishing to Tableau Public, this is already available to you to use!  Ready to check out how easy it is now?  I’m going to use my Skyfall themed map to show off how easy it is to add multiple layers, and then we will create a “bog normal view swapper” (a very technical term that Allan Walker seems to use a lot).This will allow the user to change the maps and layers in the background of your published workbook.

If you haven’t already, please read the previous 2 tutorials on:

  1. Fast and Fabulous Custom Maps using Mapbox in Tableau where you will learn to create customs styled maps in Mapbox Classic that are so cool, that this one ended up in the Keynote on a jumbo screen in Vegas at #TC15.
SFGiants Mapbox Map in Tableau

2.  Create multiple custom map layers in Mapbox that you can toggle on and off in Tableau where you will learn to add and style your own shapefiles and create multiple layers.

Now that you know how to create fierce map styles multiple layers, let's look at how easy it is to add them in the new Tableau 9.2 UI.  For this example I will be using a map that I wanted to emulate the amazeballs UX in Skyfall created by Shaun Yuen.

Sky Fall Map

I wanted a background map that was similar, but then wanted to add multiple layers that had information on police and fire districts, transportation routes, etc. for a viz on SF Crime data that Allan, Jeff Shaffer and I were doing on the Tableau UX of the future.  My version is below:

Anya Skyfall

If you want to play along, then I suggest you go to Mapbox Classic and make a similar style.  To create mine, I started with the Mabox Style Dark and tweaked it with a lot of cyan (#OOFFFF) , a custom font called HyperSpace, and two custom grid patterns saved as a .png to make the water.  Go ahead.  I'll wait for you...

Anya waiting

Are you done yet?  Is it two am?  Did you down the whole bottle of wine?  Great!  Or if you were lazy and just went off to take a nap, you can always use mine  DataBlickSkyfallBlue.tm2  Let's continue.  Once you publish your new fancy pantsy map, be sure to copy and paste your Map ID into a text editor for easy access later.  You will hopefully have a few of these by the time we are done, one of each layer you want to show and be able to turn on and off in Tableau.

save map id

Next we are off on the hunt to get some fun layers to add.  I got most of mine from SF Open Data.

download shape files

In my case I downloaded Muni, Ferry, Rail, LifeLines, Fire Districts and Police District shapefiles.  Each one will be it's own layer in Tableau, so I can toggle them on and off depending on the type of crime incident I am analyzing.  This was the dashboard created by Jeff Shaffer which had streaming information from several services.  Ideally, as a crime was being called in, the map layers could be triggered by keywords, so that only relevant layers would show based on the situation and context.  We aren't quite there yet :-).  It also was featured by WTF Viz which really made us laugh because it was supposed to be ridiculous (and included a 3D pie courtesy or Mr. Rediculous himself, Noah Salvaterra).

Police Dashboard

So after you have uploaded your shapefiles to Mapox, styled them, and then uploaded your styles, write down the Map ID of each of your layers.  You did read the other tutorials right?  Okay, fine.  Here is the short version of it:

Add a new dataset

Upload data

Browse to and upload you shapefiles.  I love the little people that Mapbox has to guide you.  They really remind me of the "Dumb Ways to Die" video.  Go take a break and watch it if you like.  I am hoping that Mapbox makes t-shirts and stuffies with their characters (and send me some, hint hint).

Upload

Grab their Map IDs!

data id

Create a new style based on your Map ID.  You can put multiple layers together in Mapbox, but we want to be able to toggle them on and off in Tableau.

new style

Style away to your hearts delight.  Remember that these layers are going to go on top of your base layer (the Skyfall one) so you want to make sure they are transparent except for the shapes or whatever else you are wanting show off in the layers.  Mine for the Fire districts is very basic.  Once again, grab the Map ID from your layer style and add it to that text file where you pasted the one for your base layer.

styled shape id

Rinse and repeat, until you have all of your layers styled and ID's in hand.   It's finally time to go play in Tableau!  You should have a list in your text editor like this:

Your Access Key from your Mapbox account:

  • pk.eyJ1IjoiZGF0YWJsaWNrIiwiYSI6IjM5anE0eTQifQ.XfwI7Wcu7EFKoXXXXXXXX

Your styled layer IDs:

  • Skyfalldatablick.2986XXXX
  • Muni datablick.a586XXXX
  • Ferrydatablick.bcb0XXXX
  • Raildatablick.77cXXXX
  • LifeLines datablick.0798XXXX
  • Fire Districts datablick.8b59XXXX
  • Police Districtsdatablick.56b1XXXX

Open a new workbook in Tableau 9.2 (version 3 at the time of this post), and pick a data set.  You could have downloaded the crime data while you were on the SF Open Data site, but if you didn't, SuperStore will work just fine.  Add a geographic dimension and a metric.  Then go to your Map menu and select Background Maps, and then and select Map Services.

mapservices

Click on the add button and then, there it is!  WOOT!  The magic Mapbox Maps button.

Mapbox Maps Option

You can easily wuss out and use one of the pre-made Mapbox styles, because they are fabulous, but then we would have just wasted all that time, and we are almost done!

Mapbox Pre-made Styles

Instead get ready to copy and paste like a madwoman!  You have to do the ID's one at a time.  When you are done, you should look something like the below.  The order is important as the layers will appear in that order in Tableau.  I put the Skyfall base map at the top.

adding layers in Tableau

Go back to the Map menu and your beautiful new, multi-layered map will now be in your list of background maps!  Go ahead.  Select it!

Turn Your Map On

To play with your layers, you will have to go back to the Map menu one more time and select Map Layers.  You will now see them listed on the right.  Turn them on an off.  Party!!!!

Toggle Layers

Now for some extra fun.  Allan discovered this about 10 seconds after being given 9.2 with this feature enabled.  Go back to your Map menu and select Map Services.  highlight your new map and click the export button.

Export your tms

You will now be prompted to save a copy in your Mapsources folder, and after you do, you will be able to use this map in any viz of your choosing!  If you needed to really cheap out for the holidays, you could give your .tms to all your friends and family!  Better than fruitcake, right?  I might swoon for a fella with a hella cool map .tms.  Just sayin'.

export tms two

Super happy yet?  One thing that would be really cool would be to allow the users to switch the layers on an off once the viz was published.  I'm still hoping for that, but for now, we need to build a "bog normal view swapper".  This will allow the user to select a pre-defined combination of layers using a parameter drop down in the front end.

The first step is to make a parameter and add a descriptive name to the layer views.

Parameter

Create a Calculated field that is just that parameter.

calculated field

Then put that new Dimension onto the Filters shelf.

Filter

For our first view, we can just leave the default, the first value in the Parameter list.  Back on your sheet, make sure only the base map and Ferry layers are enabled.  Change the name of the sheet to Ferry.

Ferry

Duplicate a sheet for each of the categories listed in your parameters and toggle on only the relevant map layers.  Change the filter on Map Layers on each sheet by removing the filter on Ferries, and using a custom value type in that matches the category in your parameter list.  So for Muni, I would type in "Muni" and click the plus sign to add it.  Click okay.  WTF?  Where did my viz go?  Chillax.  You just need to show your parameter control and change the value in the drop down to pick Muni.

Show Parameter Control

Whew.  Your viz is back. Repeat for each of the other sheets until you have one sheet for each map layer combo you want the users to be able to pick from.  Then we get to add them all to a dashboard.  After creating new dashboard, add a vertical layout container.  Then drag each of the sheet into that container, make sure they fit the Entire View,  and hide their titles.  As soon as you hide the titles, they will magically disappear except the map that has the filter associated with the current parameter selection.  Add your parameter control to the dashboard so the user can select which layers to show.

Multiple Layer Dashboard

Style it all a bit more and publish away to Public!  How amazing are you!  Go out to a restaurant or bakery and treat yourself to a totally decadent desert and coffee!  You deserve it!