Tutoriel 6.2
Ce tutoriel explique les extraits de script à développer pour la première application Web
2. Structure du script
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////////////