Finding Bicycle Rides in Maine

The search page, in desktop view. The search UI is mobile responsive, with the search bar collapsing into a full-page modal window.

Search results, displayed as a list view.

The page showing a ride's details. Points of interests, links and downloads, a photo slideshow, and a comments system.

On mobile, the search UI takes full width and presents more like a full-screen modal.

Client: The Center for Community GIS

See This Project | Similar Projects | All Projects for Client

The Bicycle Coalition of Maine (BCM) promotes bicycling and walking throughout Maine. This includes advocating and training for bicycle and pedestrian safety, organizing of group riding events, and acting as a clearinghouse for bicycle-related events and resources. GreenInfo Network was asked to develop Where To Ride, a BCM-branded microsite for finding bicycle rides and events.

In 2017, the Bicycle Coalition of Maine's project partner, the Center for Community GIS (CCGIS - also based in Maine), contacted GreenInfo Network to implement the Where To Ride website which consists of three components:

An administrative back-end, where BCM and CCGIS personnel would manage the list of Rides, including management of the rides' routes and points of interest relevant to each ride.
A front-end site to search for rides by the surface. mileage, and other criteria.
Individual pages showing details for a ride; this would include a slideshow, a map showing the ride route and points of interest, have GPX and KML downloads, and a comments system

For the server framework, Django was chosen for its rapid development and robust object-relational mapper. MapServer was chosen for display of ride paths, for its ability to quickly render very large volumes of line data very quickly.

Management of rides is done in two parts, custom crafted to fit the workflow of the GIS staff at CCGIS and BCM. A ride's path and a set of points of interest are collected in desktop GIS, where they merge road and trails data and provide manual curation. The route and the points are saved as KML files which are uploaded into the website's ride-administration UI. This admin UI is then used to populate further details about the ride: the automatically calculated length, descriptions, and photos. The end result will be the ride's details page, featuring a slideshow, a map of the route and POIs, and links to download the route and POIs in KML and GPX formats.

The front end pages for searching for rides and for displaying details for a single ride, are written in AngularJS version 2. The site is very mobile responsive, involving much custom work such as the search panel turning into a full-screen modal window when used on mobile, and to create customized visible scrollbars on mobile since iOS and Android do not show scrollbars visibly. Google Maps was chosen for the map components, to keep in branding with BCM's other websites and offerings. The overall colors, fonts, design, and branding involved close work with the client to match styles to that of the parent site as closely as possible.

Focus: Environment, Human Services, Public Health, Recreation

Services: Interactive Solutions, GIS Services, Data, Maps, Applications Development, Web Mapping, Website Design, Mobile Applications

Tags: Maine, trails

Project Years: 2017