Welcome to Advanced Interactive Web Mapping, Programming, and Design, Class 10

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced Interactive Web Mapping, Programming, and Design

Class 10

Smelly Maps

True North refugees

where do base tiles come from?

traditional base tiles, as we've been using, work like this:

1. bring some data: water, land, streets, etc...

2. turn the data into images

source

3. put the images on a server

source

tiles grow exponentially

zoom level 0:

1 tile

zoom level 1:

4 tiles

zoom level 2:

16 tiles

zoom level 18:

68,719,476,736 tiles

total at level 18:

91,625,968,981 tiles

source

source

tiles use the same zoom, x, and y values, so they're interchangeable

openwhatevermap.org

maptiler.org

so how do you make raster or vector tiles?

it depends!

in theory you can make tiles on your own

there is a free global data source

and the software for making tiles is open source

but keeping your global OpenStreetMap data up to date can be difficult

and configuring tile-making software isn't the easiest

there are entire small companies that do this kind of thing

but many mapmakers turn to Mapbox

Mapbox is a popular platform for making base tiles

TileMill

how TileMill worked

1. add data
2. style the data
3. generate and upload tiles

there are some downsides to this approach

you have to add the data yourself

Mapbox would charge you by the amount of memory you take up

if one tile is 25 KB, all tiles up to and including zoom 18 would be around 2 TB

unless you're paying a ton, you're not going to have worldwide tiles

and even if you did, you need to bring the data

are you going to download all of OpenStreetMap?

OSM planet

and keep it up to date?

source

Mapbox provides modified OpenStreetMap data

Mapbox provides modified OpenStreetMap data

using vector tiles

with vector tiles, all the map data is split into the same exact grid pattern

and the data is filtered and simplified for the zoom level you're at

the data is sent to the browser/application for each tile, then the browser (or application) styles it

this opens up possibilities:

1. dynamic styles

2. fractional zoom levels (eg 3.5 rather than 3 or 4)

3. dynamic perspective

4. more projections

source

vector tiles are still based on vector data sources, eg OSM

the current Mapbox Studio

Mapbox still provides modified OpenStreetMap data

sometimes you'll see references to "studio classic" or other "classic" things

we're going to avoid those and stick to the latest Mapbox Studio

Mapbox still provides modified OpenStreetMap data

entirely online

in-class exercise, part 1

in-class exercise, part 2

in-class exercise, part 3

you can add your own data source

and add these to styles

add layers multiple times if you want to do things like choropleths

in-class exercise, part 4

mapbox.com/maps

Mapbox GL examples

Mapbox GL examples

caniuse.com