Shift + maptimeLEX

Merged Meetup

October 21, 2015

Ryan Cooper (@maptastik) | maptimeLEX (@maptimelex)

Follow along:

Meetup Resources

Intros

What's the deal with maps?

Let's make some maps!

Structure for the evening:

Intros

  • Name
  • Mappy Person or Designy Person?
  • Do you believe in ghosts?

What's up with maps?

[A] spatial representation of the environment that is presented graphically.

Kimerling et. al. Map Use, (2012). 

ZZZZZZZZZZZZZZZ

Maps are...

Maps are CONVENIENT

Maps are A WAY TO MAKE SENSE OF THE WORLD

Maps are A WAY TO REIMAGINE THE WORLD

Maps are OPINIONATED

Maps are LIES

Human Wasteland - Jennifer Wong

Maps are REVEALING

Maps SHOW PATHS IN OUR WORLD

Maps CHART PATHS TO NEW WORLDS

Maps are and mean a lot of different things

Claude Shannon's Model of Communication

What are some common approaches to making maps?

Hand Drawn Maps

Hereford mappa mundi (appx. 1285 AD)

Geographic Information Systems

  • Kitchen sink approach to mapping
  • Manage geographic data
  • Analyze geographic data
  • Create geographic data
  • ...
  • Make maps

Photo/Vector Editing Software

GIMP

Inkscape

Web mapping

What are the components that make up a typical web map?

Base Map

  • Static data* that is always present
  • Zoom levels 0-21 affect presentation
  • Zoom level styling file:  CartoCSS, Mapnik XML
  • Tools for styling: Tilemill, Mapbox Studio Classic

*This is changing with vector tiles, but we won't go into that tonight

Made of tiles!

  • 256px X 256px
  • Same boundaries

Behind the curtain...

Zoom Level: 0

Zoom Level: 1

# of tiles increase by a factor of 4 for each zoom level

  • z0 = 1 tile
  • z1 = 4 tiles
  • z2 = 16 tiles
  • ...
  • z15 = ~1.1 billion tiles
  • z17 = ~17 billion tiles

Zoom Level: 0

Zoom Level: 3

Zoom Level: 7

Zoom Level: 12

Zoom Level: 17

Premade tiles!

Feature Layers

  • Points

Feature Layers

  • Points
  • Lines

Feature Layers

  • Points
  • Lines
  • Polygons

Common Feature Layer Filetypes

  • Shapefile
    • Major GIS filetype
  • KML/KMZ
    • Used by Google
  • Comma Separated Values
    • Common in GIS and web mapping!
    • Easy to make in a spreadsheet program like Excel, LibreOffice Calc, Google Sheets, etc.
  • GeoJSON
    • Used for lots of web maps

Where can I get data?

How does this all come together to make a map?

It's complicated.

You don't have to do all this.

Web Mapping Platforms

Leaflet

  • JavaScript library that:
    • Grabs tiles for your basemap
    • Adds points, lines, and/or polygons of your feature layer
    • Handles interaction
  • Extended with several plugins for greater functionality

Mapbox

  • Mapbox Editor
    • Simple, GUI-centered mapping platform
  • Tilemill/Mapbox Studio Classic
    • Create your own basemaps!
  • MapboxJS
    • Extension of Leaflet
    • Access Mapbox services
  • And LOTS more... 

Mapbox Editor

Tilemill/Mapbox Studio Classic

Tilemill/Mapbox Studio Classic

CartoDB

  • All-in-1 mapping platform
    • Data
    • Styling
    • Interaction
  • No database setup!

Get user generated data!

  • Different mapping approach than previous examples
  • SVG-based
  • DOM manipulation
  • Great interaction, styling and transitions
  • Not exclusively for mapping
  • Very powerful

Let's make some maps!

Map 1

Lexington Beer Scene

Tool: Mapbox Editor

mapbox.com

Map 2

Kentucky Ghost Towns

Tool: Tilemill

Made with Slides.com