The MPG Ranch Habitat Restoration Map enables a team of environmental scientists to effectively communicate ongoing management plans and actions with their stakeholders and provides a venue for discussion of restoration research and practices through an interactive web map application.
I created the MPG Ranch Habitat Restoration Map while working for the world renowned data visualization, interactive mapping, and design firm Stamen Design. The following post describes what the app was built with as well as how it’s various pieces, companion web app (The Slide Builder), and shared React slides-component fit together.
About MPG Ranch:
An elk herd roaming over MPG Ranch in the winter, photo credit: Teagan Hayes
Set in the heart of Montana’s Bitterroot Valley, MPG Ranch lies on over 14,000 acres of rich undeveloped landscape. Established in 2009 and privately owned, MPG strives to preserve the natural communities that make this area beautiful and focuses on research to restore and protect native diversity.
This web app involved solving a multitude of technical problems, including integrating:
- a Shapefile of 60+ management unit polygons with environmental attribute data
- High resolution (10cm) aerial imagery of the ranch
- Raster GIS data representing NDVI and solar insolation
- Qualitative data on activities, management, plans, and research
- Professional photography of the ranch and activities
- Report slide decks that document research and restoration work on the ranch
To solve these development challenges a modern web stack was used that included the following front-end libraries and tooling:
- React for building out UI components
- Redux for managing application state
- Leaflet for displaying geographic data and handling map interactions
- Gulp, Browserify, and Babel as a front-end build system
and the following “backend” web services:
- Google Forms for allowing the client to enter qualitative data by management unit
- CARTO for syncing tables generated from Google Forms and for hosting vector geospatial data
- CARTO’s SQL API for fetching data to load into the application
- The AWS Lambda Tiler for serving tiles generated from aerial imagery and raster data
Habitat Restoration Map Features
The map allows a user to view various information about the ranch as a whole as well as individual “management units.” Users may click on a management unit polygon to bring up a detail pane which displays that unit’s photo carousel, environmental data, management activities, activities or “actions,” and report slide decks.
Default application state
Mousing over a management unit polygon
Management Unit detail pane opens after clicking on a polygon
Alternatively, a user may search for a management unit by typing in a text input field and browsing results in a list.
Searching by a management unit name via a text input and dropdown
Clicking a management unit list item brings up the detail pane
Photo carousels may be opened in a lightbox mode to be viewed at a larger size.
Photo carousel in lightbox mode
Various map layers may be toggled as well, including high resolution satellite imagery, NDVI, solar radiation, and terrain.
Toggling the NDVI raster layer
Toggling the solar insolation raster layer
Zoomed in view of the NDVI raster layer
Clicking on a list item in the Recent Actions pane will zoom the map to the polygon and open the detail pane for that action item’s corresponding management unit.
Mousing over a list item in the Recent Actions pane in the lower left corner
Map pans and zooms, opens the detail pane’s Actions section after clicking a Recent Action item
Slide Builder App
In addition to the Habitat Restoration Map, I built a fully separate web app, the “Slide Builder App.” This web app allows for MPG’s habitat restoration team to streamline the creation of research and progress reports, without using desktop software such as MS Powerpoint. The habitat restoration team found that this new approach saved them a great deal of time and frustration when creating reports, a task they previously had dreaded!
The Slide Builder web app was built using:
- React & Redux
- React Bootstrap
- Heroku’s wwwhisper add on
- Node JS
- CARTO SQL API
Reports are generated through a simple interface; a form on the left lets the user select a slide layout type (title, portrait, landscape, or text only) while a preview of the slide is displayed on the right. The user may navigate through the slide deck as slides are created and edit or remove slides as desired. Previously created slide decks may be loaded, edited, or deleted. Using my imagination and the React Bootstrap library helped me develop the interface fairly quickly without having to consult a wireframe or design mock up.
Slide Builder app landing screen
Creating a new report
Filling out report metadata
Editing the title slide
Publishing a report slide deck
Notifying the user that the deck was successfully published
When saved, the reports are stored as JSON data in CARTO, then loaded into the Habitat Restoration Map.
Due to the Slide Builder App’s requirement of POSTing data to MPG’s CARTO account, a Node JS Express proxy server is used to keep MPG’s CARTO API Key secure. The Slide Builder App runs on Heroku as a private web app through Heroku’s wwwhisper add on, there by only allowing MPG Ranch employees to access it. After a report has been created and marked as “published”, the report data will be fetched by the Habitat Restoration Map web app. When the user clicks a link for a report, the report data is rendered as a slide deck and displayed within a lightbox:
React Slides Component
In order to integrate and maintain consistency with the slide deck code shared by the two separate web applications, I created a Slides Component in React which consumes JSON data for a report and renders a slide show from that data. Using NPM and Github, the slides component can be installed as a private module in both applications, as well as developed locally separate from either application for debugging and development purposes. I found the process of using Github with NPM far less painful then attempting to develop the Slides Component as a local NPM module.
A slide deck is represented by an array of objects, where each object represents a particular slide:
The source code for the Slides Component is compiled to a single file and made UMD friendly
via Webpack and Babel, allowing for it to be loaded as its own
module in both the Habitat Restoration Map and Slides Builder App. In order to
enable Heroku to install the private git module for the Slides Builder App,
postinstall Bash scripts are used to create and then destroy
an SSH environment, keeping credentials out of Git while not having to go the
potentially painstaking route of using a custom Heroku Build Pack.
This answer on Stack Overflow
describes the process, and it worked well each time I deployed the Slide Builder
App on Heroku.
Overall, this was a challenging project due to its many requirements and moving parts. Working closely with Nicolette Hayes, a talented UI/UX designer at Stamen Design, made it possible to rapidly prototype various features of and iterate on building the applications. The client, the habitat restoration team at MPG Ranch, ended up being very pleased with both the Habitat Restoration Map and Slide Builder app. Both apps are still under development and continue to serve the restoration team, enabling them to share their work with the general public, colleagues, and ranch owner. This app could very well serve as a prototype for a platform that allows rural land owners and/or environmental restoration advocates to coordinate and share their work and research.
Web Mapping React JS Leaflet JS CARTO AWS Node JS Heroku