Building a Building Inventory

Posted on Aug 9, 2024

tl;dr: I wrote a React app that displays spatial data about Seattle's unreinforced masonry buildings.

Table of contents:

Motivation

How many unreinforced masonry buildings are there in Seattle, where are they, and what’s their risk category? Thanks to the City of Seattle’s open data platform, I can answer this question.

See it live and its repo.

I wanted to find a compact project that had the following criteria: related to structural engineering in some way, manipulate some data, build it with React, and deploy it. Upon initial discovery, it turns out that a dataset size of 1,141 points wasn’t enough to necessitate the use of a database to store the data. Instead, it’s stored as a static asset which makes for a nice standalone frontend project to statically deploy to Github Pages. The rest of this post is intended to highlight things I found interesting in building the app outside of building React components.

Finding a Map Tile Set: Maplibre GL JS and PMTiles

I needed a map and a tile source. I used the PMTiles CLI tool and a .pmtiles file source to extract relevant portions of map tiles for Seattle. These tiles, if the file size is small enough (though I haven’t tested what the size limitations are), could also be loaded as a static asset without having to call a separate API service to get a map painted on the screen, thus eliminating a dependency.

To extract a set of tiles, I downloaded the pmtiles tool, then ran the command below to extract a map tile set of Seattle using the latest Monday build at the time.

$ ./pmtiles extract \
      https://build.protomaps.com/20240610.pmtiles \
      seattle.pmtiles \
      --bbox=-122.451042,47.509988,-122.223076,47.757075

Maplibre GL JS can process .pmtiles formats and has an extensive API with examples of queries, markers, camera fly-bys, etc. to help visualize and interact with map data.

My main goals with this application were pretty straightforward: convert the City of Seattle’s JSON data into GeoJSON, pipe it into Maplibre GL JS, place clickable ‘more details’ markers on the map, and add a small filtering React component to display buildings markers according to their risk. There’s definitely a lot more room for improvement, like a more extensive filtering system, better looking markers, etc., but I wanted to get it deployed first before even thinking about improving it.

Building and Deployment: Vite and Github Actions

Vite is a cool tool that got my frontend application up and running quickly. I elected to build my React application in TypeScript and with Vite, I could spin up a boilerplate application in seconds (just to get things painted on the browser) in all the popular JavaScript UI libraries in case I wanted to give Svelte a whirl in the future.

Since my plan was to statically host the map and data together within the application, Vite’s folder structure out-of-box allowed me to drop the map tile set into the ./public directory and drop the JSON data into the ./src/assets directory, which made importing them within my React components relatively straightforward.

Deploying the application to Github Pages requires setting up a workflow and adjusting your repo’s Pages settings to respond to Github Actions. The workflow .yaml file can be viewed here.

What I got out of this

Despite not having vast of quantities of data to process, building a nifty little mapping project was the right kind of frontend project for me that yeilded a satisfying visual sense of completeness while working with some frontend and deployment technologies in the process.