Data Visualisation

The GEE Code Editor also provides many ways to visualise the data, including adding information to the User Interface (UI).

The following example demonstrates how to use GEE to compare two satellite images using a Split Panel.

You can access the entire script here:

https://code.earthengine.google.com/e70c733b50bd59c6834c76c974c0c223code.earthengine.google.com

Step by Step:

Add the Images:

First, load and style in the images:

//Left-hand panel data: 

var sentinel2_jan = ee.ImageCollection('COPERNICUS/S2_SR')
                       .filterDate('2021-01-01', '2021-02-01')  
                       .filterBounds(brunt_geo.buffer(100000))  
                       .filter('CLOUDY_PIXEL_PERCENTAGE < 30')

var s2_jan_rgb = sentinel2_jan.select(['B4', 'B3', 'B2'])
var s2_jan_median = s2_jan_rgb.median()


// Right-hand panel data:

var sentinel2_feb = ee.ImageCollection('COPERNICUS/S2_SR')
                      .filterDate('2021-02-01', '2022-03-01')  
                      .filterBounds(brunt_geo.buffer(100000))  
                     .filter('CLOUDY_PIXEL_PERCENTAGE < 30')

var s2_feb_rgb = sentinel2_feb.select(['B4', 'B3', 'B2'])
var s2_feb_median = s2_feb_rgb.median()

Define each Panel:

Then, define which information is appearing in each panel:

// Map Panel data: 

// Map 1 - left-hand side:
var map1 = ui.Map();
var left_img = ui.Map.Layer(s2_jan_median, Vis, 'January Median')
var left_layer = map1.layers()

left_layer.add(left_img)

var left_label = ui.Label('Sentinel-2a January 2021')
left_label.style().set('position', 'top-left')

map1.add(left_label)


// Map 2 - right-hand side:
var map2 = ui.Map();
var right_img = ui.Map.Layer(s2_feb_median, Vis, 'February Median')
var right_layer = map2.layers()

right_layer.add(right_img)

var right_label = ui.Label('Sentinel-2a February 2021')
right_label.style().set('position', 'top-right')
map2.add(right_label)

Define the Split Panel:

// Define the Split Planel: 
var splitPanel = ui.SplitPanel({
  firstPanel: map1,
  secondPanel: map2,
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

ui.root.clear()
ui.root.add(splitPanel)

Link the Panels

And finally, link the panels together:

var linker = ui.Map.Linker([map1, map2]);
linker.get(0).setCenter(-26.051376133679682,-75.46047374394453);

The result can be seen here:

https://code.earthengine.google.com/1635be8433dfb3d7ad32749ac3e56217code.earthengine.google.com