GIS with DeckGL + React
DeckGL has become my go-to geospatial visualization framework for interactive geospatial projects. The framework was originally developed by Uber's geospatial visualization team and has become a robust open-source project and a staple in the geospatial community. I learned about DeckGL in 2018 when I attended a workshop hosted by the Uber's geospatial engineering team, and I've been using it ever since.
DeckGL has a layer-based architecture, meaning the visualizations consist of layers of data overlayed on top of a base-map. Inside each layer, you can program conditional logic and computations to recompute and visualize data based on user interactions. Deck's built-in GPU acceleration comes from it's use of WebGL for high-performance rendering, meaning you can render millions of data points and polygons I project without running into computational overloads and slow choppy interactivity. Though, it is important to consider that in order to achieve this level of high performance, special attention must be paid to ensuring that data structures and computational logic are as efficient as possible, especially for large projects. DeckGL provides integrations with several different mapping services such as Mapbox and Carto.
Overview
This project post will cover some examples from a recent professional geospatial project where I quickly developed a multilayer DeckGL model inside a simple React application to showcase various GIS/geospatial computational capabilities. The project was fast-paced and required delivery within two weeks, so a typical SCRUM sprint duration. The objective was to showcase how we could leverage publicly available data for more in-depth spatial analysis. I began with research and data collection to find publicly available data on the surrounding site from credible entities and began compiling the data.
Data Preparation
Shapefile to GeoJson
Much of the data came in the form of Shapefiles, which required conversion to GeoJson. To do this, I wrote a Python program that ingests a collection of shapefile .zip folders and converts the shapefile to GeoJson and performs necessary coordinate transformations using Pyproj. The coordinate transformation part of the script is critical, as GIS data from different entities use different coordinate reference systems (CRS) depending on the geographic location of the data represented. The script unpacks the shapefile reference files into a temporary folder and looks inside a .prj file to locate the shapefile's coordinate reference system, which looks like this:
GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137,298.257222101]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
With this information, we can take the GEOGCS value ("GCS_North_American_1983") and reference a SQLite database I made that contains EPSG references and get the standard EPSG code of the shapefile's CRS. In this case, the EPSG code was 4269. To represent this data in a web-browser application, the data needs to be converted from the 4269 coordinate system to the EPSG 4326 CRS, which is for standard web-Mercator maps. This is where Pyproj comes in to perform the necessary conversions. Once converted, the data is packed into a GeoJson format and written with the .geojson extension.
Urban Change Analysis
I wanted to include urban change analysis to illustrate our capabilities in conducting our own analysis on raw-satellite imagery data to infer meaningful insights in a spatial context. The urban change analysis data came from Google Earth Engine, which uses the Sentinel-2 L1 and Dynamic World V1 image collections. You can read more about how this data is extracted using Earth Engine in this post, Urban Change Analysis - Dynamic World V1. The multispectral data can be used to differentiate urban materials from natural materials and therefore when applied to imagery from different points in time, can be used to measure the change in urban growth patterns. For this application, I collected imagery from 2018 through 2023 and executed the following steps:
Classify pixels as urban material or not urban material
Apply masks to urban material pixels
Apply a cellular automaton-based segmentation algorithm to the masked data to group masks into unique clusters.
Apply a convex-hull algorithm over the clusters to generate a simple polygon around the change areas.
The convex-hull polygon was used rather than creating a detailed polygon around the clusters as to imply more generally where changes had occurred as to avoid confusion from the implication that we were pointing to exactly where changes had occurred.
To better illustrate how the urban change analysis layers could be used to help us identify more precisely where changes occurred, I included an additional sub-layer to the urban change analysis layer that allows the user to toggle which structures are within the change polygons. With Python and the use of Fiona and the Shapley libraries, used the change area polygons as spatial filters to test if a structure polygon was inside the change area polygon. If the structure polygon was inside the change area polygon, the structure polygon and it's feature properties was written to a separate geojson for that particular year of the analysis.
Additional Context Layers
Several other layers to provide a more rich context for the surrounding site were added to the application, including parks and greenway layers that contained data on existing and future features in the city's masterplan. Parcel layers for parcel classifications and tax data of surrounding parcels were added to provide additional context into the zoning and economic characteristics of the surrounding area.
In the React app
In the full React application, the user can cycle between temporal data layers using the slider in the visualization control panel or by selecting a button to automatically cycle through layers. Each time the slider is updated, the useState variable is set the the value of the slider. The useState variable is then plugged into a file path to recall the geojson file of urban change analysis data for the selected year and rendered in its respective DeckGL layer. The event hooks in react allow for these updates to occur smoothly with minimal delay with data loading and rendering.