Visualizing geospatial data with pydeck and Earth Engine

Google Earth
Aug 31 · 5 min read

Editor’s note: Today’s post is by Ib Green, CTO, and Kyle Barron, Software Engineer, both at Unfolded, an “open core” company that builds products and services on the open source deck.gl / vis.gl technology stack, and is also a major contributor to these frameworks. Green and Barron explain Google and Unfolded’s new open source framework, earthengine-layers, which enables Google Earth Engine to be used in combination with deck.gl to build a new generation of visualization applications.

Image for post
Image for post
Temperature variations loaded from an Earth Engine ImageCollection and displayed as an animation using the new deck.gl EarthEngineLayer

When Unfolded got the opportunity to collaborate with Google on a deck.gl / Earth Engine integration, we did not hesitate. Deck.gl is a GPU-powered geospatial visualization framework for large-scale geospatial data, and it had long been clear to us that making the spectacular data available through the Earth Engine API accessible in deck.gl visualizations would be very powerful, and would open up new important new use cases.

While the visualization that comes with the Earth Engine Code Editor is already very versatile, it is most optimized for high-performance visualization of raster vector tiles generated by the Earth Engine cloud on top of flat maps. The deck.gl integration adds a number of new capabilities:

  • Toolbox: deck.gl is a toolbox that lets you build complete visualization applications.
  • Vector data support: Earth Engine data rendered as true vector geometries.
  • Layer combinations: deck.gl allows visual layers showing different data sources to be freely combined. This brings the ability to render raster data as an image-based backdrop, and then overlay it with vector data rendered as true vector geometries.
  • Beyond 2D tiles: The deck.gl APIs also provide rich interactivity, enhanced animations, and even the ability to interpret Earth Engine data as terrain elevations and display them in full 3D.
Image for post
Image for post
Earth Engine raster tiles interpreted as elevation data by the deck.gl TerrainLayer and displayed in perspective view.

Support for both Python and JavaScript APIs

While web visualizations are typically programmed in JavaScript, Earth Engine has a big Python-focused community of data scientists. The fact that both the Earth Engine and the deck.gl APIs now have JavaScript and Python bindings allowed us to support both communities with a single integration effort.

Using the EarthEngineLayer in JavaScript

The new EarthEngineLayer is a normal JavaScript deck.gl layer that can be imported into and used in any deck.gl application, instantiated with an Earth Engine JavaScript object, and of course, used in combination with any other existing deck.gl layers.

import React from 'react';
import DeckGL from '@deck.gl/react';
import {EarthEngineLayer} from '@unfolded.gl/earthengine-layers';
import ee from '@google/earthengine';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {eeObject: null};
}
async _onLoginSuccess(user, loginProvider) {
const token = 'Google OAuth2 access token'
await EarthEngineLayer.initializeEEApi(
{clientId: EE_CLIENT_ID, token});
this.setState({eeObject: ee.Image('CGIAR/SRTM90_V4')});
}
render() {
const {viewport} = this.props;
const {eeObject} = this.state;
const visParams = {
min: 0,
max: 4000,
palette: ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']
};
const layers = [new EarthEngineLayer({eeObject, visParams})];
return (
<DeckGL controller {...viewport} layers={layers}/>
);
}
}

Note: this example uses deck.gl’s React bindings, but it can also be written in pure JavaScript.

Using the EarthEngineLayer in Python

Deck.gl provides Python bindings through pydeck. The new pydeck_earthengine_layers add-on module is available on both pip and conda.

All the application needs to do is to pass its ‘ee’ API object to the EarthEngineLayer together with a few visualization parameters, and then pass that Earth Engine layer instance to pydeck’s Deck class.

from pydeck_earthengine_layers import EarthEngineLayer
import pydeck as pdk
import ee
ee.Initialize()image = ee.Image('CGIAR/SRTM90_V4')
vis_params = {
"min": 0,
"max": 4000,
'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']
}
ee_layer = EarthEngineLayer(image, vis_params)
view_state = pdk.ViewState(latitude=37.7749295, longitude=-122.4194155, zoom=10, bearing=0, pitch=45)
r = pdk.Deck(
layers=[ee_layer],
initial_view_state=view_state
)
r.show()

Under the hood, the EarthEngineLayer converts Earth Engine Python API objects into Earth Engine JavaScript API objects that can be manipulated by deck.gl and are then used to retrieve Earth Engine data for display. The standard pydeck API can be used to control and interact with the EarthEngineLayer.

The power of satellite data

The combination of Google Earth Engine and deck.gl enables effortless visualization of huge geospatial datasets. The selection of datasets in Earth Engine is very rich, and the processing features of the Earth Engine API also allow for custom data to be synthesized from the existing catalogs, so the potential for exploration is huge.

This section shows just a few examples that were built to demonstrate the capabilities of using deck.gl and Earth Engine together.

Image for post
Image for post
SRTM 30-meter resolution elevation data over North America, visualized with a hypsometric tint. Lower elevations are deeper greens; brown and white shades correspond to higher elevations.

Traditionally, Earth Engine visualizations are raster-based. Deck.gl provides the ability to mix raster and vector-based graphics. The improved clarity of vector-based graphics combined with rich styling (including 3D extrusions and elevations) and also interactivity (informational tooltips when hovering) can open up new visualization applications.

Image for post
Image for post
The NOAA’s Atlantic Hurricane Catalog visualized as vector graphics using a deck.gl GeoJsonLayer.
Image for post
Image for post
The World Resources Institute’s Global Power Plant Database, visualized as a scatterplot layer with a data-driven radius corresponding to the energy output of each power plant.

Engage with the vis.gl community

We look forward to seeing what the community builds with the new earthengine-layers framework, bringing planetary-scale satellite-based data to bear on new geospatial problems and applications. If you want to share examples of your work, feel free to engage with us on GitHub; we may be able to host a link to your showcase.

Links

Google Earth and Earth Engine

For developers, scientists, explorers and storytellers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store