Slide 1

Slide 1 text

Designing global hillshades & landcover as vectors AJ Ashton, Mapbox

Slide 2

Slide 2 text

Intro What is Mapbox Vector Terrain?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

3 layers Elevation Contours Hillshading Generalized landcover

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Vector tiles ● Same location & numbering scheme as web mercator image tiles ● Contain points, lines, polygons, & data fields ● Designed to be turned into images very quickly with any custom stylesheet ● OpenGL / WebGL provide even more speed & flexibility

Slide 7

Slide 7 text

Global coverage ● 25+ raw data sets compiled into one ● 45,000 raw data files

Slide 8

Slide 8 text

Global coverage ● USA: US Geological Survey, NASA ● Canada: Geobase ● Mexico: INEGI ● Norway: Kartverket ● France: IGN ● UK: Ordnance Survey ● Denmark: Geodatastyrelsen ● New Zealand: Geographx ● +More

Slide 9

Slide 9 text

The process, roughly: ● Gather the best elevation & landcover raster data sources we can ● Normalize & mosaic the various sources, prioritizing by highest resolution ● Generate raster hillshade & landcover visualizations ● Programatically trace vector polygons from the processed rasters

Slide 10

Slide 10 text

Built on open-source GDAL, PostGIS, Mapnik, GraphicsMagick ⬇ managed by custom Bash & Python scripts

Slide 11

Slide 11 text

Powered by Amazon Web Services ● 9,800 jobs managed by Simple Queue Service ● Parallel-processed across 250 Elastic Cloud Compute (EC2) virtual machines ● Vector tiles uploaded to Simple Storage Service (S3)

Slide 12

Slide 12 text

Hillshading Process & design

Slide 13

Slide 13 text

Classic approach at the foundation ● Standard GDAL hillshading algorithm ● Traditional lighting from the northwest ● Raster input, raster output

Slide 14

Slide 14 text

Accounting for scale ● DEMs resampled for each zoom level 2-14 ● Hillshading vertical exaggeration set appropriately for each zoom level

Slide 15

Slide 15 text

Accounting for Web Mercator ● Mercator 'meters' are only simlilar to real- world meters near the equator ● At 60° north or south, 2 mercator meters fit into one real-world meter ● This affects slope & hillshade calculations

Slide 16

Slide 16 text

Accounting for Web Mercator

Slide 17

Slide 17 text

Accounting for Web Mercator Horizontal scaling = 1 / cos(latitude)

Slide 18

Slide 18 text

Default scaling (none) Default scaling (none)

Slide 19

Slide 19 text

Latitude-appropriate scaling Latitude-appropriate scaling

Slide 20

Slide 20 text

Raster to vector

Slide 21

Slide 21 text

Raster to vector gdal_polygonize.py with a little help from GraphicsMagick

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Landcover Process & design

Slide 32

Slide 32 text

Similar to hillshade process ● Start by normalizing raw data sources ● Reduce rasters to a small number of colors ● Trace with gdal_polygonize.py ● Simplify to remove pixelization

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Elevation Contours Process & design

Slide 36

Slide 36 text

Straight-forward ● Start with the same DEMs we processed for hillshading ● Generate contours with gdal_contour ● ✔

Slide 37

Slide 37 text

But why vector terrain?

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

References & Resources ● shadedrelief.com by Tom Patterson ● reliefshading.com by Bernhard Jenny & Stefan Räber ● Cartographic Relief Presentation by Eduard Imhof ● gis.stackexchange.com posts by William Huber & many others

Slide 45

Slide 45 text

mapbox.com/mapbox-studio