Workshop agenda

• Take pre-workshop survey
• Setup your Mapbox account
• Mapbox platform
• Structure of web maps: data and design
• Map design exercises with Mapbox Studio
• Interactivity and custom data w/ GL JS

Structure of web maps

global features both natural and man-made

traced as vector points, lines, and polygons

apply color, pattern, type, and icons to data

maps => data + design

• Mapbox Studio style editor
• Mapbox Studio dataset editor
• Mapbox Streets data
• Mapbox Terrain data
• Mapbox Traffic data

• Mapbox Streets - a complete basemap, perfect for incorporating your own custom data.
• Mapbox Outdoors - a general basemap tailored to hiking, biking, and sport.
• Mapbox Dark - simple, clean map with a dark backdrop. Well-suited for data visualizations.
• Mapbox Light - simple, clean map with a light backdrop. Well-suited for data visualizations.
• Mapbox Satellite - beautiful global satellite and aerial imagery layer.
• Mapbox Satellite Streets - global imagery enhanced with road and label hierarchy.
• Mapbox Traffic Day - traffic on a light streets basemap that highlights congestion.
• Mapbox Traffic Night - Traffic on a dark streets basemap that highlights congestion.

• Styles
• Tilesets
• Datasets
• Stats
• My access tokens

Studio style exercise (part I).

• Style background.
• Add and style water layer.
• Add and style road layer.
• Filter road layer.
• Add and style place labels.
• Filter place labels.

Design elements:

• Color
• Pattern/texture
• Typography
• Iconography

Design principles:

• Contrast
• Hierarchy
• Density

Studio style exercise (part II).

• Find colors for your map from colourlovers.com
• DEMO: Apply color palatte into Studio.
• Download svg pattern
• Add pattern to your style.
• Navigate to Maki icon editor.
• Make and download a Maki icon set for your map.
• Add maki icons to your style.

• Map object
• camera options
• UI/events
• sources

Add your map style with GL JS

• In another new tab, navigate to jsbin.com
• Walk through the installation process
• Add GL JS script to HTML page /head
• Add GL JS script to HTML page /body
• Replace style: 'mapbox://styles/mapbox/light-v9'
  with
  'mapbox://styles/your-user-name/your-map-style-id'

Add dynamic data to your map style with GL JS

• In jsbin, open the javascript panel.
• View the .geojson
• Add the line
  var url = 'add-URL-here';

Add data source

• Add the line
  map.addSource('greenloop', { type: 'geojson', data: url });

Add map layer

• map.addLayer({
• "id": "greenloop",
• "type": "line",

Add layer

• "source": "greenloop",
• "layout": { "line-join": "round", "line-cap": "round" },
• "paint": { "line-color": "#41d618", "line-width": 8 }
• });

Three other ways to add data.

• Download the .geojson data
• (1) Open map style in Studio.
• Add New Layer
• Click on source
• Click on new tileset
• (2) Click tilesets tab in Studio
• (3) Create custom data directly in Studio dataset editor

Design and data resources.

• Read Mapbox Studio manual.
• Maki icon set
• Download swiss ski style assets | read blog post
• Download vintage style assets | read blog post
• Download whaam! style assets | read blog post
• Read How to add custom data

thank you.
happy mapping!

@amyleew @geografa @mapbox