Making a tile server (CUGOS, 04/18/2018)

.md

Making a tile server

hi! I’m Sam.

Let’s walk through creating a minimal vector tile server on your own machine. We’ll cover:

• serving vector tiles (from cache or on-demand)
• creating vector tiles (from a custom data source)
• caching vector tiles (to the file system for future use)

⚠️ not a suggested architecture

Built with

• Node.js, expressjs (server)
• mapnik (vector tile generator, tiler)
• local file system (cache)
• mapbox-gl-js (map renderer)

What happens when the browser loads a map?

1. User prepares a map with tile sources
2. mapbox-gl-js will make requests based on the ZXY of the visible screen to that tile server
3. tile server responds with a vector tile buffer (200) or no tile (404)
4. mapbox-gl-js reads buffer, places on visible map

What happens when the tile server receives a request?

1. tile server receives the request and parses the ZXY
2. tile server tries to load a tile from the cache (local file system) based on ZXY

If the tile exists:

1. tile server responds to requester with a 200 and the buffer as the body

If the tile doesn’t exist:

1. tile server loads the source data into a mapnik datasource
2. asks mapnik to generate a vector tile at specific ZXY
3. asks mapnik to spit out a vector tile buffer (.mvt)
4. tile server saves the tile to the cache (local file system)
5. tile server responds to requester with a 200 and the buffer as the body

Code walkthrough

https://github.com/mapsam/get-or-tile

The API

GET /tiles/{z}/{x}/{y}.mvt

Let’s try running the server locally, and perform a GET request to confirm it’s working.

http://localhost:3000/tiles/{z}/{x}/{y}.mvt

Your turn

Let’s all try and break this tile server. If you’re on the UW network, go to the following URL to see the map. We’ll watch the logs fly by on my computer, and hopefully see some tiles load on your computer.

http://LOCAL_NETWORK_IP:8000

Who is making the requests?

Right now we can’t tell who is making these requests, what’s with that? Going to restart the server with an added change. Now you should go to the same URL, but include your name in the query, like so:

http://LOCAL_NETWORK_IP:8000?name=YOUR_NAME

Alternatives

• (tiler) geosjon-vt, postgis
• (cache) s3, databases
• servers: https://github.com/mapbox/awesome-vector-tiles#servers

Retrospective

• as an experiment, this was a great way to learn about the major steps required to generate a tile server
• once tiles are cached, they seem to load successfully
• big datasources will crush the server
• Once a tile is loaded, it’s cached forever. How do we invalidate the cache? What if your source data updates?