By Xiaoji Chen

Uber’s vis.gl suite gives users the tools to map mobility trends and take the pulse of a city with data visualization. To expand this charter, we are partnering with Mapbox, enhancing our data visualization tools and growing our open source community.

Released today, Mapbox v0.50 enables the integration of third-party layers into the same WebGL context in deck.gl. This addition to our partner ecosystem will allow deck.gl users to better leverage our libraries for a wide set of use cases, ensuring ease-of-use, flexibility, and richer integrations.

 

Introducing @deck.gl/mapbox custom layers

deck.gl and Mapbox GL are frequently combined to create compelling geospatial visualizations. deck.gl’s MapView is designed to work in tandem with Mapbox base maps; the same camera settings (center, zoom, pitch, and bearing) in both libraries will produce seamlessly matched results. In almost all of our geospatial data applications, Mapbox is used as a backdrop for deck.gl’s visualization layers.

A new feature in Mapbox’s latest release (v0.50) enables third-party layers to draw into the same WebGL context. 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 geography and label layers, so that filled polygons no longer hamper readability of the map. deck.gl’s arc layer and Mapbox’s buildings layer may cohabit the airspace of a city, with 3D elements correctly obscuring each other.

Standard usage (separate context).
Integrated usage (single context).

We are excited to announce that deck.gl is supporting these scenarios on day zero with release v6.2 and the addition of a new module, @deck.gl/mapbox, to its set of features. Learn how you can get started with deck.gl v6.2 and our Mapbox integration on the vis.gl blog.

Mixing deck.gl and mapbox layers

To learn more, subscribe to the Uber Visualization newsletter or tweet us with what you’ve built using the #deckgl hashtag and the @UberEng Twitter handle!