Poner iconos/imagenes en Button y Label de Google Earth Engine

Poner iconos/imagenes en Button y Label de Google Earth Engine

Play this article

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

Camptura3.PNG

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.

Icono.PNG

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í.