Más Allá de los Mapas: Creando Experiencias Geoespaciales Inmersivas con React y deck.gl

Hola a todos, bienvenidos a otra edición del React Summit. Es un placer para mí hablar aquí hoy con ustedes. Vamos a hacer un poco de mapeo con React. Así que mi charla se llama Más Allá de los Mapas, Creando Experiencias Geoespaciales Inmersivas con React y DEC GL. Y de qué se trata todo esto, lo veremos en los próximos minutos.

Así que, un par de cosas sobre mí. Mi nombre es Marko. Actualmente trabajo como ingeniero de financiamiento en Fused. Mi experiencia es en construir soluciones geoespaciales para la web durante más de 10 años. Y esto es exactamente lo que estoy haciendo en Fused. Así que, ya saben, los dominios son diferentes, somos diferentes. Redes inteligentes, movilidad urbana, y en los últimos años simplemente construyendo herramientas de análisis de datos geoespaciales de propósito general para la web. Anteriormente trabajé en Foursquare. Fui un orador técnico en Mozilla. Pueden contactarme en Twitter o XNOW, LinkedIn, GitHub. Hay un código QR si quieren ponerse en contacto conmigo también en LinkedIn. Sería un placer para mí compartir algunos puntos en común y compartir experiencias y cualquier comentario sobre la charla en general. Así que sí, empecemos.

¿Qué es DEC GL? Así que es muy ambiguo decir que vamos a hablar sobre mapas y React sin dar un poco de introducción al marco que realmente vamos a usar hoy. Así que DEC GL es un marco de visualización geoespacial de código abierto. Es desarrollado por el equipo de visualización de datos en Uber, y tienen un conjunto completo de herramientas para la visualización geoespacial. Algunas de ellas son un poco más familiares que otras, pero diría que DEC GL es el mejor. Así que permite capas WebGL aceleradas por GPU. Esto es un poco complicado, ¿verdad? Pero básicamente, aprovecha el poder de la GPU para renderizar muchos datos en sus mapas. Así que eso puede ser puntos, polígonos, geometrías 3D, mosaicos, diferentes tipos de vectores en general. Y es muy declarativo, así que puedes usarlo fácilmente con cualquier tipo de marco. Hoy vamos a hablar sobre cómo podemos usarlo con React. Diría que este es el caso de uso más común hoy en día, excepto por algunos ejemplos simples donde la gente simplemente usa JavaScript puro para visualizar un par de cosas. Así que tiene su propio componente de React, y vamos a ver cómo trabajar con eso. Así que el beneficio de DEC GL es que tiene un catálogo de capas extensible incorporado.

Así que lo que eso realmente significa es que puedes visualizar casi cualquier tipo de datos geoespaciales de diferentes maneras. Así que vamos a ver un par de demostraciones de diferentes capas, pero algunas de ellas son capas de dispersión para nubes de puntos, capas de hexágono para agregación, capas de viaje para animar algunos caminos, lo cual es muy interesante de ver en la visualización de la gestión de flotas urbanas o algo así. Así que el beneficio es que maneja grandes datos con facilidad. Así que es una combinación de JavaScript o TypeScript y WebGL.

Así que utiliza el poder de tu GPU y te permite renderizar millones de puntos en tu navegador. Así que, ¿cómo funciona eso realmente? Así que tienes tu aplicación React, y quieres usar algún mapa base. No es necesario, pero es muy útil si quieres colocar tus datos en una cierta región.

Puede ser algo más. Y luego la parte de DEC GL, donde tienes tus superposiciones visuales, tus capas de DEC GL. Y la vinculación de datos se realiza en LumaGL, que es un envoltorio para algunas funcionalidades de WebGL. No vamos a entrar en esa parte hoy.

Así que nos vamos a enfocar en tu aplicación React, React Map GL y DEC GL. Esto es un poco más profundo de cómo debería funcionar. Así que tus datos, cuando digo datos, no me refiero solo a los datos que quieres visualizar, sino también a algunas variables de estado que quieres pasar a tus capas. Sabes, opacidad, visibilidad, cosas así.

Y luego DEC GL maneja el resto con su administrador de capas y sincroniza el viewport con React Map GL, donde controla el viewport del mapa, el mapa base y el estado del mapa. LumaGL está debajo de DEC GL, y maneja la parte de renderizado de WebGL. Así que así es como se ve, una integración de mapa base con DEC GL. Tienes tal vez dos capas. Una es una capa de arco, la otra es una capa de dispersión. Y tienes tu mapa base, digamos que usas Mapbox, y quieres mostrar las calles, pero tal vez quieras mostrar los edificios, especialmente sus alturas.

Podría ser interesante visualizar eso. Y quieres combinar todos esos datos en una sola visualización. Así que lo que quieres hacer allí es ver los datos representados correctamente, ¿verdad? Quieres ver tu capa de dispersión todo el camino hacia abajo, para que no se superponga a los nombres de las calles. Quieres que tu capa de arco no atraviese los edificios, y que rompa un poco la UI, y rompa el modo de vista 3D que tienes. Así que esto es un poco lo que quieres usar, y cómo debería verse en realidad. Así que este es un ejemplo rápido de eso. Básicamente una capa de dispersión básica, una capa de arco, y Mapbox.

Así que como puedes ver, las capas de arco no están atravesando los edificios ni desordenando la vista, y la capa de dispersión está por debajo de las etiquetas de las calles. Así que puedes ver realmente todo lo que quieres en esta simple visualización.

Así que, ya sabes, Linus dice, hablar es fácil, muéstrame el código. Así que esta es una configuración básica de tu mapa de react con dev.gl. No tenemos mucho tiempo, no vamos a profundizar en la creación de capas personalizadas o algo así, pero tocaremos ese tema. Creo que esta masterclass está principalmente destinada a darte un buen comienzo, y decirte qué es posible, y mostrarte un par de pautas que pueden ayudarte a comenzar a construir soluciones de mapas web basadas en mapas impresionantes.

Así que aquí solo vamos a usar dos paquetes, vamos a usar dev.gl, o vamos a usar react-map-gl. Como mencionamos en las diapositivas anteriores, estos dos trabajan juntos, especialmente si quieres usar algo como React con ello. Aquí en la demostración estamos usando Mapbox, no necesariamente necesitas usar Mapbox para mapas base. Puedes usar Google Maps, puedes usar algo más, eso depende de tu caso de uso, política de la empresa o lo que sea.

Mapbox es el más famoso en este contexto, así que vamos a usar Mapbox aquí. Entonces, ¿qué queremos hacer? Queremos crear un mapa simple, y queremos dibujar algunos edificios en él. Los llamo edificios, puedes llamarlos rectángulos, en realidad no importa. Pero queremos mostrar esos edificios en nuestro mapa, así que primero queremos darle a nuestro mapa un estado de vista que es lo que vas a estar mirando cuando inicialices tu aplicación. Así que eso es información básica como longitud, latitud, zoom, inclinación o rumbo.

La inclinación o rumbo podría ser interesante si quieres visualizar el mapa en 3D. No estamos haciendo eso ahora mismo, pero es importante saber que también puedes establecer eso. Así que queremos establecer una nueva capa, y vamos a usar algo llamado una capa GeoJSON. Todos ustedes usan formatos JSON. Si no has encontrado GeoJSON, es básicamente un archivo JSON con algunas reglas especiales sobre cómo formas un objeto de geometría. Así que en GeoJSON, puedes mostrar, puedes definir puntos, líneas, polígonos. Así que te vamos a mostrar cómo dibujar tres polígonos que deberían representar algunos edificios en nuestro caso.

Y vamos a pasar algunas propiedades para esos edificios. Vamos a entrar en cuáles son esas propiedades, y vamos a inicializar nuestro mapa. Así que vamos a usar un elemento de dev.jl, le vamos a pasar el estado de vista, y vamos a pasar nuestras capas. Solo tenemos una capa, así que esa es la que está ahí. Y para el mapa, solo tenemos que definir el estilo del mapa, así que puede ser un Street View Satellite View, Dark, Light mode. Mapbox tiene muchos estilos predefinidos que puedes usar. Y sí, voy a pasar tu token. Solo necesitas crear tu cuenta en Mapbox para esta instancia específica, y vas a poder usar eso. Y vas a obtener un mapa que tiene tres edificios, ¿verdad?

Entonces, ¿qué vamos a hacer con eso? No mucho, ¿verdad? Así que queremos demostrar cómo puedes gestionar fácilmente el estado de la capa. Así que vamos a usar Jyoti para gestionar el estado. Puedes usar algo más, puedes usar Zustand, puedes usar Redux. Creo que Jyoti está muy bien alineado con dev.jl, porque los cambios atómicos son muy adecuados para cambiar propiedades individuales en la capa. Y así es como se hace normalmente. Así que vamos a crear un átomo de estado de capa. Vamos a añadir visibilidad y opacidad a él.

Y luego vamos a usar esas propiedades para básicamente crear el átomo y usar esos valores. Y mientras usas esos valores a través del átomo, también te permite establecer el valor del átomo a través de una interfaz de usuario diferente. Ese componente puede definirse en otro lugar, por supuesto, mientras usas el valor creado. Puedes simplemente establecer la visibilidad o la opacidad en una parte completamente diferente de la aplicación. Así que aquí, estamos usando eso para establecer la visibilidad y la opacidad, crear una pequeña casilla de verificación para alternar la visibilidad, un pequeño control deslizante para crear la opacidad.

Hemos añadido algunas propiedades en nuestro GeoJSON, que es algo así como el nombre del edificio. Lo llamo edificio uno, edificio dos, edificio tres. Puedes añadir muchas más propiedades. Solo depende de tu caso de uso. Puede que quieras mostrar un tooltip cuando un usuario pase el cursor sobre él. De hecho, puede que quieras hacer algo cuando un usuario selecciona el objeto. En este momento, en el ejemplo de interactividad, nos vamos a enfocar en la parte de hover.

Así que similar, como en el ejemplo anterior, vamos a crear un átomo y vamos a añadir una característica de hover allí. La característica de hover es en realidad el objeto que vamos a usar para mostrar como un tooltip. En nuestras propiedades de capa, vamos a añadir un controlador onHover para actualizar la característica de hover. Esto es algo que proviene de DevGL. Pasas ese onHover a tu capa GeoJSON y como un callback, obtienes información sobre el objeto que estás seleccionando. Puedes obtener su latitud, longitud, puedes obtener las propiedades del GeoJSON, o algunas otras cosas, dependiendo de lo que realmente necesites.

Cuando establecemos ese valor de hover, podemos usar ese valor de hover en nuestro componente que llamamos tooltip y simplemente mostrar la información. Todo esto es muy básico, como mencioné, pero vamos a entrar en algunos ejemplos más avanzados. Aquí ves una aplicación de relámpagos en el norte de Europa, construida por Gizpo de Finlandia. Es una aplicación muy genial, la descubrí recientemente, me encantó cómo lo hicieron. Esto está construido en DevGL y como puedes ver, tiene algunos puntos en común con lo que construimos en el ejemplo anterior. Tenemos nuestro mapa y tenemos algunos controles.

Tenemos nuestro mapa y tenemos algunos controles. Esos controles están gestionando el estado que se pasa a la capa DevGL que se renderiza en nuestro mapa. También tenemos algo adicional aquí, que es la parte de animación. La animación está funcionando como un filtro. Puedes seleccionar el rango de tiempo, y cuando reproduces, el rango de tiempo se aplica como un filtro a tus datos en tiempo real y funciona perfectamente. Esto no es un video de esto. Esta es una aplicación que realmente se ejecuta y funciona. Es importante notar que después de la charla, compartiré las diapositivas en mis redes sociales y todos estos ejemplos estarán vinculados en la esquina superior izquierda para que tú puedas revisarlos.

Puedes ver que estás configurando la velocidad de animación, estás configurando el multiplicador del tamaño de los puntos en caso de que quieras resaltar la visualización que está ocurriendo aquí. En la parte superior izquierda, puedes ver que la información que proviene del control deslizante también se actualiza allí. Así que hablemos un poco más sobre las capas. Vimos cómo estábamos usando una capa GeoJSON, pero hay muchas otras capas en DevGL, y una de ellas es una capa H3, que es un sistema de indexación geoespacial jerárquico. Así que divide la superficie de la Tierra en celdas hexagonales a múltiples resoluciones, por lo que proporciona una cuadrícula para análisis espacial. Es muy eficiente para el almacenamiento de datos, búsqueda de proximidad rápida, agregación de resultados, y optimización.

Aquí hay una aplicación que te dice el número de pedidos, qué pedido no es importante, pero te da una retroalimentación visual muy agradable sobre lo que está sucediendo y qué partes de la ciudad en tal vez ciertos momentos del día están recibiendo más pedidos. Eso es muy importante por diferentes razones, dependiendo de tu caso de uso y la aplicación que estás construyendo. Los mapas de calor, todos ustedes creo que saben sobre los mapas de calor. Los han visto en muchas, muchas formas diferentes. Esta también es una de las capas que viene lista para usar con DevGL. No voy a profundizar en cómo se puede aprovechar esto, pero es importante notar que es una herramienta muy útil y una capa muy común para usar con DevGL.

Isochronas, también muy populares, especialmente cuando quieres averiguar algún tipo de una visualización de origen-destino. Así que representan áreas accesibles desde un punto dentro de un tiempo o distancia dada. Se utilizan mucho en áreas como averiguar zonas alcanzables para diferentes tipos de modos de transporte. Y te proporciona esa accesibilidad basada en el tiempo y te permite personalizar parámetros. Así que todo eso lo puedes usar para visualizar en DevGL. Esta es una de las más emocionantes. A la gente realmente le encanta esta animación de visualización. Como mencioné, todos los ejemplos están vinculados en mi presentación para que puedas verlos como una aplicación en tu navegador.

Así que esta es una capa de viaje que te permite animar suavemente los movimientos de los objetos desde el inicio hasta el punto final a lo largo de una línea de tiempo. Así que, por supuesto, es importante tener los datos en un formato adecuado. Pero es muy, muy común usar esto en visualización de gestión de flotas, análisis de tráfico, transporte público. Así que puedes expandir la trayectoria, puedes ralentizar, acelerar la animación. Puedes aplicar filtrado como en el ejemplo con los relámpagos, donde quieres enfocarte en un cierto período de tiempo, solo ciertos tipos de vehículos quizás. Así que esta visualización muestra viajes de taxi amarillo versus taxi verde en Manhattan. Ejemplo muy popular para DevGL.

Y como mencioné, hay formas de construir tus propias capas personalizadas, y este mapa de flujo es una de esas capas personalizadas construidas por mi amigo Ilya, completamente de código abierto. Así que, creo que te da una forma diferente de visualizar tu movimiento, movilidad, migraciones de transporte. Así que está completamente renderizado en WebGL, y tiene esa agregación y filtrado adaptativos, y eso te permite manejar un gran número de flujos. Así que puedes ver que desde dos puntos, puedes ver inmediatamente de dónde proviene el tráfico más en una dirección o la otra. Por supuesto, puedes aplicar muchos filtros diferentes encima de eso. Así que un par de casos de uso reales es el Foursquare Studio. Tuve la suerte de construir esta herramienta desde que comenzó en Unfolded y luego fue adquirida por Foursquare. Así que esta es una herramienta de visualización de datos geoespaciales de propósito general. Puedes inyectar cualquier tipo de conjunto de datos y visualizar diferentes tipos de capas. Así que también está utilizando DevGL, y puedes ver aquí un análisis de idoneidad con capas H3.

Por ejemplo, creo que esto utiliza algunos datos sobre bienes raíces. Así que puedes analizar el precio en ciertas áreas, en ciertos períodos de tiempo, basándote en ciertos criterios, y de inmediato obtienes un resultado de dónde podría ser una buena idea invertir, cómo van los precios, hacer alguna evaluación de mercado. Otro buen ejemplo de usar H3 para este tipo de visualización es el Auto-Tuner de Política de Movilidad. Esta es una aplicación que encontré, no la he usado, pero ilustra bastante bien los ahorros de CO2 en ciertas partes de la ciudad. Así que verifica el tráfico, tiene sus propios datos, por supuesto, pero puedes ver claramente qué partes de la ciudad tienen las mayores emisiones de CO2 en ciertas partes del día. Así que esta también es una buena herramienta para quizás municipios de la ciudad o algunas instituciones gubernamentales para averiguar qué quieren hacer.

Y esto también funciona de la misma manera. Tienes tu aplicación React, tienes tu propio estado, gestionas ese estado de la manera que mostramos en el ejemplo anterior. Y tienes tu UI que es muy reactiva, y tu mapa que reacciona a tus actualizaciones en tus controles. Y si están compartiendo el estado, hace que sea bastante fácil y eficiente y de alto rendimiento visualizar estos cambios. Así que puedes ver aquí nuestro ejemplo, otro ejemplo es la aplicación que estoy construyendo aquí en Fused. Utiliza edificios de overture. Así que aquí es un poco diferente a las aplicaciones que he mostrado antes, porque el código que está a la izquierda está procesando los datos y dándote el resultado de esa salida en el lado derecho. Así que lo que esta visualización está mostrando es en realidad cómo puedes combinar dos conjuntos de datos y visualizar un mapa 3D para quizás demostrar, en este ejemplo específico, qué riesgo de desastre hay en estos edificios específicos. Así que edificios específicos son obtenidos de los datos de overture, y el riesgo es capturado de los datos de NSI. Y combinamos esos dos datos para averiguar quizás cuáles son los edificios más amenazados por terremotos, y visualizar eso de manera bastante eficiente y de alto rendimiento en nuestro mapa.

Así que estamos hablando de conclusiones clave aquí. A continuación, queremos hablar sobre cómo construir un mapeo declarativo basado en estado. Así que trata tu mapa como un componente React, controla tu estado de vista, visibilidad de capas, filtros de datos, a través de props y hooks, en lugar de llamadas WebGL imperativas, lo cual sería una pesadilla hacer. Así que, ¿por qué es importante? Reduce el código repetitivo, hace trivial sincronizar los controles de la UI con las actualizaciones del mapa. Mostramos esto en un ejemplo muy simple. Pero te mostré cómo aplicaciones complejas están construyendo eso. Y el principio es bastante el mismo. Por supuesto, con la sobrecarga de diferentes capas, grandes conjuntos de datos, UIs complejas, vienen otros problemas, pero esos son los problemas que ya estamos resolviendo en diferentes partes de la web. Nada nuevo ahí. Y el beneficio es aprovechar la aceleración de la GPU para descargar tareas pesadas, geometría, agregación y animaciones a la GPU a través de WebGL. Puedes alimentar formatos de datos binarios en capas basadas en mosaicos. Y esto es algo que va más allá de lo que demostramos antes. Pero si estás interesado, solo contáctame, y voy a hablar de ello un poco más directamente. Una de las cosas principales es que puedes mantener tus 60 cuadros por segundo, incluso con millones de puntos.

La arquitectura depende de cómo estés estructurando tu aplicación. Pero si gestionas tu estado de manera eficiente, y encapsulas la carga de datos y la lógica de configuración de capas y hooks reutilizables de React, como use map data o use layer props, tu aplicación trabajará para ti. Y podrás reutilizar eso en diferentes partes de la aplicación, ya sea un mapa o algún tipo de componente de control de capas, no importa.

Construir tus capas personalizadas extendiendo la clase de capa de WebGL es algo que es mucho más avanzado y mucho más complejo. Y tal vez vamos a entrar en esa charla en alguna otra sesión. Tu resultado es un código más limpio, pruebas más fáciles, reutilización rápida de características a través de las aplicaciones. Así que si estamos hablando de patrones de rendimiento para escalar, es importante envolver las configuraciones de capas en use memo implementar la actualización de la capa para evitar redibujos innecesarios, dependiendo de cuándo quieras redibujar tu capa, eso puede ser algo costoso de hacer.

Puedes usar web workers y confiar en la agregación incorporada de deck jails para reducir las llamadas de dibujo. Así que todas las referencias y demos también están listadas aquí. Puedes echar un vistazo a ellas, hacer clic en cada enlace, pasar por los ejemplos, aplicaciones web. Si quizás olvidé agregar algo, solo contáctame, se añadirá. Y sí, eso es más o menos todo. Gracias por tu tiempo. Espero que lo hayas disfrutado y contáctame para conectar. Si tienes alguna pregunta, no dudes en hacerlo. Gracias.