Editor’s Note: Today’s post comes from Alex Muramoto–Developer Advocate on the Google Maps Platform developer relations team. Today is part one of a three–part series on using the open-source deck.gl data visualization framework with the Google Maps Platform JavaScript API.

In May, our Maps engineering lead, Travis McPhail, announced initial Maps JavaScript API support for deck.gl during his talk at Google I/O on building for performance and scale with Google Maps Platform. Since then, we’ve talked to developers around the world about the possibilities of deck.gl and what it can bring to maps on the web, and we’ve been excited by the enthusiastic response. Haven’t heard about deck.gl yet? Read on to learn all about it.

What is deck.gl?Part of the vis.gl framework suite, deck.gl is an open-source framework that brings a variety of high-performance, beautiful data visualizations to the web. Here’s a quick rundown from the deck.gl docs on what the framework provides you:

• Handling of large data sets and performant updates

• Interactive event handling such as picking

• Cartographic projections and integration with underlying map

• A catalog of proven, well-tested layers

• Easy to create new layers or customize existing layers

**Why deck.gl?**One of the challenges many web developers face when visualizing data is how to performantly render extremely large datasets. Developers often tell us they aren’t trying to render hundreds of data points, but tens or hundreds of thousands, or even millions.

Due to its single-threaded event loop model, JavaScript is generally not well-suited to the sort of heavy compute required to handle large amounts of data and render 3D graphics. To overcome this, deck.gl uses the WebGL library, which provides access to the GPU on the user’s computer asynchronously. In short, this means all of the heavy lifting is moved off the browser and into hardware that is better suited for this type of task. The result? A set of incredible looking visualizations that can handle millions of data points fast.

**How does deck.gl work?**deck.gl takes advantage of the OverlayView provided by the Maps JavaScript API to render its visualizations as layers on top of the map. This enables automatic syncing of deck.gl visualization layers with the underlying base map even as the user pans and zooms, giving your users the same fully-interactive map experience they’re familiar with. 

The layer-based approach of deck.gl also makes it possible for you to add multiple visualizations on top of the map to create composite effects. Here’s an example of that in action, where we’re rendering two datasets as separate Scatterplot Layers to create a single visual:

deck.gl also uses a reactive programming model, which enables fast updating of visualizations based on changes to layer properties and data. What’s that mean? Well, lots of things, but also animated data viz! Here’s an example of directions returned by the Maps JavaScript API’s directions service, animated using deck.gl’s Trips Layer:

**How do I get started?**To get a sample of what the Maps JavaScript API can do with deck.gl, check out our example app, as well as the deck.gl documentation to familiarize yourself with the framework. You can also find the source for the example app and separate standalone examples for individual layers on our GitHub. The deck.gl team has also written a great article about general performance expectations and optimization techniques here.

And stay tuned! Next up in this series, we’ll bring you easy-to-follow tutorials that you can use to build your first Google Maps Platform integrations with deck.gl.

For more information on Google Maps Platform, visit our website.