QUINTUPLE MAPTIME

maptimeLEX
maptimePR (Puerto Rico)
maptimeBoston
maptimeOAK (Oakland, CA)
maptimeHRVA (Hampton Roads, VA)

Anatomy of a Web Map

Presented by Ryan Cooper...

...but almost entirely created by Alan McConchie and Beth Schechter

Feel free ask questions at any time

I may not know the answer...

but someone else here might!

So feel free to contribute your own insights as we move along

Housekeeping!
You can follow along here: goo.gl/RzfeFo. Links are in blue boxes, green is just emphasis.

Now let's get started :)

The very most basic principles of web mapping

History of webmaps

Exceptions to the norm

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

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

What is a web map?

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.

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...

History:
How did web maps come to be?

But GIS for the Web is not user friendly :(

Directions! Online! Revolutionary!

Big problem: slow to load :(

MapQuest required a full page refresh to scroll or zoom, and was always aligned to the boundaries of the map image.

2005: Google Maps changes the game

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.

We're borrowing some info from amazing mapper (and Lexington Code4America Fellow) Lyzi Diamond, who got a bunch of info about tiles from Mapbox.

All tiles
=
same size! 256x256 pixels
same boundaries

Tiles could be a road map, a satellite image, or anything else that's a raster!

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!

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

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

All the other slippy maps and slippy map software followed Google's lead, with tiles at the base.

A collection of raster tiles makes up 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!

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

The simplified story of webmaps, in review:

• The world is split into 256 x 256 pixel images at various zoom levels
• Those images are raster-based (PNG, JPEG) to create a base layer
• Vector data goes on top of the base layer for interaction

3 exceptions to the simplified story!

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

Raster: ask for data to fit into tile, don't include geometry, attributes, or metadata for features in baselayer

It's just an image!

vector tiles: featuers stored as vectors and can include geometry, attribute and metadata, still conform to 256X256px grid patter, but featuers can overrun grid boundaries

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

It's new and a bit complicated, butMapBox has integrated them into their webmap services

(this is kind of a big deal, but is also new...so we'll wait and see on the impact)

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

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...

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 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

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 OGRE or Shape Escape or write your own GeoJSON with geojson.io

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

Thanks to:

UK Department of the Geography

Everyone at #maptime

You!

Presentation made with big

@maptimeLEX
maptimelex@gmail.com
maptime.github.io/lexington
facebook.com/maptimelex