Poner iconos/imagenes en Button y Label de Google Earth Engine
En esta entrada se muestra como como poner imagenes/iconos a los Button y Label usando el argumento imageUrl.
Los iconos que vamos a usar se encuentran en esta liga: https://fonts.google.com/icons?icon.platform=web&icon.style=Outlined&icon.set=Material+Icons
Los pasos a seguir son: 1. Si vamos a poner imagenes en diferentes partes de nuestra App de GEE, nos conviene crear una función en donde nadadas se pida el nombre del icono. Esto es:
//Icons
var IconName= function(Name){
return 'https://fonts.gstatic.com/s/i/materialiconsoutlined/'+Name+'/v11/24px.svg'
}
El nombre (Name) lo encontramos al dar clic en cualquier icono. Aparece una sección en la parte derecha donde aparece aparecen cuatro pestañas, seleccionamos la pestaña web y aparece unas líneas de código donde solo debemos tomar, la parte que esta marcado de amarillo en la siguiente imagen.
2. Ahora, lo que resta es poner Button o Label en nuestra App y mandar a llamar la funcion indicando el nombre del icono en el argumento imageUrl.
//Creamos un Label
var ImgLabel = ui.Label({
value: 'Ayuda',
imageUrl: IconName('help_outline'),
})
//Creamos un botón
var ImgButton = ui.Button({
label: 'Cerrar',
imageUrl: IconName('close'),
onClick: function(){Map.add(Box.INDICE_PANEL)}
});
//Creamos un Label
var ImgMLabel = ui.Label({
value: 'Minimizar',
imageUrl: IconName('minimize'),
})
Map.add(ImgLabel)
Map.add(ImgMLabel)
Map.add(ImgButton)
El script de ejemplo se puede consultar aquí.