By Will (@skorasaurus) based on presentations from Alan Beth (@maptimesf), lyzi, Andy W,

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

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!

web map (aka: slippy map) require internet * [usually] interactive, * multiple zoom levels!

OpenStreetMap.org

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

First, there were digital maps like ArcGIS.

In 1996, Mapquest launched its web service.

Directions! Online! Revolutionary!

The problem: it was slow to load :(

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?
Because it was google?

No!

It was the tile!

tiles
=
256x256 pixel image
same boundaries
~20 zoom levels
not interactive

Each zoom level has its own set of tiles!

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

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

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.

Web maps use Mercator projection, which is designed for sailors BUT....

it's equidistant at local, small levels

by: Stefan Kühn

ZOOM LEVEL ≠ SCALE

a web map
is (usually) not just tiles!

When we add points or lines on top of the base layer, we call those feature layers

Sometimes you can interact with them (clicking to produce a popup, for example).

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

a peek at javascript

What javascript does: Grabs the tiles, adds the base layer (already styled), handles interaction, customizes look of feature layer

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

The javascript: we recommend Leaflet / mapbox.js although there are others: OpenLayers (which is making a comeback) /

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

standardized
Organized

what format do you want your data in?

what layer(s) should have interaction?

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

How much money do you have?

Data Options
CartoDB
GeoJSON
TopoJSON
KML
CSV
Postgis etc. etc. etc.

learn JS. Mozilla CDN
Codecademy
CodeSchool
JavaScript.is(Sexy)