Realizar Análisis en la Ventana Emergente con Arcade

XanderBakker

Proporcionar más información

Aunque es posible de crear visualización en la ventana emergente y proporcionar información más clara al usuario, a veces no es suficiente solamente proporcionar la información que tiene el feature mismo. En el ejemplo abajo se muestren los cantones de Ecuador (Guayaquil está seleccionado) y por debajo las clases de susceptibilidad de incendios forestales. La ventana emergente solamente ofrece información de población y tamaño, pero si queremos conocer que porcentaje del cantón está tiene un riesgo muy alto tendríamos que estimarlo basado en lo que vemos:

Analisis - ventana sencilla.png

Con Arcade es posible realizar un análisis con otras capas y generar una visualización atractiva optimizando el entendimiento para el usuario. En el ejemplo abajo se generó una rampa con los mismos colores de las clases de riesgo al incendio forestal y aplicando un tamaño a cada clase que represente su porcentaje en el total:

Analisis - ventana OK.png

Cuando se hace clic en un polígono de un cantón, se toma esta geometría para realizar una consulta a la capa de riesgos de incendios forestales para obtener los polígonos de riesgos que están parcial o completamente contenidos en el polígono del cantón.

Luego, para cada polígono de riesgo se cruce con el polígono del cantón para quedarse solamente con la parte del polígono de riesgo que está dentro del cantón. Con la información del feature se obtiene la clasificación de la susceptibilidad y la geometría del cruce nos dice el tamaño de la superficie:

Analisis - feature to geometry.png

Es importante entender que las funciones “Intersects” y “Intersection” son diferentes. “Intersects” devuelve en este caso un featureset (selección de la capa de riesgos) y la función “Intersection” devuelve una geometría. Estas 2 operaciones son “costosos”, es decir, pueden consumir un tiempo considerable en caso de que la geometría es compleja o las capas tienen muchas entidades.

Para agregar HTML a la ventana emergente, no se debe elegir la opción “Expresiones de atributos”, pero hacer clic en “Agregar contenido” y luego elegir “</> Arcade”:

Arcade - Agregar contenido.png

En el editor de Arcade se puede ver un ejemplo del formato que la expresión debe entregar:

Arcade - ventana emergente 02.png

Es un diccionario, que indique que el tipo de información que genere es un texto y el texto es el HTML que la expresión debe generar.

El HTML no es muy complejo y utilice un número de tags limitado.

Tablas para alinear la información y presentar la rampa de colores (<table>, <tbody>, <tr> y <td>)
Imágenes (<img>)
Encabezado (<h3>)

En las tables el uso de estilo CSS si es frecuente para obtener la visualización deseada. Al final de este documento pueden encontrar el código completo de Arcade usado para este ejemplo.

Una explicación de la expresión Arcade:

Línea 1: acceder a la capa de riesgos desde el mapa
Línea 2: seleccionar los polígonos de riesgos que tiene traslapo con el cantón
Línea 3: contar los polígonos de riesgos encontrados
Línea 5 a 20: bucle por los polígonos de riesgo para determinar clase de riesgo y superficie y almacenar el resultado en un diccionario.
Línea 22 a 28: calcular la superficie total
Línea 30 a 34: determinar la superficie sin información de clase de riesgo
Línea 36 a 43: diccionario de colores que coinciden con los colores usados en el mapa
Línea 45 a 53: crear la table con el título y la imagen para incendios
Línea 55 a 81: crear la tabla con los colores de riesgo y definir el ancho de cada celda según el análisis de clase de riesgo
Línea 83 a 86: devolver el resultado (el html)

El código Arcade

var fs_incendios = FeatureSetByName($map, "Susceptibilidad Incendios Forestales", ["Ind_Suscep"], true);
var fs = Intersects(fs_incendios, $feature);
var cnt = Count(fs);

var dct = {};
if (cnt > 0) {
  for (var f in fs) {
    var fi = Intersection(f, $feature);
    var clase = f["Ind_Suscep"];
    var size = AreaGeodetic(fi, "square-kilometers");
    if (HasKey(dct, clase)) {
      dct[clase] += size;
    } else {
      dct[clase] = size;
    }
  }
  Console(dct);
} else {
  Console("sin incendios");
}

// area total
var areatot = AreaGeodetic($feature, "square-kilometers");
var areasum = 0;
for (clase in dct) {
  size = dct[clase];
  areasum += size;
}

var unk = areatot - areasum;
dct["Desconocido"] = unk;
Console($feature.NAME)
Console(areatot);
Console(unk);

// crear HTML
var dct_colores = {"Muy alta": "rgb(255, 127, 127)", 
                   "Alta": "rgb(255, 212, 127)", 
                   "Media": "rgb(255, 233, 191)", 
                   "Baja": "rgb(255, 245, 222)", 
                   "Muy baja": "rgb(203, 242, 127)", 
                   "Desconocido": "rgb(192, 192, 192)"};
var html = "";

// Riesgo natural y condiciones tuberia
html += "<table style='width: 100%;border: 0px solid black;border-collapse: collapse;font-family: Segoe UI, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11pt;'>";
html += "<tbody>";
html += "    <tr valign='valign' style='background-color: rgb(255, 255, 255);'>"
html += "      <td style='border: 0px solid rgb(255, 255, 255);background-color:rgb(255, 255, 255);text-align:left;height:60px;width:60px'><img src='https://utility-esri-co.maps.arcgis.com/sharing/rest/content/items/c2bab6080acb4f76a8e1e7aee73f9ca1/data' width='50' height='50'></td>";
html += "      <td style='border: 0px solid rgb(255, 255, 255);padding-right: 5px;color:rgb(0, 0, 0);background-color:rgb(255, 255, 255);text-align:left;height:60px;width:250px'><h3>Riesgo de incendios</h3></td>";
html += "    </tr>";
html += "  </tbody>";
html += "</table>";

if (cnt > 0) {
  html += "<table style='width: 100%;border: 0px solid black;border-collapse: collapse;font-family: Segoe UI, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 7pt;'>"
  html += "  <tbody>"
  html += "    <tr valign='valign' style='background-color: rgb(255, 255, 255);'>"

  var arr = ["Muy alta", "Alta", "Media", "Baja", "Muy baja", "Desconocido"];
  for (var i in arr) {
    clase = arr[i];
    if (HasKey(dct, clase)) {
      size = dct[clase];
      var porcentaje = Round(size / areatot * 100.0, 0)
      if (porcentaje> 0) {
        var bgcol = dct_colores[clase];
        var txtclase = ""
        if (porcentaje>10) {
          txtclase = clase
        }
        html += "      <td title='" + porcentaje + "% pasa por un riesgo de incendio " + clase + "' style='padding: 2px;padding-bottom: 5px;border: 1px solid rgb(0, 0, 0);padding-right: 1px;color:rgb(0, 0, 0);background-color:" + bgcol + ";text-align:center;height:20px;width:" + porcentaje + "%'>" + txtclase + "</td>";
      }
    }
  }
  html += "    </tr>";
  html += "  </tbody>";
  html += "</table>";
} else {
  html += "<br/><i>Sin riesgo de incendios...</i>";
}

return { 
  type : 'text', 
  text : html
}