Beyond Maps: Crafting Immersive Geospatial Experiences with React and deck.gl

Unlock the potential of geospatial data by combining React and deck.gl to create immersive web applications. This talk will demonstrate how to transform complex datasets into interactive, high-performance visualizations that captivate users. Whether you’re working on urban planning, environmental monitoring, or storytelling, learn how to elevate your projects with cutting-edge mapping technologies.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

DEC GL is an open-source geospatial visualization framework developed by Uber's data visualization team. It allows for GPU-accelerated WebGL layers to render a large amount of data on maps in a declarative manner, making it compatible with various frameworks like React.

The speaker is Marko, a founding engineer at Fused, with over 10 years of experience in building geospatial solutions for the web. He previously worked at Foursquare and was a tech speaker at Mozilla.

DEC GL integrates with React by using a React component that allows users to work with visual overlays and DEC GL layers. It also uses a React Map GL wrapper to control the viewport and manage map state, with data binding facilitated by LumaGL.

DEC GL is commonly used for creating geospatial visualizations such as scatterplot layers, hexagon layers for aggregation, trip layers for animating paths, and more. These are useful in fields like urban mobility, fleet management, and general-purpose geospatial data analytics.

DEC GL offers benefits like handling big data with ease, GPU acceleration for rendering millions of points, and a built-in extensible layer catalog to visualize various types of geospatial data in different ways.

Using React with DEC GL allows for declarative, state-driven mapping, making it easier to control view state, layer visibility, and data filters via props and hooks, reducing boilerplate and enhancing performance by offloading heavy lifting to the GPU.

Yes, DEC GL allows for custom layer creation by extending WebGL's layer class, offering advanced capabilities for developers to build unique geospatial visualizations.

Mapbox is used as a base map in DEC GL applications to provide background maps such as Street View or Satellite View. It is popular for its predefined styles and ease of integration with DEC GL for data visualization.

Advanced applications using DEC GL include the Foursquare Studio for geospatial data visualization, the Mobility Policy Auto-Tuner for CO2 emission analysis, and a disaster risk visualization app using overture buildings data.

Performance in DEC GL-based applications can be improved by using use memo to wrap layer configs, implementing layer should update to avoid unnecessary redraws, and using web workers along with DEC GL's built-in aggregation features.

database

Marko Letic

26 min

17 Jun, 2025

Comments

Video Summary and Transcription

Welcome to React Summit! Learn about DEC GL, a geospatial visualization framework by Uber optimized for React. Visualize geospatial data with ease using DEC GL, React, and WebGL for rendering millions of points. Focus on integrating DEC GL with React, utilizing data and state variables for visualization layers. Combine data for visualization, ensure proper layer hierarchy to avoid overlaps. Using dev.gl or react-map-gl with Mapbox for map creation. Adding properties in GeoJSON, focusing on hovering interaction, updating hover feature with onHover handler. Efficient State Management for Custom Layers in WebGL, Performance Optimization with Deck.gl Features.

Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript and the Database: Who Owns the Types?

TypeScript Congress 2022

27 min

TypeScript and the Database: Who Owns the Types?

Top Content

Matteo Collina

Node.js TSC committee member. Pino & Fastify author.

Welcome to a talk on Object-Relational Mapping (ORM) and its potential pitfalls. The speaker discusses issues with modals and the MVC pattern, as well as the benefits of structuring code around system features instead. They introduce PlatformaticDB as a solution for easy backend development, showcasing its deployment and testing capabilities. The talk also covers integrating with Next.js, writing custom SQL queries, and the speaker's plans for future support and database compatibility.

node.js database react orm

Database Access on the Edge with Cloudflare Workers & Prisma

Node Congress 2022

31 min

Database Access on the Edge with Cloudflare Workers & Prisma

Alex Ruheni

Developer Advocate at Prisma

This Talk discusses database access on the edge with CloudFlare workers and the challenges of serverless platforms. It explores solutions for database access, including CloudFlare-specific solutions and using Prisma data proxy. The Prisma toolkit and demo are showcased, demonstrating how to convert an application to use a database. The process of setting up Prisma Data Platform and deploying the application to CloudFlare workers is explained. The Talk concludes with insights on database usage and the differences between serverless, CDN, and the Edge.

node.js database cloudflare prisma

Bring AI-Based Search to Your Web App

JSNation 2023

31 min

Bring AI-Based Search to Your Web App

Sebastian Witalec

Head of Developer Relations at Weaviate

The Talk discusses the use of machine learning in search engines, specifically focusing on semantic search and vector embeddings. It explores the integration of JavaScript and machine learning models, using Weaviate as an open-source vector database. The Talk demonstrates how to connect to Weaviate, query data, and perform machine learning queries. It also highlights the benefits of Weaviate, such as its superior developer experience and performance. Additionally, the Talk addresses customization options, data privacy concerns, and the varying effectiveness of different machine learning models.

database artificial intelligence

Remix Persistence With DynamoDB

Remix Conf Europe 2022

41 min

Remix Persistence With DynamoDB

Brian LeRoux

Architect (arc.codes) Maintainer, Enhance Contributor, an AWS Serverless Hero

DynamoDB is a next-generation key-value database that is low-latency, scalable, and easy to use. It offers advantages such as local development options, a generous free tier, and fast performance. Common misconceptions about DynamoDB being expensive or hard to learn are debunked. The Talk covers topics like basic modeling, separating concerns, working with DynamoDB in Remix, and building a DynamoDB client. Overall, DynamoDB is a powerful database that integrates well with Remix and provides efficient data access patterns.

remix javascript database

Local-First Software With ElectricSQL

React Advanced 2023

29 min

Local-First Software With ElectricSQL

Watch video: Local-First Software With ElectricSQL

James Arthur

ElectricSQL

Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.

case study database builders and founders

Workshops on related topic

Relational Database Modeling for GraphQL

GraphQL Galaxy 2020

106 min

Relational Database Modeling for GraphQL

Top Content

Workshop

Adron Hall

In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1 a. Relational Database Data Modeling b. Comparing Relational and NoSQL Databases c. GraphQL with the Database in mindPart 2 - Hour 2 a. Designing Relational Data Models b. Relationship, Building MultijoinsTables c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites a. Data modeling tool. The trainer will be using dbdiagram b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples c. Hasura

database graphql

Scaling up Your Database With ReadySet

Node Congress 2023

33 min

Scaling up Your Database With ReadySet

WorkshopFree

2 authors

The database can be one of the hardest parts of a web app to scale. Many projects end up using ad-hoc caching systems that are complex, error-prone, and expensive to build. What if you could drop in a ready-built caching system to enable better throughput and latency with no code changes to your application?
Join developers Aspen Smith and Nick Marino to see how you can change one line of config in your app and use ReadySet to scale up your query performance by orders of magnitude today.

database

Build a Full Stack React Native App with Oracle 23ai

React Summit 2024

37 min

Build a Full Stack React Native App with Oracle 23ai

WorkshopFree

Doug Drechsel

In this workshop, you will set up a local full-stack environment and create a React Native Mobile app that runs against that stack.
Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and run a Walking History React Native mobile app against the stack
Walking History is a React Native application that allows you to walk around New York City (or simulate that in a device emulator) and it tells you about the closest attraction or point of interest.  

database react native fullstack

How to Solve Real-World Problems with Remix

Remix Conf Europe 2022

195 min

How to Solve Real-World Problems with Remix

Workshop

Michael Carter

- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others

remix validation database error monitoring

Building a RAG System in Node.js: Vector Databases, Embeddings & Chunking

Node Congress 2025

98 min

Building a RAG System in Node.js: Vector Databases, Embeddings & Chunking

Workshop

2 authors

Large Language Models (LLMs) are powerful, but they often lack real-time knowledge. Retrieval-Augmented Generation (RAG) bridges this gap by fetching relevant information from external sources before generating responses. In this workshop, we’ll explore how to build an efficient RAG pipeline in Node.js using RSS feeds as a data source. We’ll compare different vector databases (FAISS, pgvector, Elasticsearch), embedding methods, and testing strategies. We’ll also cover the crucial role of chunking—splitting and structuring data effectively for better retrieval performance.Prerequisites- Good understanding of JavaScript or TypeScript- Experience with Node.js and API development- Basic knowledge of databases and LLMs is helpful but not required
Agenda📢 Introduction to RAG💻 Demo - Example Application (RAG with RSS Feeds)📕 Vector Databases (FAISS, pgvector, Elasticsearch) & Embeddings🛠️ Chunking Strategies for Better Retrieval🔬 Testing & Evaluating RAG Pipelines (Precision, Recall, Performance)🏊‍♀️ Performance & Optimization Considerations🥟 Summary & Q&A

node.js database

Building a Realtime App with Remix and Supabase

Remix Conf Europe 2022

156 min

Building a Realtime App with Remix and Supabase

Workshop

Jon Meyers

Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!

remix database authentication