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.
Comments