In the studio with Mapbox

Transcription

1 # M a p b o x B a c k g r o u n d In the studio with Mapbox Jim Walseth Senior Software Developer Tableau, Maps Team

2

3 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.

4 Fundamentals Background map + your Data = Map viz Static image + interactive Marks = Map viz

5 Background map choices in Tableau Tableau WMS Mapbox Designed for Data 3 styles Highly Configurable Wide variety Problems with projections/ reliability Build your map! 10 styles with a free account

6 Mapbox + Tableau Demo: Brand/style your map

7 Mapbox + Tableau Demo: Add a custom layer

8 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

9 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

10 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

11 Command line example find: 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 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 features, bytes of geometry, 4 bytes of separate metadata, bytes of string pool tile 3/1/3 size is with detail 12, > 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 with detail 12, > 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 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

12

13 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

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

15 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

16 #MapboxBackground Jim

17 Resources onlinehelp.tableau.com/current/pro/desktop/enus/maps_mapsources_mapbox.html cmtoomey.github.io/maps/2016/02/04/mapboxstudiotableau.html

18 Secret Sauce for zooming in further Currently (10.1) Tableau does not request tiles from Mapbox below zoom level 16. See 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='' fullurl=' 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-tilecolor='#dddddd' /> Clear image on the left is example of result!