GFW 4.0: MapboxGL + Vector Plantations Layer

[edbrett]

It's time for another upgrade! For the previous 3.0 release we rebuilt the whole map stack, built and open source layer manager, moved all the layers and data to the API, and built a significant amount of new code and features. All of this on top of the leaflet stack we had been developing along side Resource Watch. Now it's time to take it one step further and upgrade the entire map, API layers, and layer manager to Mapbox and vector layers. The original motivation for this change was to allow the displaying of the new Global Plantations layer which contains over 2.5 million geoms and metadata, making it too large to be handled by a GeoJSON layer in leaflet (or even a vector layer on leaflet), and still function within the map alongside the other layers. The solution is this PR!

The core upgrades we have made are:

• Add MapboxGL with ReactMapboxGL from Uber. 🚕 🗺 💯
• Created a new Layer Manager plugin for handling consistent Mapbox layer functionality (adding, removing, z-indexing, decoding etc).
• Use deck.gl to create a new custom layer for tiling raster layers, converting them into bitmap images and decoding them into RGBA pixels for animation. Huge thanks to @mbarrenechea for his support and lead on this feature. 🙌 🔥 🗺 .
• Migrated all API layers to provide vectorLayers style. Thanks to @01painadam and @benlaken for their mastery of the API.
• New Popup and interaction workflow using Mapboxs' queryFeatures API.
• Basemaps and labels are now loaded as a single set of layers and painted dynamically based on the map settings, making it both faster and more flexible.
• Changed to mapbox draw from leaflet draw.

Key breaking changes in GFW:

• Due to the 3D feature of MapboxGL we can no longer handle bounding boxes and fit to bounds in the same way. We have to handle all transitions of the view using viewport-web-mercator.
• Zoom levels in Mapbox don't correlate to the same as Leaflet due to the blending of zoom levels. Now the min zoom is 2 and max zoom 19.
• Mapbox and not Leaflet 😁.

Many many thanks to all involved in this feature. Some particular favourites: @mbarrenechea @01painadam @davidsingal @andresgnlez @blayhem @benlaken @faustoperez @danielcasius @Jamie-Gibson @sorodrigo

[dfrico]

A lot to cover, but overall looks good and works fine on local. Good job 👍

[dfrico]

Why do you reverse the bounding box?