In the studio with Mapbox

# M a p b o x B a c k g r o u n d

• Jim Walseth

• Senior Software Developer

• Tableau, Maps Team

2017 Master Plan

Coastal Louisiana faces one of the highest land loss rates in the world, which puts our homes, businesses, and communities, as well as our national energy and transportation infrastructure at risk.

The 2017 Coastal Master Plan sets an ambitious path to respond to the loss of our coastal land and the threats from storm surge events.

Fundamentals

• Background map + your Data = Map viz

Static image + interactive Marks = Map viz

Background map choices in Tableau

• Tableau WMS Mapbox

Wide variety

Problems with projections/ reliability

Designed for Data

3 styles

Highly Configurable

Build your map!

10 styles with a free account

Mapbox + Tableau Demo: Brand/style your map

Mapbox + Tableau Demo: Add a custom layer

Add custom layer, the easy way

Find the geographic data (GeoJSON, Shape, KML, etc.)

In Mapbox Studio, ‘Tilesets’ -> ‘New Tileset’

Select your file

Wait for ‘Processing’ to complete

Select style, + Add Layer, apply desired style

Add custom layer, the power user’s way

Find the geographic data (GeoJSON, Shape, KML, etc.)

Convert to GeoJSON as EPSG:4326 (WGS-84)

Create vector tiles with tippecanoe

Upload to Mapbox

Select style, + Add Layer, apply desired style

Add custom layer, the command line way

Why? Big, complex data sets may require this. How?

Convert to GeoJSON as EPSG:4326 (WGS-84)

Prerequisite: install QGIS to get latest GDAL (ogr2ogr tool)

Create vector tiles with Tippecanoe

Prerequisite: install Tippecanoe (only Mac/Linux?)

Upload to Mapbox

Optional: install and use Mapbox command line API

jlafitte$ ogr2ogr -f "geoJSON" -s_srs EPSG:3857 -t_srs EPSG:4326 MP2017_Flood_Depths_1.geojson

"TC18/2017_MasterPlan_Flood_Depths/shapefile/MP2017_Flood_Depths.shp"

jlafitte-MAC2:TC18 jlafitte$ ls -al

-rw-r--r-- 1 jlafitte TSI\Domain Users 284674826 Aug 28 15:26 MP2017_Flood_Depths_1.geojson

jlafitte$ tippecanoe -o MP2017_Flood_Depths_2.mbtiles -l MP2017_Flood_Depths -z12 -Z0 -ab -aN -P -f MP2017_Flood_Depths_1.geojson

MP2017_Flood_Depths_1.geojson:10217: Reached EOF without all containers being closed

In JSON object {"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[]}

MP2017_Flood_Depths_1.geojson:30925: Found ] at top level

86555 features, 34835227 bytes of geometry, 4 bytes of separate metadata, 3370341 bytes of string pool

tile 3/1/3 size is 784417 with detail 12, >500000

Going to try keeping the biggest 57.37% of the features to make it fit

.....

Going to try keeping the biggest 29.39% of the features to make it fit

tile 11/511/845 size is 505053 with detail 12, >500000

Going to try keeping the biggest 26.19% of the features to make it fit

99.9% 12/1024/1689

jlafitte$ ls -al

-rw-r--r-- 1 jlafitte TSI\Domain Users 54882304 Aug 28 17:39 MP2017_Flood_Depths_2.mbtiles

jlafitte$ mapbox --access-token INSERT-YOUR-UPLOAD-TOKEN-HERE upload tableau-internal.MP2017_Flood_Depths_2 MP2017_Flood_Depths_2.mbtiles

FYI tippecanoe params

-Z12: Only generate zoom levels 12 and beyond

-ab: Detect borders that are shared between multiple polygons

-aN: Dynamically combine the smallest features

-P: Use multiple threads to read different parts of each GeoJSON input

Command line examplefind: http://cims.coastal.louisiana.gov/masterplan/GISDownload/

Constraints

• Free Account limits:• 50,000 map views

• 10 map styles

• Zoom levels:• Mapbox styling goes to deep zoom levels

• Map source “tms” file must be manually edited

• Clearing the cache:• Tableau stores the last tile, but what if you changed the style?

• Manual clearing of Tableau map tile ‘cache’ required

• Windows: C:\Users\your-username\AppData\Local\Tableau\Caching\ExternalCacheV1\MapTiles

• Mac: rm -R /Users/<yourname>/Library/Caches/com.tableau.caching/ExternalCacheV1

Please complete the session survey from the Session Details screen in your TC16 app

Bayou tapestry | Mapping threats to the Louisiana coast

Wed 1:45-2:45 | MCCNO - L2 - R04

Bayou tapestry | Mapping threats to the Louisiana coast

Thurs 12:30-1:30 | MCCNO - L3 - 335

Jim Walseth

• jwalseth@tableau.com

• @jwalseth

#MapboxBackground

Resources

• onlinehelp.tableau.com/current/pro/desktop/en-us/maps_mapsources_mapbox.html

• www.mapbox.com/tableau/

• www.mapbox.com/studio-manual/overview/

• www.mapbox.com/help/adjust-tileset-zoom-extent/

• cmtoomey.github.io/maps/2016/02/04/MapboxStudioTableau.html

• www.qgis.org/en/site/forusers/download.html

Secret Sauce for zooming in further

• Currently (10.1) Tableau does not request tiles from Mapbox below zoom level 16. See https://community.tableau.com/thread/196648. Zooming into 'city block' scale produces a blurry background.

• This is correctable by simply including including the bold element in the twb.

• <connection max-scale-level="20.0" api-key=’YOUR API KEY HERE' class='MapBox' description='' full-url='https://api.mapbox.com/styles/v1/YOUR USER NAME/{L}/tiles/{Z}/{X}/{Y}{D}?access_token=YOUR TOKEN HERE' inline='true' layer-separator=',' offline='' port='443' server='api.mapbox.com' service='https' tileset='US\normal' url-format='/styles/v1/YOUR USER NAME/{L}/tiles/{Z}/{X}/{Y}{D}?access_token=YOUR TOKEN HERE' username=’YOUR USER NAME' wait-tile-color='#dddddd' />

• Clear image on the left is example of result!