Lab 20 - Design UI/UX and Deploying Google Earth Engine Apps

Part 1: Get NLCD Image by Year

Create a function to get NLCD land cover for a specific year:

// Get an NLCD image by year
var getNLCD = function(year) {
    // Import the NLCD collection
    var dataset = ee.ImageCollection('USGS/NLCD_RELEASES/2019_REL/NLCD');
    
    // Filter the collection by year
    var nlcd = dataset.filter(ee.Filter.eq('system:index', year)).first();
    
    // Select the land cover band
    var landcover = nlcd.select('landcover');
    return ui.Map.Layer(landcover, {}, year);
};

Part 2: Create Image Dictionary

Build a dictionary mapping years to their NLCD layers:

// Create a dictionary with each year and its corresponding NLCD layer
var images = {
    '2001': getNLCD('2001'),
    '2004': getNLCD('2004'),
    '2006': getNLCD('2006'),
    '2008': getNLCD('2008'),
    '2011': getNLCD('2011'),
    '2013': getNLCD('2013'),
    '2016': getNLCD('2016'),
    '2019': getNLCD('2019')
};

Part 3: Create Split Panel Maps

Create left and right maps with dropdown selectors:

// Create the left map (shows first year by default)
var leftMap = ui.Map();
leftMap.setControlVisibility(false);
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');

// Create the right map (shows last year by default)
var rightMap = ui.Map();
rightMap.setControlVisibility(true);
var rightSelector = addLayerSelector(rightMap, 7, 'top-right');

// Function to add layer selection widget to a map
function addLayerSelector(mapToChange, defaultValue, position) {
    var label = ui.Label('Select a year:');
    
    // Function to update the map layer
    function updateMap(selection) {
        mapToChange.layers().set(0, images[selection]);
    }
    
    // Create dropdown selector
    var select = ui.Select({
        items: Object.keys(images),
        onChange: updateMap
    });
    select.setValue(Object.keys(images)[defaultValue], true);
    
    // Create control panel
    var controlPanel = ui.Panel({
        widgets: [label, select],
        style: {position: position}
    });
    
    mapToChange.add(controlPanel);
}

Part 4: Create the Legend

Define NLCD land cover classes and colors:

// Legend configuration
var title = 'NLCD Land Cover Classification';
var position = 'bottom-right';

var dict = {
    'names': [
        '11 Open Water', '12 Perennial Ice/Snow',
        '21 Developed, Open Space', '22 Developed, Low Intensity',
        '23 Developed, Medium Intensity', '24 Developed, High Intensity',
        '31 Barren Land', '41 Deciduous Forest', '42 Evergreen Forest',
        '43 Mixed Forest', '52 Shrub/Scrub', '71 Grassland/Herbaceous',
        '81 Pasture/Hay', '82 Cultivated Crops',
        '90 Woody Wetlands', '95 Emergent Herbaceous Wetlands'
    ],
    'colors': [
        '#466b9f', '#d1def8', '#dec5c5', '#d99282', '#eb0000', '#ab0000',
        '#b3ac9f', '#68ab5f', '#1c5f2c', '#b5c58f', '#ccb879', '#dfdfc2',
        '#dcd939', '#ab6c28', '#b8d9eb', '#6c9fb8'
    ]
};

Part 5: Assemble the App

Tie everything together with a SplitPanel:

// Create legend panel
var legend = ui.Panel({
    style: {position: position, padding: '8px 15px'}
});

// Add legend to map (function definition in full code)
addCategoricalLegend(legend, dict, title);

// Create split panel with linked maps
var splitPanel = ui.SplitPanel({
    firstPanel: leftMap,
    secondPanel: rightMap,
    wipe: true,
    style: {stretch: 'both'}
});

// Set the SplitPanel as the root UI
ui.root.widgets().reset([splitPanel]);

// Link the maps for synchronized pan/zoom
var linker = ui.Map.Linker([leftMap, rightMap]);
leftMap.setCenter(-100, 40, 4);

Part 6: Publish Your App

1. Click the Apps button above the script panel
2. Click New App
3. Name your app (e.g., "NLCD Land Cover Change")
4. Select a Google Cloud Project (use defaults if first app)
5. Configure source code and appearance
6. Click Publish