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
Made with Slides.com