Visualizar el esquema de barrido y el próximo barrido en una ventana emergente con Arcade
En la plenaria de la XIX Conferencia Colombiana de Usuarios Esri, Omar mostró unos ejemplos de lo que se puede lograr usando Arcade para la simbología y para las ventanas emergentes. Una descripción detallada se puede encontrar acá: Crear ventanas emergentes en ArcGIS Online con imágenes condicionales usando expresiones de Arcade
- Introducción
- Datos de entrada
- Explicación objetivo de la ventana emergente
- Proceso y configuración de la ventana emergente
- Proceso y configuración de la simbología con Arcade
- Resultado
Introducción
En este documento se presenta un ejemplo en el que vamos a explicar con más detalles, la combinación de la simbología basada en ArcGIS Arcade | ArcGIS for Developers con la ventana emergente.
En este caso los colores de los elementos en el mapa indican cuales calles están incluidos en el barrido del día (en verde: hoy, naranja: otro día) y al mismo tiempo la ventana emergente indica el esquema y muestra el siguiente día de barrido con el fin de generar una visualización atractiva para los usuarios finales.
Datos de entrada
Abajo los códigos de la capa que se va usar como base:
L= lunes, M=martes, W=miércoles, J=jueves, V=viernes, S=sábado y LaS representa los días lunes a sábado.
Explicación objetivo de la ventana emergente
Ver un ejemplo abajo. En este caso se hizo una consulta al mapa un día jueves, y en este día no hay barrido (lo que en la ventana emergente se ve representado por el gráfico “Jue” en color gris 
), en la ventana también se muestra los días en los que si se hace barrido en este caso lunes, miércoles y viernes, la ventana muestra que para el día de la consulta el barrido mas próximo es el viernes:
Proceso y configuración de la ventana emergente
Para realizar esta ventana emergente tenemos que crear los gráficos o iconos para cada día con barrido:
… y sin barrido:
El HTML para generar la ventana emergente es (se quitó el día domingo en la ventana de la aplicación):
<b>Zona: {ZONA}</b>
<br />
<br />
<b>Días de barrido:</b>
<br />
<img alt="L" src="{expression/expr0}" width="32" />
<img alt="M" src="{expression/expr1}" width="32" />
<img alt="W" src="{expression/expr2}" width="32" />
<img alt="J" src="{expression/expr3}" width="32" />
<img alt="V" src="{expression/expr4}" width="32" />
<img alt="S" src="{expression/expr5}" width="32" />
<img alt="D" src="{expression/expr6}" width="32" />
<br />
<br />
<b>Próximo día de barrido:</b>
<br />
<img alt="ND" src="{expression/expr7}" width="40" />
En este caso contamos con 8 expresiones de Arcade, una para cada día de la semana y la última para mostrar el siguiente día que harán el barrido.
Las expresiones de cada día son muy similares:
function GetImageOnDayAndSchedule(lst_schedule, day_number) {
var lst_days = ['lun', 'mar', 'mie', 'jue', 'vie', 'sab', 'dom'];
var base_url = 'http://geoportal.esri.co/SP/imagenes/sym/';
var url = 'Not Set';
var test = IndexOf(lst_schedule, day_number);
if (test != -1) {
url = base_url + lst_days[day_number] + '40.png';
} else {
url = base_url + lst_days[day_number] + '40no.png';
}
return url;
}
var dct_schedule = {'L-J': [0, 3], 'M-V': [1, 4], 'W-S': [2, 5], 'LWV': [0, 2, 4], 'MJS': [1, 3, 5], 'LaS': [0, 1, 2, 3, 4, 5]};
var lst_schedule = dct_schedule[$feature.FRECUENCIA];
var resultado = GetImageOnDayAndSchedule(lst_schedule, 0);
return resultado;
El único aspecto que cambia es el valor “0” (ver linea 17) que se define según el día de la imagen (0 = lunes y 6=domingo).
Para generar el icono del día del próximo barrido, se está usando el siguiente script:
function GetLastItem(lst_dias) {
var i = 0;
var a = "not set";
for (a in lst_dias) {
i += 1;
}
return lst_dias[a];
}
function GetNextDay(lst, dia_actual) {
var next_day = -1;
var min_dif = 99;
var i = -1;
var d = -1;
var a = -1;
var dif = 99;
for (a in lst) {
d = lst[a];
if (d > dia_actual) {
dif = d - dia_actual;
if (dif < min_dif) {
min_dif = dif;
next_day = d;
}
}
}
return next_day;
}
var lst_days = ["lun", "mar", "mie", "jue", "vie", "sab", "dom"];
var base_url = "http://geoportal.esri.co/SP/imagenes/sym/";
var dct_schedule = {"L-J": [0, 3], "M-V": [1, 4], "W-S": [2, 5], "LWV": [0, 2, 4], "MJS": [1, 3, 5], "LaS": [0, 1, 2, 3, 4, 5]};
var lst_schedule = dct_schedule[$feature.FRECUENCIA];
var dia_actual = Weekday(Now());
dia_actual -= 1; // correct for list -1
if (dia_actual == -1) {
dia_actual = 6;
}
var test = IndexOf(lst_schedule, dia_actual);
var url = "Not Set";
if (test != -1) {
// es hoy
url = base_url + lst_days[dia_actual] + "40.png";
} else {
// buscar proximo dia
var min_list = lst_schedule[0];
var max_list = GetLastItem(lst_schedule);
if (dia_actual < min_list) {
url = base_url + lst_days[min_list] + "40.png";
} else if (dia_actual > max_list) {
url = base_url + lst_days[min_list] + "40.png";
} else {
var next_day = GetNextDay(lst_schedule, dia_actual);
url = base_url + lst_days[next_day] + "40.png";
}
}
return url;
Proceso y configuración de la simbología con Arcade
Para la simbología del mapa se definió una expresión de Arcade que muestra las calles de barrido para el día de la consulta en verde y los de otros días en naranja:
var dct_schedule = {'L-J': [0, 3], 'M-V': [1, 4], 'W-S': [2, 5], 'LWV': [0, 2, 4], 'MJS': [1, 3, 5], 'LaS': [0, 1, 2, 3, 4, 5]};
var lst_schedule = dct_schedule[$feature.FRECUENCIA];
var resultado = 'Otro día';
var dia_actual = Weekday(Now()) -1;
var test = IndexOf(lst_schedule, dia_actual);
if (test != -1) {
resultado = 'Barrido hoy';
} else {
resultado = 'Barrido otro día';
}
return resultado;
Resultado
El resultado está disponible en la siguiente URL:
http://utility-esri-co.maps.arcgis.com/apps/View/index.html?appid=b3230688425541c7adf25159d91a55dc
