Visualización de datos en aplicaciones web: Aprovechando la plataforma

 

 

 

Visualización de datos en aplicaciones web: Aprovechando la plataforma

De Kristian Ekenes

La API de ArcGIS para JavaScript contiene potentes capacidades de visualización que permiten que sus datos se actualicen en la Web. Algunos de ellos incluyen el uso de color no clasificado o clasificado, tamaño, opacidad y cualquier combinación de ellos para visualizar números; símbolos únicos para datos categóricos; heatmaps, densidad de puntos y otros para mostrar ubicaciones y patrones espaciales. Lo que hace que la API sea poderosa es el código relativamente simple y condensado que se necesita para crear visualizaciones que provocan el pensamiento.

Como se indica en la Visión General, puede crear la mayoría de las visualizaciones de una de tres maneras: 

1. Utilice la opción "cambiar estilo" en ArcGIS Online
2. Cree una aplicación de estilo personalizado o de exploración de datos utilizando la API de mapeo inteligente
3. Definición manual de los renderizadores con JavaScript 

Esta publicación se centrará en cómo consumir las visualizaciones creadas en ArcGIS Online en aplicaciones web personalizadas.

Lo que hace que la API de ArcGIS para JavaScript sea única en comparación con otras API es su integración con la plataforma ArcGIS, incluyendo ArcGIS Online, Portal forArcGIS y ArcGIS Pro. Esta integración le permite cargar una capa o mapa web en cualquiera de esos productos, configurar sus propiedades (incluidas las visualizaciones basadas en datos), guardar esas configuraciones y publicarlas en un portal al que pueden acceder las aplicaciones web personalizadas. 

¡Eso significa que puede crear visualizaciones impresionantes sin tener que escribir una línea de código! Simplemente utilice el visor de mapas de ArcGIS Online o la pestaña de visualización para explorar sus datos y crear una visualización. Los siguientes recursos proporcionan consejos sobre cómo utilizar las herramientas en ArcGIS Online para crear buenas visualizaciones en unos sencillos pasos: 

Smart Map en 3 sencillos pasos
Smart Map: Color (mapa de la historia)
Cómo hacer elecciones de colores inteligentes en sus mapas
Utilice expresiones de Arcade para asignar sus ideas 

Para obtener más detalles sobre cómo visualizar datos en ArcGIS Online, consulte la documentación del flujo de trabajo de cambio de estilo.

Crear y cargar un mapa web

Revisemos brevemente el flujo de trabajo básico para crear una visualización en ArcGIS Online y cargarla en una aplicación web personalizada. Abra este conjunto de datos en la pestaña de visualización de ArcGIS Online. Haga clic en el icono "cambiar el estilo" y explore los datos creando visualizaciones basadas en el color, el tamaño o ambos. 

Después de explorar los datos, he creado este mapa web que muestra el porcentaje del ingreso familiar promedio utilizado para los pagos de automóviles en comparación con el porcentaje de ingresos de los hogares gastado en pagos de automóviles pagados a los intereses. Compruébelo aquí. 

Una vez que cree una visualización que le guste, puede guardarla en la capa de servicio ... 

... o guardar el mapa web y utilizar el procesador guardado en el elemento de capa dentro del mapa web. 

Una vez que la visualización se guarda, sólo tiene que cargar la capa o mapa web en su aplicación. Toma sólo unas pocas líneas de código en la API ArcGIS 4.x para JavaScript. Si carga un mapa web que puede contener una o más capas, simplemente haga referencia al ID de elemento del mapa web en la propiedad portalItem de una nueva instancia de WebMap. A continuación, haga referencia a la instancia de WebMap en la propiedad map de MapView ... 

// load the web map
var webmap = new WebMap({
  portalItem: { // autocasts as new PortalItem()
    id: "7e49cad78c63409aa9a483fc83ff927e"
  }
});

// Set the WebMap instance to the map property in a MapView.
var view = new MapView({
  map: webmap,
  container: "viewDiv"
});

También agregé una leyenda a la aplicación para asegurarse de que la historia es clara. Esta es la aplicación final. Observe cómo se requiere poco código para representar una visualización de datos algo compleja con múltiples variables visuales, una de las cuales utiliza una expresión de Arcade para calcular valores sobre la marcha.

Cargar una capa

Si solo necesita agregar una sola capa a una instancia de mapa ya existente, simplemente guarde la visualización en la capa de ArcGIS Online y cargue la capa con su ID de elemento de portal o su URL de servicio. Esto se hace con el método fromPortalItem () en la clase de la capa base.

Layer.fromPortalItem({
  portalItem: { // This is a layer item ID, not a web map ID
    id: "8444e275037549c1acab02d2626daaee"
  }
}).then(function(layer){
  map.add(layer);
});

Vea la muestra completa aquí.

Este método creará una instancia de capa del tipo apropiado (por ejemplo, FeatureLayer, MapImageLayer, ImageryLayer, etc.), que estará lista una vez que se haya resuelto la promesa. Si ya conoce el tipo de capa deseado, puede utilizar alternativamente la propiedad portalItem para crear una instancia de la capa utilizando el ID de elemento de portal. 

var layer = new FeatureLayer({
  portalItem: { // autocast as esri/portal/PortalItem
    id: "8444e275037549c1acab02d2626daaee"
  }
});

map.add(layer);

Cómo funciona

Al configurar una visualización y guardarla en un mapa web o una capa web, la visualización se almacena como JSON de acuerdo con la especificación del mapa Web. El ID del elemento del portal es exclusivo para JSON que representa el mapa web o elemento de capa que configuró en ArcGIS Online. El JSON se guarda en el portal y se carga en las aplicaciones web cuando se utiliza el ID para consultarlo.

Para ver esto en acción, abra la aplicación de ejemplo mencionada anteriormente y abra las herramientas de desarrollo del navegador. Abra la pestaña Tráfico de red y busque "datos". Puede que tenga que actualizar la página para ver el registro adecuado.

Haga una vista previa del primer elemento y explore las propiedades del JSON. Este es el recurso de mapa web que carga la aplicación de ArcGIS Online. Puede ver el JSON guardado para la visualización configurada, cualquier configuración emergente y otra información sobre el mapa web y sus capas.

Conclusión

La integración de JavaScript API con la plataforma de ArcGIS puede ser un gran ahorro de tiempo cuando se trata de visualizar y presentar visualizaciones basadas en datos. Toma ventaja de eso. Adóptelo. Simplifique su código. Y aprovechar el poder de la plataforma ArcGIS.