Story Maps with Mapbox GL

Yesterday I was impressed by two story maps created with Mapbox GL. The Mapbox Blog published a very neat map highlighting some of the details in their new satellite imagery for Madrid airport. The Guardian  also used Mapbox GL in a feature on immigration in Texas (to see the map scroll down to the section headed 'The impact of Migrants on Falfurrias').

Both of these maps make use of Mapbox GL's panTo and rotateTo functions to seamlessly pan and spin the map to new locations.

I was particularly impressed with the Mapbox Blog map. This map cleverly uses the height of an overlaid div element to work out when to pan and zoom the map to show new locations. As you scroll down this map sidebar element the map automatically updates to show you the relevant location.

I was so impressed I had to steal the code. I used the Mapbox Blog's map code to make this little tour of the London Olympic Park.

Both The Guardian and Mapbox Blog maps include the option to gracefully fallback to an alternative Mapbox map for browsers which don't support Mapbox GL. I haven't done that with my map - so to view the map you will have to use a modern browser which supports Web GL.