Add deck.gl layers to Mapbox maps with one line of code
By: Ryan Baumann
Earlier this summer at Locate, we announced our partnership with Uber’s data visualization team to integrate deck.gl with Mapbox. Our mission is to build incredible developer tools that help us understand and explore our world. Today we’re launching an integration between Uber’s data visualization library, deck.gl, and Mapbox GL JS. This means developers can add more types of data to their maps — with less code and higher performance.
For those new to visualizing data with deck.gl and Mapbox, deck.gl is an open source geospatial analysis toolbox built on top of Mapbox GL JS that makes understanding location data simple. This toolbox is used to visualize massive datasets without compromising performance, from mapping hundreds of millions of trips as a ridesharing company to analyzing network models and cellular coverage as a telecommunications company. Together, we’ve made it easy for developers to add any of the beautiful data visualization layer types in deck.gl to a Mapbox map.
This integration is powered by a new feature in Mapbox GL JS v0.50: Custom Layers. Custom Layers works with popular WebGL rendering libraries like deck.gl and three.js for adding 3D models, data visualization layers, and animated scenes. This enables developers to render a WebGL scene directly into the Mapbox GL context as a layer, giving full control over what’s brought into the map — whether that’s a 3D CAD rendering, a SpaceX rocket launch simulation, or a GLTF solid model.
Here are a few visualizations enabled by Custom Layers that we’re most excited about.
Deck.gl data visualizations
Before Custom Layers, visualizations with origin-to-destination great-arc circles were difficult to create. Deck.gl arc layers makes this easy.
The visualization below shows US migration patterns between cities. Mouse over each city to visualize the volume of people moving to other areas of the US. Blue lines indicate net migration into a city, while red lines indicate net migration out. Not only can users clearly see city labels above their data, but developers can create this visual by adding a deck.gl layer at runtime.
To add arc layers to your Mapbox map, follow the example from deck.gl’s Mapbox layer docs:
Deck.gl has many more advanced data visualization layers you can add to a Mapbox map, including point clouds, contours, and more, enabling you to build the best visualization for your location data.
3D models
Developers have long requested full support for 3D models in Mapbox GL JS. With Custom Layers, it’s easy to add 3D models to a Mapbox map with three.js.
Andrew Harvey of Alantgeo created a basic example of how to load a GLTF 3D model and render it under a label layer. Prior to Custom Layers, developers had to manually work with coordinate matrix projections to synchronize two WebGL canvases for the map and the 3D model. Now, developers can control exactly where the model is placed in the scene, and Mapbox handles the synchronization of the model with the map while the user pans and zooms.
What’s next
deck.gl data visualizations and three.js 3D models are just the beginning of what’s possible with Custom Layers. To get started with deck.gl and Mapbox, head to the deck.gl + Mapbox docs. And to start building with Custom Layers in GL JS, check out our developer example and documentation.
Share your maps with us on Twitter @Mapbox and @UberEng! We can’t wait to see what you build.
Launching custom layers with Uber was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.