Add vocabulary for location type for icon display with legend filter

Problem/Motivation

Currently Debut Location displays a single icon per location. In some cases it's desirable to be able to classify locations and display icons according to location type. However, doing so raises the need for a legend to identify icon types. Ideally, such a legend would include the ability to turn on or off each location type.

Proposed resolution

Adding this functionality requires a set of changes and enhancements, some involving custom coding to improve usability.

Basic solution

• Add a new vocabulary, location_type. Assign the vocabulary an image field, location_type_icon. This vocabulary will be used to create location types with associated icons.
• Add location_type taxonomy term field to location content type.
• Edit location_map view. Add an exposed filter for location type, using the location_type vocabulary. Configure exposed form to display in a block. For improved usability, use Better exposed filters to render the exposed filter as nested checkboxes.
• Via a context, display location_map view exposed filter form block in a sidebar on the location_map views page.
• In location_map view, add relationships on the location_type field and its file usage, then add the file path field. This is the field that will be used to display icons.
• Add new openlayers style, location_type. Under Style properties > External graphic, use ${uri_rendered}, referencing the views field.
• Edit location_map openlayers map. For "Location map data" layer, select "Location type" for both "Style" and "Select style" so that the new style layer will be used for icon display.

Adding icons to the exposed filter

By default, an exposed filter contains the name of each term but not any other field info. In this case, we need to display the icon for each term so that the exposed filter serves as a map legend.

• Configure a view of type taxonomy term, location_legend, with rows for the term ID and the path to the location icon.
• In hook_form_views_exposed_form_alter() in debut_location.module, add a basic CSS file and then programmatically execute this view to render CSS that will add the icons (one per form checkbox).

Usability enhancements for the exposed filter: tree menu

If the location_type vocabulary is nested and contains many terms, the exposed filter is too long for easy reading.

Implement client-side javascript list tree such that:

• All nested trees are initially collapsed.
• A plus is displayed next to collapsed items. Clicking it expands one level of the tree and switches the parent's icon to a minus sign, which can be used to collapse the level.
• A cookie is set and used for persistence, such that when the page reloads (e.g., after a filter submission) it retains its previous collapse state.

Investigated various existing jQuery menu tree scripts, including those that ship with several existing Drupal modules, but didn't find one that was appropriate. jstree initially seemed to work, but had a conflict with OpenLayers (when an openlayers feature was clicked, all menus expanded and then collapsed.) Instead wrote a small custom script.

Usability enhancements for the exposed filter: checkbox syncing

Using taxonomy term with depth allows selecting all of a class of terms by parent term. Sample tree:

Social
  daycare
  playground
Environmental
  tree
  pond

If "Social" is checked, locations tagged with any of its subterms will show on the map. However, depth support introduces some usability challenges. E.g., to show only "daycare" sites, "Social" must be unchecked.

Implement client-side javascript to sync parent and child checkboxes such that:

• If a parent checkbox is checked, all its children are checked.
• If a parent checkbox is unchecked, all its children are unchecked.
• If any child checkbox is unchecked, its parent is unchecked.
• If any child checkbox is checked and all of its siblings are already checked, its parent is checked.

Remaining tasks

User interface changes

Maps get icons and a location type legend.

API changes