Crear ventanas emergentes en ArcGIS Online con imágenes condicionales usando expresiones de Arcade

Document created by xander_bakker on Aug 16, 2017Last modified by jesarmientoesri-co-esridist on Sep 21, 2017
Version 2Show Document
  • View in full screen mode

Las expresiones de Arcade pueden ser usados para definir la simbología de forma dinámica como se explicó en el siguiente blog:
https://community.esri.com/groups/esricol-community/blog/2017/05/15/usar-arcade-para-graficar-el-tiempo-que-una-solicitud-est%C3%A1-abierta 

 

 

 

Introducción

Con la ultima actualización de ArcGIS Online, una de las novedades es el uso de expresiones para configurar las ventanas emergentes. Al explorar las posibilidades logré generar el siguiente resultado: 

 

Con base en el porcentaje de cobertura se definen como dibujar los 5 símbolos para cada servicio. Para cada símbolo hay una expresión que evalua el valor de cobertura y define cual imagen se va usar.

 

 

¿Cuál es la información que tenemos como base?

En este caso tenemos un mapa de polígonos con los departamentos y para cada departamento tenemos la siguiente información:

  • Personas con acueducto
  • Personas sin acueducto
  • Personas con alcantarillado
  • Personas sin alcantarillado
  • Personas con gas y
  • Personas sin gas

 

 

Definir expresiones Arcade

Para empezar, es necesario contar con el porcentaje de cobertura. Esto se puede generar usando una expresión de Arcade que lo calcula:

cobertura = personas con servicio / (personas con servicio + personas sin servicio) * 100%

 

Para definir una expresión, se puede entrar a configurar la ventana emergente y en la parte inferior se encuentra la sección "Expresiones de atributos" y se hace clic en el botón agregar para crear una nueva expresión:

 

La ventana para configurar la expresión de Arcade se ve así:

 

Código

// acueducto
var val_no = $feature.P_ACUENO;
var val_si = $feature.P_ACUESI;

var total = val_no + val_si;
var porcentaje = val_si * 100 / total;

return Round(porcentaje, 2);

 

En esta imagen “$feature.P_GASNNO” y “$feature.P_GASNSI” corresponden a las campos de las personas con gas y personas sin gas. Al final se devuelve el resultado “porcentaje” y este “campo virtual” se puede visualizar en la ventana emergente.

 

 

Expresiones Arcade para los símbolos

Para los símbolos que se usan para indicar la cobertura el proceso es un poco más complicado. Cada símbolo representa un rango de 20%. Hay 5 símbolos (0-20%, 20-40%, 40-60%, 60-80% y 80-100%). Para cada rango y cada servicio es necesario definir cuál de los 3 símbolos se debe usar.

 

Esta lógica se puede realizar con la siguiente función:

Tenemos 3 diferentes símbolos en un listado “lst”. Para complementar la URL a los símbolos tenemos la variable “base_url”. La definición (límite inferior y límite superior ) se define base base en el parámetro “image_number” (ver líneas 6 y 7).

 

En la línea 10 empieza la validación:

  • Si el porcentaje de cobertura es mayor que el valor del límite superior de la clase actual (menos 5), entonces este rango (por ejemplo 0-20%) se indica con un símbolo verde
  • Cuando el porcentaje de cobertura es menor al valor del límite inferior de la clase actual (más 5), entonces este rango debe indicarse con el símbolo rojo.
  • En el resto de los casos se aplica el símbolo que tiene un degradado de verde a rojo.

 

Un ejemplo:
Una cobertura de 24%, resultará en un símbolo rojo para el rango de 20 – 40%. Una cobertura de 30% genera un símbolo con el degradado de verde a rojo en el rango de 20 – 40% y un valor de 36% resulta en un símbolo verde para ese mismo rango:

 

La función está tomando 2 parámetros; el porcentaje de cobertura (“value”) y el número del símbolo o rango que debe evaluar (“image_number”). Debajo de la función se leen los datos y llama la función:

 

En este caso se leen los campos P_GASNNO (personas sin gas) y el campo P_GASNSI (personas con gas) en las filas 22 y 23. Luego se calcula el total y el porcentaje de cobertura en la fila 25 y 26 y en la línea 30 se devuelve el resultado de la función y se suministra el número del símbolo 1 que corresponde al rango de 0 – 20%.

 

Código completo:

function GetImageOnClass(value, image_number) {
     var lst = ['persona_verde40.png ', 'persona_verde_a_rojo40.png', 'persona_rojo40.png'];
     var base_url = 'http://geoportal.esri.co/SP/imagenes/sym/';
    
     var class_from = (image_number - 1) * 20
     var class_to = (image_number) * 20
    
     var url = 'URL a imagen que represente sin información';
     if (value >= class_to - 5) {
          url = base_url + lst[0];
     } else if (value <= class_from + 5) {
          url = base_url + lst[2];
     } else {
          url = base_url + lst[1];
     }
    return url;
}

var val_no = $feature.P_ACUENO;
var val_si = $feature.P_ACUESI;

var total = val_no + val_si;
var porcentaje = val_si * 100 / total;
Console('total:' + total);
Console('porcentaje:' + porcentaje);

return GetImageOnClass(porcentaje, 1);

Es necesario generar una expresión símbolo en cada servicio. Teniendo 3 servicios y 5 símbolos por servicios, esto resulta en 15 expresiones que solamente son distintos en las líneas 22 y 23 (los campos a leer) y la línea 30 indicando el número del símbolo.

Una limitación de la versión actual de Arcade es el hecho que no se puede suministrar parámetro a la expresión de Arcade. Si fuera posible suministrar los campos y el número del símbolo, las 15 expresiones se reducirían a una sola expresión.

 

 

Configurar la ventana emergente

Teniendo las expresiones, ahora se puede empezar a configurar la ventana emergente. La ventana emergente se hará usando la opción “Una visualización de atributo personalizado”:

 

Al hacer clic en el botón “CONFIGURAR”, se abre una ventana para configurar la visualización. En esta ventana no vamos a incluir mucho texto, pero podemos hacer clic en el botón “+” para agregar un campo con información, como en el ejemplo abajo el nombre de departamento “{DEPTO}”:

 

Para insertar gráficos se puede usar el botón de insertar imágenes:

 

La URL de la imagen debe apuntar a una imagen en un servidor web. Podemos incluir las imágenes que representan cada servicio:

   

y en caso que se cuenta con otros servicios se pueden incluir también:

   

 

Estas imágenes tiene un tamaño de 64 x 64 pixeles, pero eran demasiado grande para la ventana emergente. Se puede reducir el tamaña, pero para poder hacerlo se debe entrar al modo “HTML”:

 

 

Al ver la fuente html de la ventana emergente se puede incluir el atributo “width” (ancho) especificando un tamaño de 40 pixeles para las imágenes representando los servicios:

 

Ahora se puede editar la ventana emergente para obtener el siguiente código html:

<b><font face="Verdana" size="4">{DEPTO}</font></b>

<br /><br />

<img alt="" src="http://geoportal.esri.co/SP/imagenes/sym/acueducto.png" width="40" />
   
<img alt="" src="{expression/expr4}" />
<img alt="" src="{expression/expr5}" />
<img alt="" src="{expression/expr6}" />
<img alt="" src="{expression/expr7}" />
<img alt="" src="{expression/expr8}" />
  
({expression/expr9}%)

<br /><br />

<img alt="" src="http://geoportal.esri.co/SP/imagenes/sym/alcantarillado.png" width="40" />
   
<img alt="" src="{expression/expr10}" />
<img alt="" src="{expression/expr11}" />
<img alt="" src="{expression/expr12}" />
<img alt="" src="{expression/expr13}" />
<img alt="" src="{expression/expr14}" />
  
({expression/expr15}%)

<br /><br />

<img alt="" src="http://geoportal.esri.co/SP/imagenes/sym/gas.png" width="40" />
   
<img alt="" src="{expression/expr16}" />
<img alt="" src="{expression/expr17}" />
<img alt="" src="{expression/expr18}" />
<img alt="" src="{expression/expr19}" />
<img alt="" src="{expression/expr21}" />
  
({expression/expr20}%)

 

Hay que tener mucho cuidado al poner espacios para alinear la información. En el caso arriba se está usando el “ ” para cada espacio. Sin embargo, cuando se vuelve a abrir la configuración de la ventana emergente en modo html, estos espacios no aparecen como “ ” en el código, pero como espacios normales.

 

El resultado es una ventana emergente donde los símbolos de cobertura se ajusten al valor de cobertura calculado. También cuando se cambien los valores por debajo la ventana se ajuste a estos cambios, porque es un contenido dinámico. 

 

Recursos

3 people found this helpful

Attachments

    Outcomes