How I created a ‘Parks Finder’ web app

Part of the finished product (icon from Tatina Vazest/Noun Project.)

See the Parks Finder app here

Do you know where the closest National Park is?

At PubliVate, an Ottawa online collaboration and stakeholder engagement company, we discovered most of our staff didn’t know the answer. We had the realization while working on a consultation project for Parks Canada. It sparked the idea for a “Parks Finder” JavaScript web app, which was eventually used as part of the Let’s Talk Parks, Canada! Minister’s Round Table consultation.

To make the app, I collected the name, latitude and longitude for each site. Then I converted the data to JSON, so it would work easily within JavaScript. We decided to expand the web app, which would tell users the closest site based on postal code, to include National Historic Sites and National Marine Conservation Areas.

The next question was how to match up a user’s location with the closest sites.

Using a small amount of initial data, I wrote functions that turned the user’s address into latitude and longitude, using Google’s Geocoding API. I then compared those coordinates to the sample of the national sites, returning the closest location in each category, and the distance.

Although I initially started using the Google Maps Distance Matrix API to calculate distances between points, it became clear that wouldn’t work once I used all the data, since the API accepts a maximum of 25 destinations per request. There are more than 200 National Historic Sites, National Parks and National Marine Conservation Areas combined.

However, the only necessary API function was geocoding the address, since I could use a math formula to calculate the distances. I decided to limit the API usage to geolocation, which has less usage restrictions per request.

The math I used instead, called the haversine formula, calculates the distance between points “as the crow flies,” meaning the distance was exact, rather than driving or another transportation route. (Shout out to the helpful community over at Stack Overflow for giving me the idea and code.)

How I calculated the distance between each site and the user’s address

The web app was eventually used by more than 1,000 people in January at consultation events. We heard from several users that, prior to using our app, they hadn’t known what the closest sites were.