Mike Foster and Andy Woodruff for Maptime Boston

FIRST: Thanks to Alan McConchie, Beth Schechter, and the Maptime team for much of this material!

Anatomy of a Web Map

Follow along!

What is a web map?

"Web map" often implies a map that is not simply on the web, but rather one that is powered by the web.

A digital map is on a computer, but may not be accessible by internet, and is relatively static if it is.


A web map depends on the internet. It is usually interactive and not always self-contained.


MapQuest ruled the early days of web maps

Enter Google, 2005

Google Maps pioneered what is now sometimes called a "slippy map"

So how does a "slippy map" work?

A "slippy map" is usually made of tiles.

Tiling chops the map into pieces to quickly load only the part of the map in view.


Tiles are usually pre-rendered raster images, although vector tiles are on the rise.

All (most) tiles are created equal.


256 x 256 pixels.
Standardized locations.
20ish zoom levels.

zoom, x, y

e.g. .../14/4955/6059.png

Number of tiles at zoom level z:
2z x 2z = 4z

At the resolution of my computer, a world map at zoom 21 would be nearly 78 miles square!

Bing Maps Tile System

Tiled web maps use the Mercator projection.


The math is simple!*

x = λ
y = ln(tan φ + sec φ)
where λ is longitude, φ is latitude

*kind of. 'Web Mercator' is more complicated, but you can still do many things with the basic formula.

Mercator's map was designed for marine navigation. Lines of constant bearing are straight.

At a local scale, this means that shape and direction are preserved.

And that's generally a good thing.

John Nelson, Plate carrée squish effect

A Mercator map of the world is not a map of the world.

ln(tan 90° + sec 90°) = Infinity

Be suspicious of web map comparisons "at the same scale."


So avoid areal representations in web maps at small scale.

Web maps are more than just tiles.

Dynamic, interactive feature layers are the important other half of many web maps.

Tiles, typically: raster, non-interactive*, used as a base layer

Feature layers, typically: interactive, vector, represent the map's salient data

GeoJSON is a geographic data format that plays well with web maps for feature layers

How does all this fit together?

This is cool!
So where do I start?

All good maps tell stories.
What is the story you are trying to tell?

Mike Foster and Andy Woodruff for Maptime Boston

Cartographers do this.

Who is your audience?

What is your goal?

Communication Tool vs.
Exploration Tool

Data Matters
Spend the time upfront working on your data!

Data Considerations


What layers can you interact with?

What layers won't change?

Will data update in real time?


What format will you keep your data in?

We mentioned tiles...
Do you want a custom basemap?
Or can you use an existing one?

Where are you going to put your map?

How much money do you have?


The Map Div

One line of code.

Dev Tools

Javascript For Cats

Other Awesome
Learning Sites
DUSPviz #webmapworkshop

Find a text editor!
Notepad ++
Sublime Text

Set up a Sandbox

Share on Github
Have fun!

What can I use to get started?

Data Presentation

Mapbox Studio "Classic"
Mapbox Studio
Mapquest Javascript APIS
Google Javascript APIS


Data Management/Manipulation

Free and Open Source GIS Software


Data Options
etc. etc. etc.


Design in TileMill (old), Mapbox Studio Classic (also apparently old), Mapbox Studio (you don't have access yet), etc.

Host on Mapbox or on your own:

TileServer.php, TileStache, TileCache, TileStream,
mbtiles-server, mod_tile

Or just use nice existing tiles!

OpenStreetMap, Stamen,
Mapbox, MapQuest

What is Git, Github,
and GeoJSON?
Learn Git, Github, and GeoJSON

GIS Collective - Lyzi Diamond

Find Examples!
Open them, paste them, change things!
GIS Collective Tutorials
Leaflet Tutorials
MapboxJS Examples
OpenLayers Tutorials

I need data
Where do I get data?

Lots of places...
These are free. And open.
Natural Earth
OpenStreetMap Extracts
U.S. Census Bureau
Your own data! Geocoding

Open Data.
City and regional clearinghouses.
Data Boston
Open Data Cambridge
City of Cambridge Github

Exploration Session

Boston rodent incidents. Ew.

Data Boston
Download the CSV. Add the file to geojson.io!

Thats not all folks!
Welcome to the world of Web Maps!
Vector Tiles
UTF Grid