#webmaptimeMike 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
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
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.maps.stamen.com
All (most) tiles are created equal.openwhatevermap.org
256 x 256 pixels.
20ish zoom levels.
zoom, x, y
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.Wikipedia
The math is simple!*
x = λ
y = ln(tan φ + sec φ)
where λ is longitude, φ is latitude
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."
ZOOM LEVEL ≠ 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?
Cartographers do this.
Who is your audience?
Communication Tool vs.
Spend the time upfront working on your data!
Will data update in real time?bostonography
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.
What can I use to get started?
Free and Open Source GIS Software
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,
I need data
Where do I get data?