Zhang, X., Liu, L., Zhao, T., Gao, Y., Chen, X., and Mi, J.: GISD30: global 30 m impervious-surface dynamic dataset from 1985 to 2020 using
time-series Landsat imagery on the Google Earth Engine platform, Earth Syst. Sci. Data, 14, 1831–1856,
https://doi.org/10.5194/essd-14-1831-2022, 2022

Liangyun,Liu; Xiao,Zhang; Tingting,Zhao; Yuan,Gao; Xidong,Chen; Jun,Mi. (2021). GISD30: global 30-m impervious surface dynamic dataset from 1985 to
2020 using time-series Landsat imagery on the Google Earth Engine platform [Data set]. Zenodo. https://doi.org/10.5281/zenodo.5220816

var gisd30 = ee.Image("projects/sat-io/open-datasets/GISD30_1985_2020");

//zoom to an urban center
Map.setCenter(31.16387, 30.97292,8)

var palette = ["#808080", "#006400", "#228B22", "#32CD32", "#ADFF2F", "#FFFF00", "#FFA500", "#FF0000"];

var snazzy = require("users/aazuspan/snazzy:styles");
snazzy.addStyle("https://snazzymaps.com/style/132/light-gray", "Grayscale");

Map.addLayer(gisd30,{min:1,max:8,palette:palette},'GISD 30')


var gisd30 = ee.Image("projects/sat-io/open-datasets/GISD30_1985_2020");
//zoom to an urban center
Map.setCenter(31.16387, 30.97292,8)

var gisd_vis = ["#808080", "#006400", "#228B22", "#32CD32", "#ADFF2F", "#FFFF00", "#FFA500", "#FF0000"];

var snazzy = require("users/aazuspan/snazzy:styles");
snazzy.addStyle("https://snazzymaps.com/style/132/light-gray", "Grayscale");

// Define a dictionary which will be used to make legend and visualize image on map
var dict = {
  "names": [
    "Before 1985",
    "1985-1990",
    "1990-1995",
    "1995-2000",
    "2000-2005",
    "2005-2010",
    "2010-2015",
    "2015-2020",
  ],
  "colors": [
    "#808080",
    "#006400",
    "#228B22",
    "#32CD32",
    "#ADFF2F",
    "#FFFF00",
    "#FFA500",
    "#FF0000"]};
  // Create a panel to hold the legend widget
  // Create a panel to hold the legend widget
// Create a panel to hold the legend widget
var legend = ui.Panel({
  style: {
    position: 'bottom-left',
    padding: '8px 15px'
  }
});

// Function to generate the legend
function addCategoricalLegend(panel, dict, title) {
  
  // Create and add the legend title.
  var legendTitle = ui.Label({
    value: title,
    style: {
      fontWeight: 'bold',
      fontSize: '18px',
      margin: '0 0 4px 0',
      padding: '0'
    }
  });
  panel.add(legendTitle);
  
  var loading = ui.Label('Loading legend...', {margin: '2px 0 4px 0'});
  panel.add(loading);
  
  // Creates and styles 1 row of the legend.
  var makeRow = function(color, name) {
    // Create the label that is actually the colored box.
    var colorBox = ui.Label({
      style: {
        backgroundColor: color,
        // Use padding to give the box height and width.
        padding: '8px',
        margin: '0 0 4px 0'
      }
    });
  
    // Create the label filled with the description text.
    var description = ui.Label({
      value: name,
      style: {margin: '0 0 4px 6px'}
    });
  
    return ui.Panel({
      widgets: [colorBox, description],
      layout: ui.Panel.Layout.Flow('horizontal')
    });
  };
  
  // Get the list of palette colors and class names from the image.
  var palette = dict['colors'];
  var names = dict['names'];
  loading.style().set('shown', false);
  
  for (var i = 0; i < names.length; i++) {
    panel.add(makeRow(palette[i], names[i]));
  }
  
  Map.add(panel);
  
}

addCategoricalLegend(legend, dict, 'Impervious Surface (Years)');

Map.addLayer(gisd30, {min:1,max:8,palette:gisd_vis}, 'Impervious Surface (Years)');