Summary

Uber's deck.gl framework integrates with Mapbox GL JS to enhance geospatial visualizations by allowing deck.gl layers to be rendered within the same WebGL context as Mapbox maps, providing seamless and more interactive geospatial data representations.

Abstract

The deck.gl framework, developed by Uber, is designed to work in conjunction with Mapbox GL JS to create advanced geospatial visualizations. With the release of Mapbox GL JS v0.50, deck.gl now supports rendering its layers directly into Mapbox's WebGL context, enabling a more integrated visualization experience where deck.gl elements can be precisely positioned in relation to Mapbox's base layers and labels. This integration is facilitated by the new @deck.gl/mapbox module, which introduces the MapboxLayer class. Developers can add deck.gl layers to a Mapbox map using map.addLayer(), and there are provisions for both Mapbox and deck.gl developers to incorporate these features into their applications. The integration allows for complex visualizations, such as overlaying deck.gl's GeoJSON layers with Mapbox's building layers, while maintaining correct occlusion of 3D elements. Examples of this integration include a visualization of road accidents in the U.K. and a map of county-to-county migration in the U.S., demonstrating the practical applications of this technology.

Opinions

The integration of deck.gl with Mapbox GL JS is seen as a significant advancement, enabling more sophisticated and seamless geospatial visualizations.
The new capabilities are considered exciting, with deck.gl supporting these new scenarios from day zero of the Mapbox GL JS release.
The use of a single WebGL context for both Mapbox and deck.gl layers is believed to open up many new possibilities for geospatial visualizations.
The examples provided, such as the U.K. road accidents and U.S. migration visualizations, are presented as compelling evidence of the benefits of integrating deck.gl with Mapbox GL JS.
The integration is designed to be user-friendly for developers, with clear instructions and code examples for adding deck.gl layers to a Mapbox map and for modifying existing deck.gl React apps to leverage the new integration.

deck.gl and Mapbox GL JS: Better Together

deck.gl, Uber’s large-scale WebGL-powered data visualization framework, and Mapbox GL JS are frequently used together to create compelling geospatial visualizations. deck.gl’s MapView is designed to work in tandem with Mapbox basemaps — the same camera settings (center, zoom, pitch, and bearing) in both libraries will produce seamlessly matched results. We use Mapbox as a backdrop for deck.gl’s visualization layers in nearly all of Uber’s geospatial data applications.

Mapbox GL JS’s latest release (v0.50) enables third-party layers to draw into the same WebGL context that a Mapbox map is rendered in. This opens many new possibilities for even more tightly integrated geospatial visualizations. For example, a deck.gl GeoJSON layer can be inserted in between Mapbox’s base geographic and label layers, so that filled polygons no longer cover up the map labels. deck.gl’s arc layer and Mapbox’s buildings layer may cohabit the airspace of a city, with 3D elements correctly obscuring each other.

We are excited to announce that deck.gl is supporting these scenarios on day zero with release v6.2 by adding a new module, @deck.gl/mapbox, to the Uber data visualization family.

*Example mixing deck.gl and mapbox layers*

Getting Started

The new experimental class, MapboxLayer, is an implementation of Mapbox GL JS’s custom layer interface. It can be imported either via the npm module:

npm install @deck.gl/mapbox

import {MapboxLayer} from ‘@deck.gl/mapbox’;

Or the deck.gl standalone bundle:

<script src=”https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<script type=”text/javascript”>
 const {MapboxLayer} = deck;
</script>

Instances of MapboxLayer can be added to Mapbox’s layer stack using map.addLayer(). The class constructor comes with two flavors, one for Mapbox developers and one for deck.gl developers.

Using deck.gl layers as a Mapbox add-on

You may make a MapboxLayer using any layer type from deck.gl’s layer catalog and its corresponding props:

Live demo

Note that when used this way, WebGL2-based deck.gl features, such as attribute transitions and GPU accelerated aggregation, are not supported.

Adding Mapbox integration to deck.gl React apps

It is also easy to modify a working deck.gl React app to leverage the new Mapbox integration. To do this:

Upgrade the app’s react-map-gl dependency to version 4.0.0-beta. This version allows us to supply the WebGL context that deck.gl created for Mapbox to draw into.
Pass layers into a component as usual.
When the Mapbox map is loaded, we create and add MapboxLayers to Mapbox by referencing the id of an existing layer in the deck.gl stack.

Integration examples

Road Accidents in the U.K.

This visualization depicts personal injury road accidents in the U.K. from 1979 through 2016. It uses deck.gl’s HexagonLayer to aggregate data within the boundary of each hexagon cell. The HexagonLayer is inserted underneath Mapbox’s label layers. Click here to explore

Road Safety in the UK (data source: data.gov.uk)

US County-to-County Migration

This visualization shows county-to-county migration in the U.S. between 2009–2013. Hover over the map to see the people moving in and out of any particular region. It uses a custom deck.gl layer that filters arcs based on mouse position. Click here to explore