Where are all the trails?

In 2012, I had recently started mountain biking, and I was searching for more trails to ride in Michigan. I found the Michigan Mountain Biking Association (MMBA; now defunct) website, and it had a trail guide! But it was unfortunately just an alphabetical list of trails by name with addresses. This was not a very convenient way to find trails near me. So I did what any respectable web developer would do: develop my own map-based trail guide and offer it up to be hosted on the MMBA website for everyone’s benefit.

After developing a proof of concept, I reached out to the MMBA and gained their support. I worked with the MMBA to understand what kinds of information could be available for each trail, what would be useful to users, and to get feedback on the trail guide as development progressed. All work on the trail guide was performed free of charge as a volunteer contribution to the MMBA.

Experience a preserved copy of the trail guide

Unfortunately, the MMBA has since disbanded, so the trail guide is no longer available. I have a copy of the code, but not the data. Someone did try to preserve the trail guide, but unfortunately did not copy all of the assets that existed on the MMBA servers. Much of the basic data is still present on this copy of the trail guide, but all separately loaded trail maps, logos, etc., are now broken links.

NOTE: The trail guide is not very mobile-friendly. This was before I learned to develop responsive mobile-first web applications.

Notable Features

My favorite feature is unfortunately no longer functional due to the loss of MMBA resources. Many trails had an overlay of the official trail map perfectly aligned on the Google map, along with an opacity slicer, so that you could visualize exactly how the bike trails were routed in relation to the rest of the map. You’ll just have to imagine how nifty that was.

Other notable features that you can still experience include:

• The main view shows locations of all trail systems on the map, as well as a list of all trail systems on the left side with some basic details.
  • Zooming in on the map will cause the list to automatically filter down to only those trails within the viewport on the map.
  • Hovering over an item in the list will highlight the corresponding icon on the map, and vice versa.
  • Clicking an item in the list or an icon in the map will display a popover at the icon on the map. The map and the list will both auto-scroll if necessary to ensure the selected trail is visible.
• Clicking the “View Details…” link for any trail will switch into the detail view of that trail.
  • Details about the trail are presented on the left side.
  • The map automatically zooms into the area of the trail and displays various points of interest (POI) for the trail (parking, trailhead, restrooms, etc.).
  • The “Points of Interest” tab lists all points of interest.
  • Similar to the main view, there is a hover/highlight/click relationship between the POI list and the icons on the map.
• Different sizes of the icons are displayed on the map depending on zoom level to effectively “zoom” the icons themselves. This was done to minimize cluttering and overlapping of icons while zoomed out, and maximize “readability” of icons when zoomed in.
• There is a “copy link” button in the header of the left section that gives you a sharable link to the trail guide exactly in the current state that you are viewing.

Additional Screenshots