This is an interactive map that shows the topological relationships between the USGS level 12 hydrologic units for the United States (see https://water.usgs.gov/GIS/huc.html).
You can see this application online at http://watersheds.fernleafinteractive.com.
It follows the cursor as you move it, always coloring the region upstream of the cursor position red, and the downstream region blue.
Zoom in on some place on the Mississippi River (or any other river), and hover the mouse exactly over the river to see an example.
If you want to tinker with the source code and/or run this application locally, here's what to do:
- Make sure you have npm and nodejs installed.
- If you don't already have webpack installed, install it
with the command
npm install -g webpack. - Clone this repo, and
cdinto it. git submodule update --init --recursivenpm installnpm run dev, and leave it running.- Browse to http://localhost:8080; as long as
npm run devis still running, changes to the source*.jsfiles get pushed to your browser automatically. - Interrupt
npm run devat any time withctrl-C. npm run buildto generate the compiledwatersheds.jsfile for deploying as a static asset (npm run devdoes not do this).
The program works differently on mobile devices than it does in desktop browsers. The desktop version pre-loads a big data file containing all the watershed shapes and relationships, and draws them dynamically in response to mouse motions. In the desktop version, once the data file has been downloaded, everything happens in the client (except for the map tiles, of course).
The mobile version does not pre-download any data. Instead, it just creates a Leaflet map, and when the user taps the map, it initiates a request to a service (at http://watershed-location-service.fernleafinteractive.com/huc12) to get the id of the HUC12 region under the tap location, and then fetches a topojson file from Amazon S3 containing the geometry of the selected region, and its upstream and downstream polygons. Each tap on the map results in a new request for a HUC12 id, followed by a new request to S3 for a topojson file for the tapped location. Most of these topojson files are very small, which allows the download and rendering to happen very quickly.
Copyright 2016 FernLeaf Interactive, LLC
This application is distributed under the terms of the Creative Commons Attribution-NonCommercial 4.0 International License; see [https://creativecommons.org/licenses/by-nc/4.0] (https://creativecommons.org/licenses/by-nc/4.0) for details.