Saturday, May 25, 2019

Playing with Mapbox Vector Tiles (Part 3 - Using Mabox GL)

On this post I'm going to pick-up what I've described on my previous two posts and creating a demo of Mapbox Vector Tiles integrated with Mapbox GL.

I'll be more or less recreating what I did on this experiment:

That old experiment used:
  • TileMill to create the raster tiles
  • UTFGrid tiles to provide meta-information on the hexagons
  • Leaflet as the mapping technology
This new one uses:
  • Tipecanoe to generate the vector tiles (from geojson sources)
  • Mapbox GL JS as the mapping technology
The tricky bit is making sure that the helicopters snap to the displayed hexagons, ideally leveraging the vector data that's present on the tiles.

With that said, I'm actually going to start with the end-result, followed by the break-down on how it's built.

I didn't try to replicate the experience at 100%, but it's close enough.

Live demo at:

How this was done: