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

Part 1. End-to-End experiment
Part 2. Generating custom tiles
Part 3. Using Mapbox 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: http://psousa.net/demos/maps-and-boardgames-part-2/demo3.html

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: http://psousa.net/demos/vector/part3/

How this was done: