You can follow along here: sta.mn/qhg. Links are in blue boxes, green is just emphasis. You can comment and edit on github!
Today we will be talking about the very most basic principles of web mapping.
We're including a little history, so you can get an idea of how web maps have come to be.
There are always exceptions! We'll talk about those too.
But first, what does anatomy have to do with a web map?
Both bodies and web maps have components and systems that interact and intertwine.
Instead of cells, maps have data.
Instead of circulatory and digestive systems, web maps have styles and tiles and servers.
How is a web map different than a digital map?
Digital: involves a computer, but might not be accessible by the internet.
A web map is a kind of digital map. And both are obviously quite different from analog maps, such as paper maps and atlases!
Making maps for mobile devices can be similar, but we're not talking about that today.
How did web maps come to be?
First, there were digital maps like ArcGIS.
In 1996, Mapquest launched its web service.
MapQuest required a full page refresh to scroll or zoom, and was always aligned to tile boundaries.
Google Maps really paved the way for online mapping, beginning in 2005.
But what was the revolution?
Let's talk about tiles for a minute. And to do so, we're borrowing some info from amazing mapper Lyzi Diamond, who got a bunch of info about tiles from Mapbox.
Tiles could be a road map, a satellite image, or anything else that's a raster!
All these little tiles load way faster than one big map.
Web maps like this load the tiles that are on your screen. If the map is “smart,” it will pre-load tiles outside of the screen, along the top, bottom, left, and right.
Each zoom level has its own set of tiles!
Zoom level 0: one tile for the world.
With each additional zoom level, the number of tiles increases exponentially.
Zoom level 1: 4 tiles for the world.
Map tiles are just images on the web, so you can link to them individually.
In order to understand how this works, let's break down the URL.
http://tile.openstreetmap.org/4/2/6.png -- this is the name of the tile server.
http://tile.openstreetmap.org/4/2/6.png -- this is the z value, or the zoom level.
http://tile.openstreetmap.org/4/2/6.png -- This is the x/y value, or the place in the grid where the tile lives.
Google maps use Mercator projection, which is designed for sailors BUT it works well for flat maps.
We'll see more map projections later...!
Anyway, so all other slippy maps and slippy map software followed Google's lead, with tiles at the base.
Not surprisingly, a collection of raster tiles makes up what we call the map's base layer.
When we layer things like markers on top of them, we call those data layers or content layers or feature layers.
They are often vector layers (point, line, polygon). Sometimes you can interact with them (clicking to produce a popup, for example).
Now we're ready to dive a little deeper into the whole web map anatomy!
3 exceptions to the simplified story!
Exception #1: Tiles are always rasters EXCEPT when they're not!
Exception #2: Can’t interact with features on a raster. BUT UTFGrid (Mapbox invention) makes it possible.
Stamen used this technique on the Parks Conservancy map.
Do I need to make my own custom tiles?
Yes? Use TileMill to design your own tiles.
Do I need a content layer?
Finally, CartoDB takes care of almost all of this for you!