Web App Architecture

Early web interfaces for this project utilized the now-long-lost GeoExplorer suite put together by Boundless. As we gained experience with other web technologies, specifically Django + PostGIS + Geoserver, we eventually settled on a completely homespun application. This architecture facilitated the second event of the Evaluating Sinks activity, and overall worked quite well.

Django + Geoserver

We created a Django web application with a PostGIS database backend that holds all of our sink(hole) location information. Separately, we setup Geoserver to read from the database and generate WMS endpoints that we could use in the Leaflet map frontend of the application. When people viewed the web map, they were seeing static WMS raster tiles generated by Geoserver. When they clicked on a sink for editing (e.g. to select a sink type for it), the BetterWMS Leaflet plugin provided the id of the clicked feature, and an GET request directly to the Django database provided the full information for that sink, in order to populate the update form. Once the form was altered and submitted, the sink instance was updated in the database and the map layer was refreshed, forcing Geoserver to update the WMS tile based on the new information.

The main advantage of this structure is that Geoserver is very efficient at rendering styled tiles for many thousands of points. So even with 10k sinks in the county, the layers showed up quickly on the map. The interactivity was fairly limited, but entirely sufficient, allowing people to select individual points on the map and make changes to them.

The problem with the setup was that the configuration of the layers in Geoserver had to be done manually, so no clear definition of these layers was ever stored in the Django code. Further, facilitating a staging and production environment was especially cumbersome–ultimately duplicate layers in Geoserver were created with a suffix (-prod or -stage). As we were looking to expand the app even further by adding a significant number of well locations to our database, we were faced with either replicating this entire setup for more layers, or trying something new.

Move to Locally Generated Vector Tiles

Near the end of 2022, we undertook a significant overhaul of the application components, ultimately replacing (or beginning to replace) GeoServer with pg_tileserv, and Leaflet with OpenLayers. We replaced the original jQuery + Bootstrap front-end with Svelte. The most detailed description of this overhaul can currently be found in this pull request.