Hitta rätt med Tableau och Mapbox

8 januari 2016

Det är nåt speciellt med kartor, eller hur? Det händer ofta när jag visar visualiseringar som innehåller kartor att användare blir väldigt exalterade över att se länder eller städer markerade i olika nyanser av grönt eller rött. Men det där är ju sen gammalt..
Nu tänkte jag i stället visa dels hur du kan använda designade kartor från Mapbox i Tableau och dels hur man kan få in vägbeskrivningar i sin dashboard. Redo?

Till att börja med, Tableau har länge varit grymt på kartor. När det nu också finns en superenkel integration med karttjänsten Mapbox så blev det inte direkt sämre. Mapbox är en karttjänst som låter dig designa egna kartor eller använda ett stort bibliotek av färdiga kartor andra redan gjort. Fantastiskt bra tjänst om du vill ”branda” en karta i företagsfärger så den passar in den grafiska profilen på ett bra sätt. Det är också väldigt användbart om du vill skapa egna lager till kartor. T ex så kanske du vill ha en Sverigekarta med alla era kontor eller butiker utritade direkt i kartan.

Vi flyttar snart till nya lokaler, äntligen, det kommer bli såå bra! Därför tänkte jag det kunde vara kul att exemplifiera Mapboxintegrationen med en dashboard som visar vägen till Sparks nya kontor från några utvalda restauranger, affärer eller hemadresser. Allt för att vi inte ska irra runt på stan och inte hitta till vårt nya hem. Så här kan det se ut när man klickar sig runt i dashboarden.

Fint va? Och väldigt användbar 😉

Men som sagt, jag kan tänka mig ganska många användningsområden där man vill kombinera sina visualiseringar med kartor, färdvägar o dyl.

Hur gör man då?

I det här exemplet är den vänstra kartan en vanlig Tableau-visualisering men med en karta från Mapbox istället för standardkartan som följer med Tableau. För att använda kartor från Mapbox måste du först skapa ett gratiskonto på mapbox.com När du har en användare där får du en API access token som används i Tableau för att koppla upp sig mot Mapbox.

Under menyn Map->Background Maps->Map Services.. lägger du till din Mapbox-koppling. När du klistrat in din token kan du antingen välja att använda en färdig stil från Mapbox eller om du gjort en egen karta på Mapbox kan du välja den.

1 Skärmavbild 2016-01-03 kl. 20.31.46

Om man då använder Basic-typen och gör ett worksheet som visar Sparks kontor och en del platser runtomkring skulle det kunna se ut så här:

2 Skärmavbild 2016-01-03 kl. 20.34.32

Nu kan du testa att byta stil på kartan till någon av de andra förvalda genom att öppna upp kopplingen till Mapbox igen och välja en annan stil. Vad sägs om Pencil?

3 Skärmavbild 2016-01-03 kl. 20.36.25

Då ser kartan ut så här:

4 Skärmavbild 2016-01-03 kl. 20.36.56

Jag tycker de färdiga stilarna som finns på Mapbox är helt ok för att visa vad som är möjligt. Titta gärna på Pirates, Comic eller Wheatpaste för att se på fler annorlunda möjligheter. Som du förstår kan man alltså få kartorna att se ut precis som man vill. Mer inspiration finns i galleriet på Mapbox hemsida.

Vägbeskrivningar

Titta i dashborden igen. Kartan till höger visar vägbeskrivningar. Hur går det till? Jo, Mapbox har mer funktionalitet än bara kartdesign, t ex så har man ett API för ”directions”. Så återigen vände jag mig till Sammy för att få det riktigt enkelt att använda i Tableau. Tillbaks kom en enkel websida med url-parametrar att använda i min dashboard. De parametrar Sammy la till och som jag då kunde använda är:

fromLat
fromLong
toLat
toLong
zoomLevel
mapStyle
profile

Till att börja med tänkte jag få till något i stil med nedanstående.

9 Skärmavbild 2016-01-03 kl. 20.50.48

Det jag då behöver göra är att skapa en dashboard med min första ”vanliga” karta vi tittade på tidigare till vänster och sedan får jag lägga till en tom Web Page till höger. Ni som läst inlägget om analys av Facebook-likes känner igen tekniken.

Efter att ha dragit in ett worksheet med den vanliga Tableaukartan till vänster fortsätter vi med att dra in en Web Page till höger om det på dashboarden.

5 Skärmavbild 2016-01-03 kl. 20.43.50

Lämna URL-fältet tomt.

6 Skärmavbild 2016-01-03 kl. 20.45.34

Sedan går jag in i menyn Dashboard -> Actions och skapar en URL Action som ska triggas när jag klickar i den worksheet som heter Map Box koppling. (Den vanliga Tableau-kartan från tidigare)

8 Skärmavbild 2016-01-03 kl. 20.49.56

Som URL lägger jag in en länk till sidan mapbox.html som ropar på Mapbox med parametrarna ovan. För att sedan göra alla eller några parametervärden dynamiska väljer jag helt enkelt vilka fält värden skall plockas ifrån genom att klicka på pilen till höger om URL:en. I mitt exempel är toLat och toLong fasta för adressen till Sparks nya kontor, alla andra parametrar hämtas från andra fält i dashboarden.

7 Skärmavbild 2016-01-03 kl. 20.47.37

Nu börjar det likna något, vill bara visa en sak till. Jag vill att den som tittar på dashboarden dynamiskt ska kunna välja hur kartan ser ut samt om man vill ha vägbeskrivningen för bil, cykel eller promenad. Det löser jag enklast genom att skapa två parametrar i Tableau med fasta värden för möjliga kartlayouter samt transportsätt. Nedan ser du hur parametern för att välja stil på kartan ser ut.

10 Skärmavbild 2016-01-03 kl. 20.51.37

När vi lagt till den parametern till dashboarden och i vår URL Action så kan användaren dynamiskt välja en stil för kartan.

12 Skärmavbild 2016-01-03 kl. 20.56.51

Det var det jag tänkte visa den här gången. Jag la även till lite mer formatering och info i dashboarden om t ex betyg på restaurangerna från Allt om Stockholm. Alltid bra att ha så man vet var man ska ta vägen på lunchen..

Så – då kan det se ut så här när man är klar:

Hoppas det här gav lite inspiration och idéer om ytterligare användningsområden för kartfunktionerna i Tableau samt den nya integrationen med Mapbox. Jag tycker den är riktigt bra och spännande, särskilt nu i en tid när både den egna verksamheten och kunderna oftast är utspridda geografiskt. Kartor är då ett väldigt kraftfullt verktyg för att visualisera och tydliggöra regionala skillnader eller mönster.

Glöm inte att Tableau är grymt enkelt och kraftfullt för kartanalyser även utan integrationen med Mapbox, men kopplingen fyller ett viktigt hål för verksamheter med höga krav på kartdesign och layout.

Testa gärna själv integrationen med vägbeskrivningar genom att använda Mapboxintegrationen på sparksservices.se och hör av dig om du kör fast eller vill ha arbetsboken med det här exemplet.

Länkar:
Mapbox
Directions på sparksservices.se
URL Anrop:
http://sparksservices.se/MapBox.html?fromLat=59.306993&fromLong=18.109650&toLat=59.319495&
toLong=18.072864&zoomLevel=14&mapStyle=pirates&profile=driving