Welcome to Methods 3, Lecture 10

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

→ to move forward

← to go back

Methods 3

Regis Carto map

so how does a web map work?

(a few of these slides are adapted from these excellent Maptime slides)

most webmaps start with a basemap

basemaps are tiled

tiles are 256 x 256 pixel images

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

openwhatevermap.xyz

source

source

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

each tile is just an image on the internet

http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png

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

these tiles use OpenStreetMap data

+ CartoCSS

so how do you make base maps?

it depends!

in theory you can make tiles on your own

but many mapmakers turn to Mapbox

source

Mapbox provides modified OpenStreetMap data

source

not free, but free up to a point

source

luckily Mapbox and Carto do most of this for us

creating styles in Mapbox

for the most part, cartographic conventions hold with basemaps

• scale
• hierarchy
• color
• symbology

but with basemaps, be aware that zooming and panning change how it will be viewed

source

source

source

in-class exercise, part 1

using Mapbox tiles in Carto

in-class exercise, part 2

you can add your own data to Mapbox basemaps

for example, when you have too much data to put in Carto, and you don't want popups on the data

I recommend adding data as a tileset

1. Upload data (such as a zipped shapefile)

2. Add the tileset to your style

in-class exercise, part 3