Who’s drinking water is influenced by any given spot on the map?
That is the question Oregon Wild wants to be able to answer at a moment’s notice, and that’s the subject of my latest volunteer project.
Oregon Wild needs the data and a tool, to help understand the full extent of Oregon’s drinking watersheds and which populations are connected to any given Oregon location through common watersheds.
Data analysis and a web application
First, we followed a rigorous and tricky analysis process using multiple data sources to generate a new enhanced GIS dataset that fully maps each watershed and incorporates population data.
Second, we created a web application that could be used by anyone to easily view Oregon’s drinking watersheds and discover how populations and communities are interconnected through them.
On this post, I introduce the web application: how to access it, how to use it, and how we built it. On an upcoming post, I will describe the process that we went through to compile and assemble the underlying data.
Accessing the web application
You will see a web map centered in Oregon, with a turquoise polygon layer, representing the geographical extent of Oregon’s drinking watersheds.
Top-left - Controls for zooming, view reset, base maps and overlays.
Top-right, An information panel that displays data as you interact with the map. You can adjust the opacity of the watersheds layer by moving the slider left or right.
Bottom-right, An “About” control used to display general information about the project.
Click on a spot within any of the turquoise polygons. In the example below we show that the picked spot near Timothy Lake, connects 240,968 people through the water flow in the Clackamas River watershed. The watershed path is highlighted in gray on the map.
Logging, road building, or other disturbance near that particular spot could negatively affect the drinking water quality of Estacada, Clackamas, Milwaukie, Oregon City and Lake Oswego!
By default, the list of communities shown in the information box is sorted in descending population order. But it can also be shown in “downstream” order by clicking on the checkbox. By the way, the application will remember your selection the next time you come back (if you are using the same browser).
Clicking on the community name or the associated down arrow, displays more details about the water system for that community: Provider, Source, and Subbasin. At the same time, the application highlights the entire watershed for that community using a purple stripe pattern. In the example below, we are looking at Oregon City.
Available base map and overlay layers
We have included a number of layers to help customize the view.
Here is an example showing the Township and Range Grid and the Oregon DEQ Hydrography overlay layers:
Embedding in a web site
The web application can be easily embedded in any web site by using the html
iframe tag. Simply insert an
iframe tag in your post or page with a link to site, like shown in the example below.
Notice how it is not merely an image, but the active Oregon Drinking Watersheds site which you can fully interact with.
The code used to display the site above is:
<iframe width=“100%” height=“600” src="https://watersheds.oregonhowl.org/" frameborder=“0”></iframe>
Application building blocks
The Open Source application takes advantage of the following building blocks:
Mapping with Leaflet
I have used MapLibre in the past because of its excellent performance, especially when accessing vector tiles, and I mulled over whether to use it for this project or not. I also considered OpenLayers, which offers a vast array of geo-processing capabilities. In the end, for this relatively simple application, nothing beats Leaflet’s ease of use and healthy plug-in ecosystem.
I augmented Leaflet’s capabilities with the following plug-ins:
ESRI Leaflet - The Government-hosted “Oregon DEQ Hydrography” and “BLM Township and Range Grid” overlay layers are based on ESRI’s ArcGIS mapping services. This plug-in simplifies access to these layers.
Leaflet PIP - This plug-in developed by Mapbox, provides a convenient way of finding overlapping polygons under a given set of coordinates, which is exactly what I needed to do to expose connected watersheds.
CSS with Bulma
Dealing with CSS can be a real pain. So many options and quirks! That’s why I went with Bulma, an easy to use and customizable CSS framework that can be tweaked to load only the pieces that are actually being used. I have used Bulma in other projects and I enjoy its simplicity and flexibility.
HTML templating with Handlebars
On this post I described the latest web application I developed for Oregon Wild as a volunteer. I described its usage and capabilities, as well as the building blocks I used to create the site.
I will talk about the underlying data on an upcoming post.
Please contact me if you have any feedback or if you see any errors that need to be corrected.
Many thanks to Erik Fernandez of Oregon Wild for giving me the opportunity to work on this project.