Tutoriel 6.2

2.5. Ajouter une légende à l'élevation

L'extrait de code ci-dessous définit une fonction permettant d'ajouter une légende à la carte d'altitude (ALOS) en bas à droite des cartes de l'application web finale.

//////////////////ajout de la fonction de la légende DEBUTE ici///////////////////

// Pour l'application web, afficher la légende de l'élévation

// La fonction ce dessous créune légend en tant que vignette insérée à l'IU au panneau (interface utilisateur)

function makeLegend(elev) {

  var lon = ee.Image.pixelLonLat().select('longitude');

  var gradient = lon.multiply((elev.max-elev.min)/100.0).add(elev.min);

  var legendImage = gradient.visualize(elev);

  var panel = ui.Panel({

    layout: ui.Panel.Layout.flow('horizontal'),

    style: {

          position: 'bottom-right',

          padding: '5x 5px',

          color: '000000'

    },

    

    widgets: [

      ui.Label(String(elev.min)), 

      ui.Label({style: {stretch: 'horizontal'}}),

      ui.Label(String(1500)), 

      ui.Label({style: {stretch: 'horizontal'}}),

      ui.Label(String(2000)),

      ui.Label({style: {stretch: 'horizontal'}}),

      ui.Label(String(2500)), 

      ui.Label({style: {stretch: 'horizontal'}}),

      ui.Label(elev.max)

    ]

  });

  // Créer le titre de la légende //

  var legendTitle = ui.Label({

    value: 'Elevation (m)',

    style: {

      stretch: 'horizontal',

      textAlign: 'center',

      fontWeight: 'bold',

      fontSize: '14px',

    }

  });

  var thumb = ui.Thumbnail({

    image: legendImage, 

    params: {bbox:'0,10,100,8', dimensions:'356x15'}, 

    style: {padding: '0.5px'}

  });

  return ui.Panel({style:{position: 'bottom-right'}}).add(legendTitle).add(thumb).add(panel);

}

Map.add(makeLegend(elev));

////////////Ajout de la fonction de la légende FIN ici////////////