Workshop agenda

• Take pre-workshop survey
• Setup your Mapbox account
• The Mapbox platform
• APIs &emp; GUIs: Mapbox Studio
• The structure nteractive maps: data + design
• Map design exercises with Mapbox Studio
• Interactivity and custom data w/ GL JS

Mapbox Studio =>
GUI for storing and maintaining geographic datasets...

Mapbox Studio =>
GUI for designing custom map styles...

Mapbox Studio =>
GUI for exporting static map images...

Mapbox Studio =>
integration codes and endpoints to add styles to your web and mobile apps.

Mapbox Studio leverages:

• Styles API - read and write map styles, fonts, and icons
• Uploads API - transforms geographic data sources and files into performant production-ready tilesets
• Datasets API - offers persistent storage for custom geographic data and supports adding and editing features
• Maps API - supports reading raster and vector tilesets
• Static API - returns static maps and raster tiles from styles

Information: global features both natural and man-made

Data: tilesets composed of vector points, lines, and polygons

Design: color, pattern, type, and icons

• Styles - core styles + style editor
• Tilesets - Mapbox curated map data
• Datasets - create, add, and maintain custom data
• Stats - map views and referrers
• My access tokens - key to unlocking APIs

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

• Mapbox Streets data
• Mapbox Terrain data
• Mapbox Traffic data

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", "source": "greenloop",

Add layer

• "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
• Read How to add custom data
• 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

thank you.
happy mapping!

@amyleew @geografa @mapbox