deck.gl v8.6 now available with deeper Google Maps support

Today we are very pleased to announce the availability of deck.gl v8.6, which alongside a whole host of new features, adds full support for the WebGL Overlay View feature of the Google Maps JavaScript API.

Google Maps Platform revolutionized the web mapping space when it was launched back in 2005 and has become the most popular framework for developing map applications on the web.

As the leading open source framework for data visualization, we recognize the importance for deck.gl to have strong support for Google Maps and in 2019 we kickstarted development to ensure the two could work seamlessly together. This made it possible to use Google Maps as a raster basemap, but with this year’s addition of support for WebGL overlays we have taken it even further.

Luckily Google thinks the same and has been working hard alongside the CARTO team to add much stronger deck.gl support for Google Maps by utilizing these new WebGL features.

Read the latest blogpost from Google Maps Platform to check out the great visualizations they have created to showcase deck.gl and Google Maps integration.

What’s new?

This new release adds support for the vector basemap in interleaved mode. This means that with deck.gl, Google’s vector map can now be mixed with data layers, providing a pixel perfect composition where labels, 3D, and other content are respected and rendered perfectly with depth and occlusion.

Full vector rendering support with backwards compatibility

While implementing support for vector rendering, we worked hard to maintain compatibility with the existing GoogleMapsOverlay class. So you can continue using it as before but with the following enhancements:

• Shared 3D space: objects drawn by the GoogleMapsOverlay class appear inside the Google Maps scene, correctly intersecting with 3D buildings and behind the contextual labels drawn by Google Maps.
• Tilting and rotating the view is supported.
• Rendering uses the same WebGL context as Google Maps, improving performance.

Getting started with deck.gl and Google Maps Platform

The basics are simple. Create a deck.gl Layer and add it to a GoogleMapsOverlay object and finally add that overlay to your Google Maps Map object.

You start by loading deck.gl 8.6 and the Google Maps library. The WebGL Overlay View of Google Maps is currently only available on the beta channel. You need to specify your API key and a Map ID with vector maps enabled. For more details check out the official documentation.

<script src=”https://unpkg.com/deck.gl@8.6.0/dist.min.js"></script><script src=”https://maps.googleapis.com/maps/api/js?key=xx&v=beta&map_ids=xxx"></script>

The next thing is to create the Google Map and a deck.gl Layer.

// Create a Google Map
const map = new google.maps.Map(document.getElementById("map"), {
  center: {lat: 50, lng: 14},
  tilt: 30,
  gestureHandling: 'greedy',
  mapId: 'fae05836df2dc8bb',
  zoom: 3
});
// Create a deck.gl visualization layer
const flightsLayer = new deck.ArcLayer({
  id: 'flights',
  data: AIR_PORTS,
  dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
  getSourcePosition: f => [14.42076, 50.08804], // Prague
  getTargetPosition: f => f.geometry.coordinates,
  getSourceColor: [0, 128, 200],
  getTargetColor: [0, 0, 80],
  getWidth: 1
});

And finally create a GoogleMapsOverlay that will be added to the map.

const overlay = new deck.GoogleMapsOverlay({
  layers: [flightsLayer]
});
overlay.setMap(map);

Live demo in JSfiddle

To learn more and see a full set of example visualizations check out this link: http://jsfiddle.net/user/felixp/fiddles/

Other improvements coming on deck.gl 8.6

There are many other improvements available in this version of deck.gl. Here are some of the highlights:

• CartoLayer adds new geoColumn and columns props, enables more granular data fetching from CARTO backend.
• ColumnLayer and GridCellLayer add radiusUnits prop.
• H3HexagonLayer now supports manually forcing low-precision, high-performance rendering with highPrecision: false.
• HeatmapLayer adds weightsTextureSize and debounceTimeout props for fine-tuning performance.
• MVTLayer now defaults to handling geometries in binary.
• Scatterplot and GeoJsonLayer add option to turn off antialiasing to avoid artifacts in depth oclusion.
• TileLayer no longer purges its cache when data changes, resulting in a smoother “reload” experience

Thank you very much to all of the developers who have contributed to this latest release.

Welcome Google Maps developers!

The vision of deck.gl is to provide the best open source, open governance visualization library for large-scale datasets. CARTO and Google Maps have agreed to maintain and support this connection between deck.gl and Google Maps for the years to come.

Many organizations are now collaborating to make this project a success and that’s why we believe our open governance model is so important.

So stay tuned for more layers and features, and please share with us what you build with deck.gl 8.6.

We can’t wait to see what you build!