Anatomy of a Web Map

Taken from Alan McConchie :) and Beth Schechter :D of MaptimeSF/MaptimeHQ fame.

Housekeeping!
You can follow along here: goo.gl/5sAamS. Links are in blue boxes, green is just emphasis. You can comment and edit on github!

Now let's get started :)

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.

We'll talk a lot about Google, but we're going to show you a 100% open source Google-free stack

But first, what does anatomy have to do with a web map?

Well,

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.
oh my!

So,

What is a web map?

To answer that question, maybe it's more helpful to ask,

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!

We're talking about web maps that you view in a browser, like...

Making maps for mobile devices can be similar, but we're not talking about that today.

We're also not talking about digital globes like Google Earth

but how about a little history:
How did web maps come to be?

First, there were digital maps like ArcGIS.

Although useful, GIS for the Web is not user friendly :(

In 1996, Mapquest launched its web service.

ta da!

Directions! Online! Revolutionary!

The problem: it was slow to load :(

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?
Was it the interface?
The red marker?
The weather widget?

No!

It was the tile.

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.

Thanks y'all! <3 <3 <3
Now here goes...

All tiles
=
same size! 256x256 pixels
same boundaries

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.

This kind of map is colloquially called a slippy map

Each zoom level has its own set of tiles!

With each additional zoom level, the number of tiles increases exponentially.

Tiles are rendered in advance (usually) then stored in a cache

Map tiles are just images on the web, so you can link to them individually.

For example: http://tile.openstreetmap.org/4/2/6.png

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.

*(Not every web map contains a feature layer, but they are fairly typical.)

They are often vector layers (point, line, polygon). Sometimes you can interact with them (clicking to produce a popup, for example).

Filetypes: GIS uses shapefiles, but web maps prefer KML, or more recently, GeoJSON

Here's the breakdown of how these pieces fit together:

Make sense?

Great!

Now we're ready to dive a little deeper into the whole web map anatomy!

The simplest possible web map: sta.mn/v5h

What does the javascript library do? Grabs the tiles, adds content layer, handles interaction.

The javascript: we recommend Leaflet, although there are others: OpenLayers (which is making a comeback) / Modest Maps / Polymaps

And don't forget: Google Maps API / Bing Maps API / Nokia HERE Maps API / ESRI ArcGIS API

3 exceptions to the simplified story!

Exception #1: Tiles are always rasters EXCEPT when they're not!

vector data tiles! What are they?

vector data tiles: they are an alternative to a database that makes raster tiles. They still render to rasters for display

Technically they are Prototype Buffers that store internal data that Mapnik uses and organized into layers.

A GeoJSON vector tile will return a JSON object, and it might include roads as LineStrings and bodies of water as Polygons. (source)

Raster: ask for data to fit into tile

Vector: already have vector data sliced up in the way that I will make raster tiles

So someone has to go through and chop up that data, like MapBox

But more importantly, you can make it pretty with CartoCSS and it won't take hours to re-do all the images.

Exception #2: Can’t interact with features on a raster. BUT UTFGrid (Mapbox invention) makes it possible.

UTFGrid is an invisble tile layer made up of arbitrary letters which are indexes into the clickable data

Stamen used this technique on the Parks Conservancy map.

Exception #3: D3 exists outside the world of tiles

you can’t easily make road map in D3 BUT can do things that are clumsy in slippy maps like...

choropleth maps or... sta.mn/jyx

cartograms or... sta.mn/q99

different map projections (in the browser!) sta.mn/jfs

D3

IS

IN

SANE

Find these examples and more in Kai Chang's d3.geo presentation

Very powerful, but steep learning curve

So.
Where do I start?

Do I need to make my own custom tiles?

No? Use these! OpenStreetMap, CloudMade, Stamen, MapBox, MapQuest

Yes? Use TileMill or the newer, Mapbox Studio to design your own tiles.

Pretty!

Style your map with CartoCSS (or just carto)

You can host these files on MapBox, or...

Serve the tiles by running your own tile server. For example: TileServer.php / TileStache / TileCache / TileStream / mbtiles-server / mod_tile

See Eric Theise's Geo Platform tutorial for all the gritty details

Do I need a content layer?

No? Put all your data into the tiles, possibly using UTFGrid for interactivity

Yes? Convert a Shapefile to GeoJSON with QGIS, OGRE, or write your own GeoJSON with geojson.io

Finally, CartoDB takes care of almost all of this for you!

Learn More:
http://maptime.io/lessons-resources/

Thanks to:

Everyone at #maptime

You!

Presentation made with big