Google Maps Platform
Richer data visualization on Google Maps Platform using deck.gl
Under the hood this means that the vector basemap and deck.gl share the same WebGL rendering context, increasing the performance and flexibility of visualizations rendered on the map. In effect, instead of the visualizations of deck.gl being rendered on the map, they are now rendered as part of the map. Sharing this WebGL context is not easy, so our team and the CARTO team have partnered to provide support as both libraries evolve.
Let’s take a look at an example.
In the following code, we are loading data from a CSV file using the open source library loaders.gl, creating a Hexagon deck.gl visualization layer, creating an overlay for Google Maps Platform, and finally adding it to the map.
With the flexibility of deck.gl, of course you can go quite a long way, as showcased in CARTO’s Texas demo. Let’s take a look at some of the main visualizations.
The Hexagon layer is useful for visualizing aggregated data. You can define the colors or the height of the hexagons, using a property such as population. In this example, you can see how the population of Texas is concentrated in a few large urban areas.
Map Large datasets using Vector Tiles
When visualizing large datasets, like in the case of the power line visualizations. You are going to need to load the data progressively in tiles. Deck.gl has different pre-created layers like MVTLayer, TileLayer or Tile3DLayer.
In this map we are visualizing an open dataset of around 70MB of electric power lines. Using the CartoLayer on deck.gl, this visualization loads the data in small vector tiles of less than 512kb.
Animations and rich cartography
In addition to cartographic capabilities, animation features allow for a much richer set of visualizations and a seamless user experience. The example below shows Texas’ renewable energy sources.
Animating trips and 3D
Animating trips is one of the most popular deck.gl visualizations. And because of the interleaving support, those trips respect buildings and all other Google Maps Platform features.
Check out the code here.
Try it out
To get started, take a look at some of the demos of deckgl + Google Maps Platform. Then head to deck.gl website to learn more in advance on how to customize the layers or even create your own ones. Finally the entire source code for the Texas demo is also freely available.
We hope you have fun mixing deck.gl and Google Maps Platform—we can’t wait to see what interesting visualizations you build. For more information on CARTO, getting a free account, and overlaying data from BigQuery, visit the CARTO website.
For more information on Google Maps Platform, visit our website.