Sector(s)
Team Members
Project Team
Eric Thoelke, Executive Creative Director
Jay David, Interactive Creative Director
Deana Myers, Project Manager
Robert Paige, Designer
Daniel Korte, Developer
Forest Park Forever is a nonprofit organization that works to restore, maintain, and sustain the 1,300-acre St. Louis landmark. The park’s existing JPG map, which lived as a page on Forest Park’s main site, was formatted for print and proved difficult to read online. With dozens of plotted locations, users had to pinch and zoom to find items on the crowded map. Without space for location descriptions or history, the map lacked context and did little to tell the story of Forest Park.
The existing map was even more difficult to view via smartphone, which was problematic since a large portion of traffic to the park’s map page came from mobile devices. Without GPS capabilities, park visitors were unable to see their location on the map with a “You Are Here” dot. Worried that a poor mobile user experience may leave park visitors lost or disoriented, the organization decided it was time for a map redesign.
Forest Park Forever wanted to increase site traffic and park visits by creating a lightweight, responsive tool that would make park exploration fun and easy. This tool needed to work well from any device — whether at home on a desktop computer with high-speed Internet, or while navigating trails and museums from a phone with spotty connectivity.
“We view this online map as a way of making [visitor] experiences even better,” said Lesley Hoffarth P.E., President and Executive Director of Forest Park Forever. “We also hope that it will encourage people to discover new areas of the park and learn a little bit more about this St. Louis treasure.”
TOKY Branding + Design created a fully customizable map that helps locals and tourists explore the park’s locations and history from any device. TOKY specializes in digital and print work for clients in the arts and culture industry, as well as architecture, education, and premium consumer products.
About the project
TOKY worked with Forest Park Forever to develop several important goals for the redesigned map.
Create a map that looks great at any zoom level
Park staff wanted a map that was not only functional, but also visually appealing. The park has over 100 plotted locations, and one of the primary design issues on the JPG version of the map was overcrowded plot points. TOKY used Leaflet.markercluster to keep those points from crowding or obstructing the map, especially when the user is zoomed out.
TOKY used MapTiler Pro by Klokan Technologies to provide four zoom levels for desktop users and six zoom levels for mobile users, all with retina support. Retina tiles ensure that users get a crisp, clear view of the map, even when they’re zoomed in at the highest level.
Allow visitors to share links to specific location pages
Forest Park Forever wanted to give users the ability to share direct links to their favorite locations via email, Facebook, or Twitter, for example the Saint Louis Science Center. TOKY used the HTML5 History API to ensure that the URL changes depending on which location the user is viewing without reloading the entire page. If a user visits one of the location URLs directly, the relevant location data is loaded in by default, saving an extra AJAX request. TOKY accomplished this by using the same template file for the home page node and location nodes.
Share park history through location descriptions
The previous park map provided location names, and not a whole lot more. With this map, Forest Park Forever wanted to tell a richer story about the park and its individual features. We discreetly stored landmark data — including a brief description, hours, admission info, and more — in location detail popups that open on click. This way, the map includes an extra layer of data without sacrificing overall readability.
Provide context through “Related Locations”
As Forest Park Forever pointed out, park locations do not live in a vacuum; they all work together to tell a larger story about the park as a whole. The new map provides context by pulling in “Related Locations” below each item description. While the back-end automatically provides “Related Locations” for each plot point based on category, TOKY gave content administrators the ability to override those choices (via the entity reference module) and manually select three related locations from any category.
Allow users to explore the park according to interests
Forest Park Forever also wanted to allow visitors to filter content and locations by categories of interest. For example, if a visitor has an interest in nature, he or she can highlight the “Natural Highlights” category to isolate those pinpoints on the map and scroll through content about the park’s forests, islands, and savannas. If a visitor is simply looking for restrooms, he or she can tap that category to see the locations of all park facilities. TOKY leveraged Drupal’s Taxonomy terms to build this into the site.
Enable park visitors to navigate from their device
Geolocation is a key feature of the new Forest Park Map, allowing users to see exactly where they are as they wander the grounds. To show a user’s location, the site first checks that the browser is capable of giving its GPS coordinates. If it is, the site asks the user for permission to use their location. On many modern browsers like Chrome, you'll get an alert requesting permission even on a desktop computer or laptop that technically doesn’t have your true GPS coordinates. It does this because you can set your computer's GPS coordinates manually if you so choose.
Ensure that the app loads quickly, regardless of mobile connection
Integrating Drupal with the Leaflet.js map was one of the primary challenges since there are many ways to go about that task. The site is built to be a single-page web app, which means that all location details are loaded using a custom module AJAX request. On initial page load, the site only loads the necessary data, such as a location’s title, categories, ID, and geo-coordinates. This overview data is sent as a JSON object, which is cached using the Drupal core caching functions. This specific cache bin is kept until a location node is created, updated, or deleted. Once one of those actions takes place the cache bin is cleared and recreated on the next page load. This may not be instantaneous since Drupal’s core page caching is also enabled for anonymous users to create a faster site experience.
Development Process
In terms of development, this project took six weeks to complete. TOKY used agile project management and had milestones every week to review and test specific components of the site. The site has been functionally tested in the latest versions of Chrome, Firefox, Safari, Chrome for Android, iOS Safari, and Internet Explorer versions 8 through 11.
Outcome
At launch, the Forest Park Map received a flood of positive attention from the public and the media, including feature stories in the St. Louis Post-Dispatch and on St. Louis Public Radio.
Forestparkmap.org takes an incredible amount of information — park history, details about hundreds of destinations — and puts it in the palm of your hand.Stephen Schenkenberg, Strategic Communications Director of Forest Park Forever
148 locations plotted on map
36k+ unique visitors in the first 10 months
Why Drupal was chosen
Past GPS-Enabled Map Experience
TOKY selected Drupal after successfully using the framework to build the MIT List Visual Arts Center site, which also includes a content-rich and GPS-enabled map.
Caching Flexibility
For the Forest Park Forever project, we were attracted to Drupal's flexibility with caching. The park needed a lightweight, responsive website that would help visitors navigate the park, even with a spotty mobile connection. Drupal’s entity display modes allowed TOKY to load the exact data required for each user action with nothing extraneous. Using Drupal would also allow Forest Park Forever to feed location data to different sources in future iterations of the app.
Content Structure/Delivery Flexibility
Drupal’s field, taxonomy, and menu system allowed us to create a minimalist framework that would make it easier for Forest Park Forever staff to update the site.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Breakpoints / Picture: The location detail page is designed so that the featured image is shown as a 190x190 pixel circle for desktop users and as a rectangle spanning the width of the device for mobile users. The Breakpoints and Picture modules allowed TOKY to define eight different image sizes and crops to accommodate this switch.
Geolocation Field: TOKY used the Geolocation Field module to store the latitude and longitude of all mapped locations.
Speedy: Performance was of the utmost importance since the map would likely be used primarily on mobile devices. TOKY used the Speedy module to minify Drupal’s core JavaScript before aggregation.
ImageAPI Optimize (or Image Optimize): TOKY used the ImageAPI Optimize module to ensure that the smallest possible image files are sent to the browser. JPG/JPEG files are run through both jpegtran and jpegoptim, while PNG files are run through pngquant, optipng, and pngcrush.
Views Natural Sort: Since many of the park locations have names such as “Picnic Ground 1,” “Picnic Ground 1A,” and “Picnic Ground 10,” there was a need for a natural sorting algorithm that would prevent “10” from coming directly after “1” in location listings. While an actual View created with the Views module was not required, TOKY did use the Views Natural Sort module in a join query to create the indexed table of node IDs.
