1 of 16

Map tiles are dead

Long live map tiles

NICAR 2016

Ken Schwencke

@schwanksta

2 of 16

Briefly: What’s a map tile?

3 of 16

Briefly: What’s a map tile?

4 of 16

5 of 16

This is great!

one problem.

6 of 16

7 of 16

So what is a vector tile?

  • They’re data! Think: Geojson
  • Imagine taking a giant dataset -- say every census tract -- and slicing it up into squares for each zoom level. Each square only contains the data in that area.
  • Further out zoom levels don’t need as much detail. You don’t need to see every twist and turn in a street from a wider view.
  • Vectors scale! You don’t need a tile for every zoom level -- if you zoom in, your map library can just scale the map data for you.
  • So you run your data through a program:
    • Tippecanoe - https://github.com/mapbox/tippecanoe (hold for joke)
  • And serve up the resulting mbtiles file:
  • Put it behind Varnish! It caches just like any of your HTML or JSON files.

8 of 16

9 of 16

(23.3kb)

(13.1kb)

​

10 of 16

11 of 16

12 of 16

13 of 16

14 of 16

15 of 16

Vector tile sources:

  • Mapbox
    • Metered use of their vector tiles service
      • Paid tier for more map views
    • An amazing design studio to generate styles
    • Mapbox GL JS is a great map library
  • Mapzen
    • Free use of their vector tile service*
    • Tangram, their map library, lets you use all the crazy features of WebGL

16 of 16

THANKS!