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

Hey everyone, welcome to another edition of React Summit. It's my pleasure to talk here today with you guys. We're going to do a little bit of mapping with React. So my talk is called Beyond Maps, Crafting Immersive Geospatial Experiences with React and DEC GL. And what this is all about, we're going to see in the couple of next minutes.

So, first couple of things about me. My name is Marko. I'm currently working as a funding engineer at Fused. My background is in building geospatial solutions for the web for the past 10 plus years. And this is exactly what I'm doing at Fused. So you know, domains are different, we're different. Smart grids, urban mobility, and in the last couple of years just building general-purpose geospatial data analytics tools for the web. I previously worked at Foursquare. I was a tech speaker at Mozilla. You can reach out to me on Twitter or XNOW, LinkedIn, GitHub. There's a QR code if you want to get in touch with me on LinkedIn also. It would be my pleasure to share some common ground and share experiences and any feedback on the talk in general. So yeah, let's get started.

What is DEC GL? So it's very ambiguous to say we're going to talk about maps and React without giving a little bit of introduction into the framework that we are actually going to use today. DEC GL is an open-source geospatial visualization framework. It's developed by the data visualization team at Uber, and they have a whole suite of tools for geospatial visualization. Some of them are a little bit more familiar than others, but I would say DEC GL is the top one. So it allows you GPU-accelerated WebGL layers. This is a mouthful, right? But basically, it harnesses the power of the GPU to render a lot of data on your maps. So that can be points, polygons, 3D geometries, tiles, different kind of vectors in general. And it's very declarative, so you can easily use it with any kind of framework. Today we're going to talk about how we can use it with React. I would say this is the most common use case today, except for maybe some simple examples where people just use plain JavaScript to visualize a couple of things. So it has its own React component, and we're going to see how to work with that. So the benefit of DEC GL is it has a built-in extensible layer catalog.

So what that actually means is that you can visualize almost any kind of geospatial data in different ways. We're going to see a couple of demos of different layers, like scatterplot layers for point clouds, hexagon layers for aggregation, and trip layers for animating paths. The benefit is handling big data effortlessly through a combination of JavaScript or TypeScript and WebGL, leveraging GPU power to render millions of points in the browser. In this process, you start with your React app, potentially integrating a base map using React Map GL, and then incorporating DEC GL for visual overlays and DEC GL layers.

Decoupling data binding is managed by LumaGL, a WebGL functionalities wrapper, ensuring a seamless integration of your data and state variables into the visualization layers. DEC GL's layer manager synchronizes with React Map GL, controlling the viewport of the map and its state, while LumaGL handles the WebGL rendering aspect. By integrating base maps with DEC GL layers, such as arc and scatterplot layers, you can create visually appealing representations without overlapping elements like street names or buildings. This integration allows for a cohesive visualization of various data types, ensuring proper data representation and an aesthetically pleasing display.

It can be something else. And then the DEC GL part, where you have your visual overlays, your DEC GL layers. And data binding is done in LumaGL, which is a wrapper for some WebGL functionalities. We're not going to go into that part today.

So we're going to focus on your React app, React Map GL, and DEC GL. This is a little bit more in-depth of how that should work. Your data, when I say data, I don't mean actually just the data that you want to visualize, but also some state variables you want to pass into your layers. DEC GL handles the rest with its layer manager and syncs the viewport with React Map GL, where it controls the viewport of the map, the base map, and the map state.

LumaGL is underneath DEC GL, and it handles the WebGL rendering part. This is how it kind of looks, a base map integration with DEC GL. You have maybe two layers. One is an arc layer, the other is a scatterplot layer. This is kind of a quick example of that. Basically a basic scatterplot layer, an arc layer, and Mapbox.

It might be interesting to visualize that. And you want to combine all of that data into one single visualization. So what you want to do there is you want to see data properly represented, right? You want to see your scatterplot layer all the way down, so that it doesn't go over the street names. You want your arc layer not to go through the buildings, and kind of breaks the UI, and breaks the 3D view mode that you have. So this is kind of like what you want to use, and how it actually should look like. So this is kind of a quick example of that. Basically a basic scatterplot layer, an arc layer, and Mapbox.

So as you can see, the arc layers are not going through the buildings or kind of messing up the view, and the scatterplot is below the street labels. So you can actually see everything you want in this simple visualization.

Linus says, talk is cheap, show me the code. This is a basic configuration of your react map with dev.gl. We don't have a lot of time, we're not going to go into the depths of creating custom layers or something like that, but we'll touch base on that. I think this talk is mainly meant to kind of give you a head start, and tell you what is possible, and show you a couple of guidelines that can help you get started in building awesome map-based, web-based map solutions.

So here we're just going to use two packages, we're going to use dev.gl, or we're going to use react-map-gl. As we mentioned in the previous slides, these two work together, especially if you want to use something like React with it. Here in the demo we're using Mapbox, you don't necessarily need to use Mapbox for base maps. You can use Google Maps, you can use something else, that depends on your use case, company policy or whatever.

Mapbox is kind of most famous in this setting, so we're going to be using Mapbox here. So what do we want to do? We want to create a simple map, and we want to draw some buildings on it. I call them buildings, you can call them rectangles, it doesn't actually matter. But we want to show those buildings on our map, so we want to first give our map a view state, which is what you're going to be looking at when you initialize your app. So that is some basic info like longitude, latitude, zoom, pitch, or bearing.

Pitch or bearing might be interesting if you want to visualize the map in 3D. We're not doing that right now, but it's important to know that you can also set that. So we want to set a new layer, and we're going to use something called a GeoJSON layer. You all use JSON formats. If you haven't encountered GeoJSON, it's basically a JSON file with some special rules on how you form a geometry object. So in GeoJSON, you can show, you can define points, lines, polygons. So we're going to show you how to draw three polygons that should represent some buildings in our case.

And we're going to pass some properties for those buildings. We're going to get into what those properties are, and we're going to initialize our map. So we're going to use a dev.jl element, we're going to pass it the view state, and we're going to pass our layers. We only have one layer, so that's the one there. And for the map, we just have to define the style of the map, so it can be a Street View Satellite View, Dark, Light mode. Mapbox has a lot of predefined styles you can use. And yeah, I'm going to pass your token. You just need to create your account on Mapbox for this specific instance, and you're going to be able to use that. And you're going to get a map that has three buildings, right?

Not a lot, right? So we want to demonstrate how you can actually easily manage the layer state. So we're going to use Jyoti to manage the state. You can use something else, you can use Zustand, you can use Redux. I think Jyoti is very well aligned with dev.jl, because atomic changes are very suitable for changing single properties in the layer. And this is how it's usually done. So we're going to create one layer state atom. We're going to add visibility and opacity to it. And then we're going to use those properties to basically create the atom and use those values.

And while using those values through the atom allows you also the ability to set the value atom through a different UI. That component can be defined somewhere else, of course, while you're using the created value. You can just set the visibility or opacity in a whole other part of the application. So here, we're using that to set the visibility and the opacity, create a small checkbox to toggle visibility, small slider to create the opacity. As you can see, there are no lag, nothing is breaking, it's very smooth, the transition is smooth and works like a charm, right?

We added some properties in our GeoJSON, which is kind of like the name of the building. I call it building one, building two, building three. You can add a lot more properties. It just depends on your use case. You might want to show a tooltip when a user hovers over it. You might actually want to do something when a user selects the object. Right now, in the interactivity example, we're going to focus on the hovering part.

So similar, like in the previous example, we're going to create one atom and we're going to add a hovered feature there. The hovered feature is actually the object that we're going to use to show as a tooltip. In our layer properties, we're going to add an onHover handler to update the hover feature. This is something that comes out of DevGL. You pass that onHover to your GeoJSON layer and as a callback, you get an info about the object that you're picking. You can get its latitude, longitude, you can get the properties of the GeoJSON, or some other things, depending on what you actually need.

When we set that hovered value, we can use that hover value in our component we call tooltip and just show the information. This is all very basic, as I mentioned, but let's go into some more advanced examples. Here you see an app of lightnings in Northern Europe, built by Gizpo from Finland. It's a very cool app, discovered it recently, loved how they did this. This is built in DevGL and as you can see, it has some common ground to what we built in the previous example. We have our map and we have some controls.

We have our map and we have some controls. Those controls are actually managing the state that is passed into the DevGL layer that is rendered on our map. We also have something additional here, which is the animation part. The animation is working as a filter. You can select the time range, and when you play, the time range is applied as a filter on your data in real time and it works perfectly. This is not a video of this. This is an app that actually runs and works. It's important to note that after the talk, I will share the slides on my social media accounts and all of these examples are going to be linked in the upper left corner so you can actually check them out.

You can see you're setting animation speed, you're setting up point size multiplier in case you want to highlight the visualization that is happening here. In the top left, you can see that the info that is coming from the slider is also updated there. So let's talk a little bit more about the layers. We saw how we were using a GeoJSON layer, but there are many other layers in DevGL, and one of them is an H3 layer, which is a hierarchical geospatial indexing system. So it divides the Earth's surface into hexagonal cells at multiple resolutions, so it provides you a grid for spatial analysis. It's very efficient for data storage, fast proximity search, aggregating results, and optimizing.

Here there's one app which tells you the number of orders, what order is not important, but it kind of gives you a really nice visual feedback on what is going on and what parts of the city in maybe certain times of the day are getting the most orders. That is very important for different kinds of reasons, depending on your use case and the app that you're building. Heat maps, all of you I think know about heat maps. You've seen them in many, many different forms. This is also one of the layers that comes out of the box with DevGL. Isochrones, also very popular, especially when you want to figure out some kind of an origin destination visualization.

Isochrones, also very popular, especially when you want to figure out some kind of an origin destination visualization. So they represent areas accessible from a point within a given time or distance. They're very, very used in areas like figuring out reachable zones for different kind of transport modes. And kind of provides you that time-based accessibility and allows you to customize parameters. So all of that you can use to visualize in DevGL. This is one of the more exciting ones. People really love this visualization animation. As I mentioned, all of the examples are linked in my presentation so you can see them as an app in your browser.

This is a trip layer that allows you to smoothly animate object movements from start to end point over a timeline. Of course it's important to have the data in a proper format. But it's very, very common to use this in fleet management visualization, traffic analysis, public transport. So you can kind of expand the trail, you can slow down, speed down animation. You can apply filtering like in the example with the lightnings, where you want to focus on a certain period of time, only certain types of vehicles perhaps. So this visualization is showing yellow cab versus green cab trips in Manhattan. Very popular example for DevGL.

As I mentioned, there are ways to build your own custom layers, and this flow map is one of those custom layers built by my friend Ilya, completely open sourced. So it kind of, I think, gives you a different way to visualize your movement, mobility, transportation migrations. So it's completely rendered in WebGL, and it has that adaptive aggregation and filtering, and that allows you to handle a large number of flows. So you can see that from two points, you can immediately see where is the most traffic coming from in one direction or the other. Of course, you can apply many different filterings on top of that. So a couple of real use cases is the Foursquare Studio. I was fortunate enough to build this tool since it started in Unfolded and then acquired it Foursquare. So this is a general purpose geospatial data visualization tool. You can inject any kind of dataset and visualize different types of layers. So it's also using DevGL, and you can see here a suitability analysis with H3 layers.

For example, I think this uses some data regarding real estate. So you can analyze the price in certain areas, in certain timeframes, based on certain criteria, and immediately you get an output of where might be a smart thing to invest, how the prices are going, do some market evaluation. Another good example of using H3 for this kind of visualization is the Mobility Policy Auto-Tuner. This is an app I found, I haven't used it, but it quite well illustrates the CO2 savings in certain parts of the city. So it checks the traffic, it has its own data of course, but you can kind of clearly see which parts of the city have the most CO2 emissions in certain parts of the day. So this is also a good tool for maybe city municipalities or some governmental institutions to figure out what they want to do.

And this also works all in the same way. You have your React app, you have your own state, you manage that state in the way that we showed in the previous example. And you have your UI that's very reactive, and your map that reacts on your updates in your controls. And if they're sharing the state, it makes it quite easy and quite efficient and performant to visualize these changes. So you can see here our example, another example is the app that I'm building here at Fused. It uses overture buildings. So here it's a little bit different than the apps that I've shown before, because the code that's on the left is processing the data and giving you the output of that result on the right side. So what this visualization is showing is actually how you can combine two datasets and visualize one 3D map to maybe demonstrate, in this specific example, what disaster risk are in these specific buildings. Specific buildings are fetched from overture data, and the risk is captured from the NSI data. And we combine those two data to figure out maybe what are the buildings most endangered by earthquakes, and visualize that quite performantly and efficiently on our map.

We're talking about key takeaways here. Next we want to talk about how to build a declarative, state-driven mapping. So treat your map as a React component, control your view state, layer visibility, data filters, via props and hooks, rather than imperative WebGL calls, which would be a nightmare to do. Why it matters? It reduces the boilerplate, makes it trivial to sync UI controls with map updates. We show this on a very simple example. But I showed you how complex apps are building that. And the principle is quite the same. Of course, with the overhead of different layers, large datasets, complex UIs, come other problems, but those are the problems that we're already solving in different parts of the web. Nothing new there. And the benefit is to harness the GPU acceleration to offload heavy lifting, geometry, aggregation and animations to the GPU via WebGL. You can feed binary data formats into tile-based layers. And this is something that goes beyond what we demonstrated before. But if you're interested, just hit me up, and I'm going to talk about it a little bit more directly. One of the main things is you can maintain your 60 frames per second, even with millions of points.

The architecture depends on how you're actually structuring your app. But if you manage your state efficiently, and you encapsulate data loading and layer config logic and reusable React hooks, such as use map data or use layer props, your app will work for you. And you'll be able to reuse that throughout different parts of the app, whether it's a map or whether it's some kind of a layer control component, it doesn't matter.

Building your custom layers by extending WebGL's layer class is something that is way more advanced and way more complex. And maybe we're going to go into that talk in some other session. Your result is a cleaner code, easier testing, rapid feature reuse across the apps. So if we're talking about performance patterns for scale, it's important to wrap layer configs in use memo implement layer should update to avoid needless redraws, depending on when you want to redraw your layer, that can be an expensive thing to do.

You can use web workers and rely on deck jails built in aggregation to reduce draw calls. So all the references and demos are also listed here. You can take a look at them, click on every link, go through the examples, web apps. If I perhaps missed to add something, just reach out, it will be added. And yeah, that's kind of it. Thank you for your time. Hope you enjoyed it and reach out to me to connect. If you have any questions, feel free to do so. Thank you.