Creating Split Panel Web Apps with Google Earth Engine: A Comprehensive Guide

Introduction

Google Earth Engine is a powerful cloud computing platform that provides access to vast amounts of geospatial data and enables advanced analysis and visualization of that data. One of the many useful features of Earth Engine is the ability to create interactive web applications that allow users to explore and compare satellite imagery and other geospatial datasets.

In this article, we‘ll take an in-depth look at a specific type of Earth Engine web app: the split panel interface. Split panel apps display two images side-by-side with a movable divider in between, allowing for easy visual comparison of the two datasets. We‘ll cover what split panel apps are used for, walk through a detailed tutorial on creating one in Earth Engine, discuss some example use cases, and provide tips for designing effective split panel interfaces.

What are Split Panel Web Apps?

A split panel web app is an interactive interface that displays two images, maps, or datasets next to each other with a movable vertical divider separating them. The user can click and drag the divider to reveal more or less of each side. This setup enables direct visual comparison between the two datasets.

The two panels are linked, so panning or zooming one side will automatically do the same to the other, keeping the two views in sync. This allows the user to explore a particular location or feature in both datasets simultaneously.

Split panel apps are useful for a variety of applications where comparing two related datasets is helpful. Some common use cases include:

• Comparing satellite imagery of an area from two different points in time to observe changes
• Comparing a raw satellite image to a classified version showing land cover types
• Comparing the output of a machine learning analysis to the input imagery
• Comparing two different types of data for the same area, such as elevation and land surface temperature

By placing the two datasets side-by-side with an adjustable divider, split panel apps make it easy to spot similarities and differences between the two views. This can reveal insights that might not be apparent from looking at either dataset on its own.

Google Earth Engine Overview

Google Earth Engine is a cloud-based platform for analyzing and visualizing geospatial data. It combines a huge catalog of satellite imagery and other datasets with powerful computing resources and a flexible API accessible through JavaScript and Python.

Some key features of Earth Engine include:

• Access to over 40 years of historical and current global satellite imagery from providers like Landsat, Sentinel, and MODIS
• Additional datasets like weather, climate, terrain, land cover, and demographics
• Built-in functions for image processing, mathematical and statistical operations, machine learning, and more
• Ability to import your own data and combine it with Earth Engine datasets
• Interactive visualization of results as maps and charts
• Sharing and publishing of analyses as web apps

For the purposes of this article, we‘ll focus on using Earth Engine to create web apps, specifically split panel apps. Earth Engine provides a straightforward way to define the layout and functionality of a web app using JavaScript code, and handles the details of hosting and serving the app.

Tutorial: Creating a Split Panel Web App in Earth Engine

Now let‘s walk through the process of creating a split panel web app step-by-step. We‘ll assume you already have an Earth Engine account set up. If not, you can sign up for free at earthengine.google.com.

1. Open the Earth Engine Code Editor at code.earthengine.google.com. This is an online IDE where you can write and run Earth Engine scripts.

2. In the Code Editor, create a new script by clicking the "New" button in the top left and selecting "Script" from the dropdown.

3. We‘ll start by defining the two datasets we want to compare in our split panel app. For this example, let‘s compare Landsat 8 imagery of an area from 2013 and 2020 to look at changes over time. Here‘s the code to load the imagery:

var geometry = ee.Geometry.Point([-122.4439, 37.7538])
  .buffer(10000); 

var landsat2013 = ee.ImageCollection(‘LANDSAT/LC08/C01/T1_SR‘)
  .filterBounds(geometry)
  .filterDate(‘2013-01-01‘, ‘2013-12-31‘)
  .sort(‘CLOUD_COVER‘)
  .first()
  .select([‘B4‘, ‘B3‘, ‘B2‘]);

var landsat2020 = ee.ImageCollection(‘LANDSAT/LC08/C01/T1_SR‘)  
  .filterBounds(geometry)
  .filterDate(‘2020-01-01‘, ‘2020-12-31‘)
  .sort(‘CLOUD_COVER‘)
  .first()
  .select([‘B4‘, ‘B3‘, ‘B2‘]);

This code defines an area of interest around San Francisco, CA using a geometry, then loads Landsat 8 surface reflectance images for that area from 2013 and 2020, filtering to get the least cloudy image for each year and selecting the red, green, and blue bands.

4. Next, we‘ll create the map objects for each side of the split panel and add the image layers:

var leftMap = ui.Map();
leftMap.addLayer(landsat2013, {min: 0, max: 3000}, ‘2013‘);

var rightMap = ui.Map();  
rightMap.addLayer(landsat2020, {min: 0, max: 3000}, ‘2020‘);

5. To create the split panel, we‘ll use Earth Engine‘s ui.SplitPanel widget, specifying the left and right map objects:

var splitPanel = ui.SplitPanel({
  firstPanel: leftMap,
  secondPanel: rightMap,
  wipe: true,
  style: {stretch: ‘both‘}
});

The wipe parameter adds the movable divider, and the style makes the split panel expand to fill its container.

6. Finally, we need to add the split panel to the UI root widget that serves as the base of the app:

ui.root.widgets().reset([splitPanel]);

7. At this point, you should have a functioning split panel app! Click the "Run" button at the top of the code editor to execute the script. The app will appear in a panel to the right.

8. To make the app more user-friendly, let‘s add some extra features. We can link the two maps so that panning and zooming one side automatically updates the other:

var linker = ui.Map.Linker([leftMap, rightMap]);

9. We can also center the maps on the area of interest when the app loads:

leftMap.centerObject(geometry, 9);

10. Finally, let‘s add a title and some explanatory text to the app using ui.Label widgets:

var title = ui.Label(‘San Francisco Landsat Imagery: 2013 vs 2020‘, {
  fontWeight: ‘bold‘,
  fontSize: ‘24px‘,
  textAlign: ‘center‘,
  stretch: ‘horizontal‘
});

var subtitle = ui.Label(
  ‘Drag the center divider to compare Landsat 8 images from 2013 (left) and 2020 (right)‘,
  {textAlign: ‘center‘, stretch: ‘horizontal‘}
);

ui.root.widgets().reset([
  ui.Panel([
      title,
      subtitle,
      splitPanel
  ], ui.Panel.Layout.Flow(‘vertical‘), {stretch: ‘both‘})
]);  

This adds the labels in a vertical stack panel with the split panel.

11. And that‘s it! You now have a fully-functional split panel web app comparing Landsat imagery from two different years. The complete code is available at the end of this article.

Example Use Cases

The example app we created compares satellite imagery from different years, but there are many other possibilities for split panel apps. Here are a few more use cases to spark your imagination:

• Comparing classified land cover maps from different years or derived from different classification methods
• Comparing raw imagery to the output of machine learning-based analyses like object detection or semantic segmentation
• Comparing different types of data for the same area, like topography and land surface temperature, to explore relationships
• Comparing imagery from different seasons to examine phenological changes in vegetation
• Comparing before/after imagery of natural disasters or human development to assess impacts

The side-by-side, linked panel setup of split panel apps is useful any time you need to closely examine the spatial relationships between two datasets. It‘s a flexible design that can be adapted to many domains.

Design Tips and Best Practices

When creating your own split panel apps, keep these tips in mind:

• Choose datasets that are meaningfully related and provide interesting insights when compared. The power of a split panel comes from revealing spatial relationships.
• Ensure the two datasets are spatially aligned. Earth Engine‘s reprojection and resampling functions can help with this.
• Use the same visualization parameters (band combinations, Min/max values, colormaps) for both datasets if possible to facilitate comparison.
• Add clear titles, legends, and explanatory text to help users interpret what they‘re seeing.
• Constrain map zooming and panning to reasonable boundaries for your use case.
• Consider adding extra features to enhance the user experience, like map layer controls, user-defined zoom levels, hover-over data inspection, or data export options.

Future Outlook

Split panel web apps are just one example of the powerful data visualization and sharing capabilities of Earth Engine. As the geospatial data landscape continues to evolve, with new satellites, sensors, and analysis methods constantly emerging, interactive web apps will play an increasingly important role in making complex data accessible and actionable.

Some exciting areas of development to watch include:

• Integration of machine learning and AI into Earth Engine, enabling more sophisticated analyses to be packaged into web apps
• Addition of more non-imagery datasets like climate model outputs, demographic data, and real-time sensor feeds
• Improvements to Earth Engine‘s App Engine integration, allowing for more customizable and feature-rich web app designs
• Growth of the Earth Engine developer community, with more people building and sharing reusable web app templates and components

Ultimately, the power of web apps like split panel interfaces lies in their ability to democratize access to geospatial data and insights. By making it easy for anyone to explore and compare datasets, these apps can drive better-informed decision making across domains like natural resource management, urban planning, disaster response, and environmental conservation. As web app development tools and practices continue to advance, the potential for positive impact will only grow.

Conclusion

In this article, we‘ve taken a deep dive into split panel web apps, a powerful tool for comparing geospatial datasets side-by-side. We covered the basic concepts behind split panel interfaces, explored the capabilities of the Google Earth Engine platform, and walked through a detailed tutorial on creating a split panel app to compare satellite imagery over time.

We also discussed some example use cases, provided design tips and best practices, and considered the future outlook for web app development in Earth Engine and beyond.

By now, you should have a solid understanding of split panel apps and how to create your own using Earth Engine. We encourage you to experiment with the code and datasets used in this tutorial, and to brainstorm ways that split panel apps could be applied in your own work or areas of interest.

As you‘ve seen, Earth Engine provides a powerful set of tools for geospatial data access, analysis and visualization. By packaging your analyses into interactive web apps, you can expand the reach and impact of your work and enable others to engage with geospatial data in new ways. Split panel apps are just one example of the many creative possibilities.

So dive in, get creative, and start building! We can‘t wait to see what you come up with.

// Complete code for example split panel app

var geometry = ee.Geometry.Point([-122.4439, 37.7538]).buffer(10000); 

var landsat2013 = ee.ImageCollection(‘LANDSAT/LC08/C01/T1_SR‘)
  .filterBounds(geometry)
  .filterDate(‘2013-01-01‘, ‘2013-12-31‘)
  .sort(‘CLOUD_COVER‘)
  .first()
  .select([‘B4‘, ‘B3‘, ‘B2‘]);

var landsat2020 = ee.ImageCollection(‘LANDSAT/LC08/C01/T1_SR‘)  
  .filterBounds(geometry)
  .filterDate(‘2020-01-01‘, ‘2020-12-31‘)
  .sort(‘CLOUD_COVER‘)
  .first()
  .select([‘B4‘, ‘B3‘, ‘B2‘]);

var leftMap = ui.Map();
leftMap.addLayer(landsat2013, {min: 0, max: 3000}, ‘2013‘);

var rightMap = ui.Map();  
rightMap.addLayer(landsat2020, {min: 0, max: 3000}, ‘2020‘);  

var linker = ui.Map.Linker([leftMap, rightMap]);

var splitPanel = ui.SplitPanel({
  firstPanel: leftMap,
  secondPanel: rightMap,
  wipe: true,
  style: {stretch: ‘both‘}
});

var title = ui.Label(‘San Francisco Landsat Imagery: 2013 vs 2020‘, {
  fontWeight: ‘bold‘,
  fontSize: ‘24px‘, 
  textAlign: ‘center‘,
  stretch: ‘horizontal‘
});

var subtitle = ui.Label(
  ‘Drag the center divider to compare Landsat 8 images from 2013 (left) and 2020 (right)‘,
  {textAlign: ‘center‘, stretch: ‘horizontal‘}
);

ui.root.widgets().reset([
  ui.Panel([
      title,
      subtitle,
      splitPanel
  ], ui.Panel.Layout.Flow(‘vertical‘), {stretch: ‘both‘})
]);

leftMap.centerObject(geometry, 9);