Visualizaciones de datos de alto rendimiento con Google Maps Platform y deck.gl

En mayo, el líder de ingeniería de Maps, Travis McPhail, anunció el soporte inicial de la API de JavaScript de Maps para deck.gl durante su charla en Google I/O sobre cómo desarrollar el rendimiento y la escala con Google Maps Platform.

Desde entonces, hemos hablado con desarrolladores de todo el mundo sobre las posibilidades de deck.gl y lo que puede aportar a los mapas en la web, y  esas posibilidades son infinitas

¿Todavía no has oído hablar de deck.gl? Sigue leyendo y te sorprenderás:

¿Qué es deck.gl?

deck.gl es un marco de código abierto que trae una variedad de visualizaciones de datos de alto rendimiento a la web. Aquí hay un resumen rápido de los documentos de deck.gl sobre lo que le proporciona el marco:

• Manejo de grandes conjuntos de datos y actualizaciones de rendimiento.

• Manejo interactivo de eventos, como el picking.

• Proyecciones cartográficas e integración con el mapa subyacente.

• Un catálogo de capas probadas y probadas.

• Fácil de crear nuevas capas o personalizar capas existentes

¿Por qué deck.gl?

Uno de los desafíos a los que se enfrentan muchos desarrolladores web cuando visualizan datos es cómo representar de manera eficiente conjuntos de datos extremadamente grandes. Los desarrolladores a menudo nos dicen que no están tratando de representar cientos de puntos de datos, sino decenas o cientos de miles, o incluso millones.

Debido a su modelo de bucle de eventos de subproceso único, JavaScript generalmente no es adecuado para el tipo de cálculo pesado requerido para manejar grandes cantidades de datos y renderizar gráficos 3D. Para superar esto, deck.gl utiliza la biblioteca WebGL, que proporciona acceso a la GPU en la computadora del usuario de forma asincrónica. En resumen, esto significa que todo el trabajo pesado se traslada del navegador al hardware que es más adecuado para este tipo de tarea. ¿El resultado? Un conjunto de visualizaciones de aspecto increíble que pueden manejar millones de puntos de datos rápidamente.

¿Cómo funciona deck.gl?

deck.gl aprovecha el OverlayView proporcionado por la API de JavaScript de Maps para representar sus visualizaciones como capas en la parte superior del mapa. Esto permite la sincronización automática de las capas de visualización de deck.gl con el mapa base subyacente incluso cuando el usuario se desplaza y hace zoom, brindando a sus usuarios la misma experiencia de mapa completamente interactiva con la que están familiarizados.

El enfoque basado en capas de deck.gl también le permite agregar múltiples visualizaciones en la parte superior del mapa para crear efectos compuestos.

 Aquí hay un ejemplo de eso en acción, donde se representan dos conjuntos de datos separados como Scatterplot Layers (toma puntos coordinados de latitud y longitud emparejados y los representa como círculos con un cierto radio) para crear una sola imagen:

Ejemplo de Scatterplot layers compuestas

deck.gl también utiliza un modelo de programación reactiva, que permite la actualización rápida de visualizaciones basadas en cambios en las propiedades y datos de la capa. ¿Qué significa eso? Bueno, muchas cosas, ¡pero también datos animados! Aquí hay un ejemplo de indicaciones devueltas por el servicio de indicaciones de la API de JavaScript de Maps:

¿Cómo empiezo?

Para obtener una muestra de lo que la API de JavaScript de Maps puede hacer con deck.gl, aquí tienes una  aplicación de ejemplo, así como la documentación de deck.gl para familiarizarte con el marco.

También puede encontrar la fuente de la aplicación de ejemplo y ejemplos independientes separados para capas individuales ensu GitHub. El equipo de deck.gl también ha escrito un gran artículo sobre las expectativas generales de rendimiento y las técnicas de optimización aquí.


Y estad atentos! A continuación, en esta serie, nos van a ofrecer tutoriales fáciles de seguir que puedes usar para crear tus primeras integraciones desde la Plataforma Google Maps con deck.gl.

Para obtener más información sobre Google Maps Platform, visita nuestra página web.

Agradecimientos: Alex Muramoto, defensor del desarrollador Geo de Google, contribuyó a esta publicación.

PUBLICADO EN: PLATAFORMA DE GOOGLE MAPS

Texto original adaptado por ExtraMile Cloud, publicado en https://cloud.google.com/blog/products/maps-platform