This uniquely interactive, web-based mapping tool for the Greater Toronto Region features a map-centric interface with contextual elements which guide the user through the site and hide themselves automatically.
Neptis Foundation is a Canadian charitable foundation that funds and conducts nonpartisan research and education on the growth and change of urban regions.
Over the past 2 years with project stakeholders (Ryerson University's School of Urban and Regional Planning & geothink.ca), they had developed a prototypical website using Drupal 7 but were unhappy with its interface and wanted some help fine-tuning its functionality.
We set out to:
- Analyse the current-state web tool. We wanted to get a sense of how the tool was technically built.
- Optimise the way that Drupal and OpenLayers worked together to display both predefined map layers and user-derived geospatial annotations.
- Design a new user interface for the tool which would better focus interactions with the map and invite virtual discussion around pre-defined map configurations.
In our first meetings with Neptis on this project we walked through the current-state prototype and solicited feedback from each of their team members - using the tool both as a passive/anonymous user and whilst logged-in.
Bringing together comments on the prototype and suggestions for its improvements, we set about mocking up a new interface for the site which would:
- Collapse the existing two column layout into a single space which primarily forces the user to interact with the site's map.
- Optionally display information which contextualizes predefined maps - giving more information to users who seek it.
- Walk new users through the tool's interface.
- Relate predefined maps to each other; by housing them in 'stories' and allowing the end-user to move to the next or previous map in each story easily.
- Clearly display which layers are active on which predefined maps, improving the interactive 'legend' menu.
After presenting an initial concept to Neptis we worked through several additional rounds of design refinement which incorporated individual and team feedback.
From the final site design mockups, we developed a Zen-based Drupal 7 theme and did some additional site development work which included, but was not limited to:
- Upgrading some existing contributed modules to newer, stable versions.
- Developing some custom map views which display a plain map (with no active layers) site-wide and away from the homepage (so when a user clicks through the site to say, the Stories landing page, they see an interactive map in the background which doesn't by default have any layers other than a base layer displayed.)
- Developing the comment submission and display process to move commenting to a block area which floats on top of interactive maps and opens with jquery upon being clicked. The commentign block contains a submission form and comment listing relevant to the specific map being displayed - this is achieved by saving the map state (with layers) to an actual node.
- Theming the display of predefined map nodes to start with all non-map content collapsed - clicking on the title of a map (or the 'expand' tab) expands a transparent area on top of the interactive map which shows relevant descriptive text, an auto-referenced link back to the main Story as well as previous and next links to Maps within that specific parent Story post.
- Displaying the active layers saved with a predefined map using iconography powered by taxonomy - so admins simply tag a node to display the relevant legend items to the user. We also created a dynamic display which lists all predefined maps by that same taxonomy (i.e. clicking on say 'The Greenbelt' on a map will show all maps on the site which also display the 'Greenbelt.')
- Cross-platform testing the site to ensure that it loads on as many popular recent browsers as possible. Because of how OpenLayers was implemented, we had to add a special site display which loads a message for mobile phones and tablets instead of the full map.