Uso de la herramienta Time Slider en un visor construido con la API JavaScript de Esri

En una entrada anterior del blog[1] de TYC GIS se mostró la funcionalidad de la herramienta Time Slider disponible en ArcMap y de las posibilidades de visualización que un campo con formato temporal puede aportar a nuestro proyecto.

Si pegamos un salto más y decidimos que queremos mostrar ese tipo de datos temporales en un visor cartográfico, la API de JavaScript de Esri nos ofrece esa posibilidad ya que han integrado esa capacidad en su código. Esto nos permitiría, con ayuda de un servidor, mostrar dichos datos al público en general.

La API está evolucionando, Esri ha convertido la nueva versión 4.x en un despliegue de código para desarrollar Web Maps en 3D, pero aún queda mucho por actualizar respecto a la anterior versión (que ya anda por la 3.20) y una de las cosas aún pendientes es la implantación del Time Slider, así que trabajaremos con la 3.20 totalmente mantenida por Esri.

A continuación, vamos a ir paso a paso desgranando las partes fundamentales del código para llevar a cabo la implantación de un Time Slider en un visor.

Si nos dirigimos a la entrada que comentamos al principio ya sabemos cómo incluir un Time Slider en ArcMap. Para mostrar los datos al público en un visor, deben servirse en un servidor, Esri posee mucho de estos datos servidos[2] de manera que podemos hacer uso de ellos en nuestros visores:

En este ejemplo vamos a utilizar datos de terremotos[3] que han tenido lugar entre los años 1970 y 2009:

Siendo esta la simbología:

Si nos dirigimos a la página web de la API de Esri, podemos descargar un ejemplo de código para trabajar directamente sobre él. A continuación explicaremos las partes más importantes para poder comprenderlo y adaptarlo a nuestras necesidades.

Así, si trabajamos con el código, la parte fundamental es donde incluiremos el enlace de nuestro servicio de datos[4], tenemos que tener en cuenta que un servicio puede incluir varias capas, en este caso solo hay una (0), la vamos a incluir así para que veáis cómo se referencia:

Y otra parte importante es fijarnos en la extensión del tiempo que ofrecen dichos datos para incluirla correctamente y que se muestre en la extensión del Time Slider:

A continuación veremos diferentes partes de la clase TimeSlider que nos ayudan a manipular sus características:

timeSlider.setThumbCount(thumbCount): El número de marcadores a mostrar. Un valor de uno muestra uno solo. Al ajustar el valor en 2 se muestra un control deslizante de rango:

timeSlider. createTimeStopsByTimeInterval(timeExtent, timeInterval?, timeIntervalUnits?): Crea un intervalo de tiempo para cada intervalo especificado, es decir: semana, mes, día. Así:

<TimeExtent> timeExtent: es requerido. El intervalo de tiempo utilizado para definir el tiempo de inicio y finalización del deslizador de tiempo se detiene.
<Number> timeInterval: es opcional. La longitud del intervalo de tiempo. En este caso 2 se refiere a dos años.
<String> timeIntervalUnits: es opcional. Los valores válidos se enumeran en la tabla de constantes TimeInfo, en este ejemplo indicamos años.

timeSlider.setThumbIndexes: Es un array de dos enteros, el primer valor determina dónde colocar el primer marcador. Si es un deslizador de dos marcadores, el segundo valor determina dónde colocar el marcador adicional.

timeSlider.setThumbMovingRate: Marca la velocidad a la que se reproduce la animación de tiempo. El valor por defecto es 1500, lo ponemos un poco más rápido a 2000.

Y de una manera muy sencilla obtendríamos un visor cuyos datos se visualizarían según el tiempo gracias a la herramienta Time Slider:

Para verlo con más facilidad puede acceder a este vídeo:

En TYC GIS puedes aprender con expertos en la API de JavaScript de Esri en diferentes cursos y especializaciones como: el Curso de Especialista en Desarrollo de Sistemas de Información Geográfica (SIG) de ESRI[5], el Curso de Especialista en Creación de Aplicaciones API de JavaScript y ArcGIS Server[6], o ya los cursos de las versiones por separado Curso de Creación de Aplicaciones API de JavaScript y ArcGIS Server versión 3.x[7] y el Curso de Creación de Aplicaciones de Mapas Web con la API de JavaScript versión 4.X y ArcGIS Server[8].