Welcome to Advanced GIS, Lecture 10

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

→ to move forward

← to go back

Advanced GIS

Class 10

most webmaps use raster tiles

raster tiles are 256 x 256 pixel images

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

each tile is just an image on the internet

http://a.tile.stamen.com/toner/0/0/0.png

as you zoom in, the number of tiles quadruples

if you made tiles for all of zoom 18 you'd have nearly 69 billion images

that's why browsers only load what you need to see

source

webmaps are moving toward 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 for each tile, then the browser styles it

if your base map is a cake

source

you might think of raster tiles as slices of a big cake

source

a server somewhere turns the data into images

source

whereas each vector tile contains the ingredients (data) for a single slice of cake

source

the browser turns the data into an image

source

this opens up possibilities:

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

3. dynamic perspective

4. more projections

source

so how do you make base maps?

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

many mapmakers turn to Mapbox

TileMill (outdated)

source

bring your own data

raster tiles only

Mapbox provides modified OpenStreetMap data

raster and vector tiles, but emphasis on vector

biggest difference is you are more locked in to Mapbox

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

in-class exercise, part 1

using Mapbox tiles in Carto

as of now, Carto can only use raster tiles

in-class exercise, part 2

adding your own data to a Mapbox style

1. Upload data (such as a zipped shapefile)

2. Add the tileset to your style

in-class exercise, part 3

like Carto.js but for your Mapbox maps

source

it's possible to do popups and web-mappy things

source

you can add GeoJSON (such as from Carto) to the map on a page if you prefer

source

Advanced GIS

making base maps

most webmaps use raster tiles

raster tiles are 256 x 256 pixel images

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

each tile is just an image on the internet

as you zoom in, the number of tiles quadruples

if you made tiles for all of zoom 18 you'd have nearly 69 billion images

that's why browsers only load what you need to see

webmaps are moving toward 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 for each tile, then the browser styles it

if your base map is a cake

you might think of raster tiles as slices of a big cake

a server somewhere turns the data into images

whereas each vector tile contains the ingredients (data) for a single slice of cake

the browser turns the data into an image

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

so how do you make base maps?

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

many mapmakers turn to Mapbox

TileMill (outdated)

bring your own data

bring your own data

raster tiles only

Mapbox provides modified OpenStreetMap data

Mapbox provides modified OpenStreetMap data

raster and vector tiles, but emphasis on vector

biggest difference is you are more locked in to Mapbox

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

creating styles

in-class exercise, part 1

using Mapbox tiles in Carto

as of now, Carto can only use raster tiles

in-class exercise, part 2

adding your own data to a Mapbox style

in-class exercise, part 3

Mapbox GL

like Carto.js but for your Mapbox maps

it's possible to do popups and web-mappy things

you can add GeoJSON (such as from Carto) to the map on a page if you prefer