State Parks App: The API

Previously, we took a look at my plan to build an app to track state parks.  The first step towards phase 1 of the plan is to have some solid data, so we need to build an API.  Last year, we looked at building a JSON API using Google Sheets.  I don’t see any reason why we can not do that again.  I have looked at a number of possible sources of data and I decided to start with the WSPS Visitor Guide.  Copying and pasting state park names out of that gives us a solid start.  At that point, I need to use DDG to fill in the rest of the blanks.

The values that I decided to track are:

  • The name of the property
  • Is it a state park?
  • Is it a recreation area?
  • Is it a state forest?
  • Description
  • Physical Address
  • County
  • Phone number
  • DNR Website URL
  • Directions for getting to the property
  • Hours
  • The Latitude / Longitude coordinates
  • A slug for use with property profile pages

It turns out that collecting this much info for 76 parks, forests, and recreation areas is SUPER tedious.  It literally took me weeks to finish.  I do want to add onto the dataset later on.  Among other things, I want to add the polygon coordinates for each property and the URLs for instagram and flickr images taken at each one.  This should be a good start, though.

Just like last time, I set the permissions on the document to “Anyone on the internet with this link can view”.

Just like last time, I also ended up with a sharing URL and (more importantly) with a JSON feed for the document.

So, what does the end-result look like?  If we fork the codepen from last year’s example and plug in the details for the new spreadsheet, we get this …

See the Pen
State Park App: The API – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

So, now we have an array of objects but let’s do something a little more interesting with it.

See the Pen
State Park App: The API – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

With a table and a quick v-for loop, now the data is a little more readable.

Have any questions, comments, etc?  Feel free to drop a comment, below.


[ Cover photo by Christopher Burns on Unsplash ]

Leave a Reply

Your email address will not be published. Required fields are marked *