WYSIWYG

Map Design With Mapbox Studio

Brad Leege - Mapbox - @bradleege

Introduction

• Mobile Engineer at Mapbox

• Live and work in Madison, Wisconsin

• Working on mobile tools and strategy

Mapbox

• Building Open Source tools for custom map design, development, and analysis.

• Cloud hosting of custom maps, geocoding, and directions for apps and Web sites.

• ~125 People Worldwide

  • Founded in Washington, DC

Mapbox Maps

• Vector Maps For Smooth Fast Maps

• 75 % Smaller Than Raster Maps

• Smooth Transitions

• Data Integrated With Design

• Dynamic Design

• Open Source

• Open Data (OpenStreetMap)

Mapbox Workflow

• Custom Design

  • Mapbox Studio

• Web Publishing

  • Mapbox GL JS

• Mobile App Publishing

  • iOS SDK

  • Android SDK

Mapbox Studio

• WYSIWYG Map Design In Web Browser
  • Visually Design Maps
  • Changes Are Immediately Viewable
• Successer To Previous Tools
  • Mapbox Studio Classic
    • Desktop App
    • CartoCSS
  • TileMill
    • Raster Maps

https://www.mapbox.com/mapbox-studio/

Fine Grain Controls

• Style (Made Up Of Layers)
  • Background Layer
  • Circle Layer
  • Fill Layer
  • Line Layer
  • Symbol Layer
• Custom Fonts
• Language
• Styles By Zoom Level
• Custom Data

Use Case Examples

• Data Visualization
  • Country Shapes
  • National / State Parks Only
  • Transportation
  • Weather
• Navigation
• ????

Portland Pizza Week

http://bl.ocks.org/geografa/raw/2b751b65d862661f87565bd7bb3c791c/

Traffic Cam Map

https://www.mapbox.com/bites/00234/

Hands On Map Design

http://flatuicolors.com

(Possible) Goal

Step 1: Base Map

• Start With Light Style

Step 2: Land Color

• land = #ecf0f1

Step 3: Water

• water = #34495e

Step 3: Grass

• grass: #95a5a6

Step 4: Transport Lines

• Roads: #f1c40f

Publish To iOS

https://github.com/bleege/MapboxCustomStyle

Upload Data Demo

Map Packers Opponents

Using Custom Map Design and GL JS

In Closing

• Web based Visual Map Design
• Publish Your Map To:
  • Web
  • iOS App
  • Android App

Questions?

Come Build With Us

https://www.mapbox.com/jobs/

Thanks!

• https://github.com/mapbox (900+ repos)
• https://www.mapbox.com/blog/
• brad@mapbox.com
• @bradleege