About This Project

I had a design in my head about how I wanted it to look, and when I started putting it together in StoryMap, it did not support the web building features that I wanted. So, instead of just building my project with StoryMap, I built a basic web application and used the advanced embedding feature that lets you add a Storymap easily to HTML. This let me build a nice landing page with the design I wanted, and then link out to smaller Storymaps. This worked out nicely because I could tweak the content on the Storymaps without re-deploying my application over and over again.

The application uses a Tailwind template called Oatmeal that let me skip much of the component design portion. The template was built with Next.js but I wanted to use React Router v7, so I initialized my React Router project and converted the components from the Next.js download. I embedded my two Storymaps into the project and deployed the application using fly.io, which is one of my favorite hosting services. I then hooked it up to my new domain, riverviewparkpgh.com, which is where you are now! The home page is built with React, but if you click on the Plan Your Visit or Nature links, you'll be able to find my embedded Storymap pages.

This page consists of general park info such as the hours, facilities, and places to recreate. You can check out the original Storymap in ArcGIS here. I used Survey123 to design a form that I could use to bike around the park and record features. I collected a feature name, a category, and a pre-populated list of categories. Here's the survey link.

This allowed me to build a custom map in MapViewer, with different layers filtered by the category, which you can view here. One of my favorite layers on this map was all of the neighborhood dogs that I recorded. After I had the map ready, I could access this via my Storymap.

For my second Storymap, I wanted to show off Riverview's natural areas. For the trails section, I found the 3 most popular trails for the park using AllTrails, downloaded them as KMZs, and added them as layers to my MapViewer map. I overlaid a layer of trailheads that I had recorded with Survey123.

I used the iNaturalist Web Map explorer as a layer to show all of the different plants, animals, insects, etc. that are in the park. This made me want to download that and start recording myself!

In conclusion, I got really into this project and wish to continue it. I reached out to my local groups and neighbors and many people wanted to add to it! Someone has a friend who wrote a scientific paper on the geology, so I eventually want to add a "Rocks of Riverview" section. I want to log more neighborhood dogs on the dog map.

I added a contact form to the footer that submits a row to a Google Sheet so I can track requests to the project and I'm hoping this can be a community event. I will be sharing it with my local Facebook group and sending it to the Park Conservancy with the hope that they can use it.