Future Media Standards & Guidelines

Use of Maps Standard v1.1

1. Introduction and scope

This standard explains which mapping providers you MAY use on bbc.co.uk sites, and gives requirements and guidance on their implementation. Mapping providers are third parties who supply interactive mapping solutions for websites; for example, Microsoft Bing® Maps (MS Virtual Earth). This document aims to cover static and interactive maps.

The Mapping UX Working Group has created a consistent set of icons and tools that can be laid over the top of whichever mapping provider has been chosen. For further information about the work this group is doing, refer to the Mapping and Neogeography wiki site.

Top of page

2. When to use a map

2.1 A map MUST NOT be included on a page UNLESS it adds value to the content and user experience.A1

Top of page

3. Mapping providers and how to use them

3.1 You MUST use Bing® Maps (Microsoft Virtual Earth) as your interactive mapping provider.

3.1.1 For guidance on implementing Bing® maps, you MUST contact your product lead.A2

3.2 At present, you MUST NOT use Google Maps on bbc.co.uk.A3

3.3 If you are considering using another mapping provider, you MUST apply for an exemption to this standard, please contact your product lead who can advise on legal requirements and third-party hosting requirements. See also Third Party Hosting Requirements Standard.

3.4 For static, or BBC-developed map applications, the BBC has further agreements allowing us to use other providers such as Ordnance Survey®. Again, please contact your product lead for more details.

3.5 Maps MUST be abstracted from third party providers using the Mapping Tool Kit.

Top of page

4. Data formats for mapping content

4.1 Geographic data provided to the map MUST be loaded in one or more of the formats specified here.A4

  • Temporal formats: where data items can be associated with a precise time e.g. user comments or news stories:
  • GeoRSS or GeoAtom (same standard) – content, titles, dates can be represented using the RSS or Atom standards. More custom data structures can be specified by using namespaces
  • GeoJSON – custom data can be added using the 'properties' member
  • KML – can include more custom data using KML’s tags or namespaces as in RSS/Atom

If you want to use other formats e.g. gml or gpx, please contact your product lead.

4.2 If a more sophisticated data structure is required than geoRSS, namespaces SHOULD be employed.

4.3 If further data structures are required, an existing XML standard/ontology or JSON standard SHOULD be used, rather than creating a custom one from scratch (e.g. the Dublin core metadata standard).

Top of page

5. General UX

5.1 When creating a dynamic map you MUST use the design patterns created by the Maps UX team. Available PDF patterns include (large files which may not download immediately):

Design assets are also available for some patterns, please contact the Maps Design Working Group.

5.2 The quantity of data loaded on a map MUST NOT compromise user experience. Both download speed and the ability of the average user's computer to process the number of points SHOULD be considered.

5.3 If during a browser session the user has changed the initial zoom level and position of a map and then navigates to another page, on return the map SHOULD NOT have reset itself. This rule applies per session rather than across multiple visits.

5.4 Vertical scrolling of maps MUST be avoided.A5

Top of page

6. Map sizes

6.1 It is recommended that that you SHOULD use the following map sizes only:

  • Extra small 304px × 304px;
  • Small 384px × 384px;
  • Medium 464px × 352px;
  • Large 784px × 448px;
  • Extra Large 944px × 528px (full width, no left hand nav)

6.2 The inclusion of any keys, filters and lists MUST be considered when deciding the map size.

Top of page

7. Pinpoints

7.1 Pinpoints MUST only be used to indicate content that is published within a specific location on a map.

7.2 The minimum clickable area of a pinpoint MUST be at least 15 pixels vertically and horizontally.

7.3 When a user clicks on a pinpoint, it MUST trigger an info-panel or a panel. It MUST NOT take the user directly to another page.

7.4 A clustering mechanism that groups multiple pinpoints into a single pinpoint SHOULD be made available if pinpoints are within 4 pixels of one another.A6

7.5 Clustered pinpoints SHOULD also have a minimum of 4 pixels gap with other pinpoints on the same layer.

7.6 A clustered pinpoint SHOULD, when clicked, provide a facility to allow the user to zoom in to the unclustered content.

7.7 If it is impossible to disambiguate clustered pinpoints any further, because there are no more zoom levels or because they occupy the same space, then the items represented by the cluster SHOULD be represented in the form of a list, see the pinpoints design pattern.

7.8 All pinpoints SHOULD be brought forward when hovered over, this is to allow easy access for overlapping pinpoints.

7.9 When a user hovers over a pinpoint, it SHOULD display a tool tip.

7.10 When using balloon pinpoints you SHOULD use the colours specified in the balloon pinpoints asset, these have been colour contrast and colour blindness tested.

Top of page

8. Info-panels and their contents

8.1 Info-panels MUST only be used for small quantities of information, and lead-ins to further information.

8.2 You MUST limit the amount of content that is displayed within the info-panel.

8.3 Any info-panel that is associated with a pinpoint MUST display on click rather than on hover.A7

8.4 You MUST use the BBC Javascript library (Glow) info-panels rather than those of native providers.

8.5 Info-panels MUST expand when text is made larger, rather than become scrollable.

8.6 You MAY directly link out to another page from a link within an info-panel.

Top of page

9. Panels and their contents

9.1 You MUST use the BBC Javascript library (Glow) panels rather than those of native providers.

9.2 Panels MUST be used to play audio or video content and to display large quantities of text. (add reasoning here).

9.3 If you want the user to be able to continue to listen to or watch audio/video while using the map you MAY use the 'launch in pop-up' function of the EMP.

Top of page

10. Controls and buttons

10.1 Images used to represent controls and buttons MUST have title tags and a hover state.

10.2 The navigation interface (panning control) MUST smoothly move the map by one third of the visible area when activated.

10.3 There MUST be a clearly identifiable reset button to allow the user to return to the initial map view.

10.4 If the map is one of several elements on the page, the mouse wheel SHOULD control the scroll of the browser page not the zoom control of the map.

10.5 When creating a javascript map, the buttons MUST be constructed using a background graphic with HTML text.

Top of page

11. Map Keys and Filters

11.1 It is recommended that keys SHOULD be placed either above or to the left hand side of a map.A8

11.2 Keys MAY include checkboxes that allow filtering of map content, e.g. by selecting audio and video icons from the key only these items of content SHOULD appear on the map, all other content SHOULD be hidden.

11.3 The clickable area of keys containing filter mechanisms MUST encompass the checkbox, iconography, and full label.A9

11.4 Filters SHOULD also control whether items are shown or hidden within clustered pinpoints and the info panels attached to these clustered pinpoints.

11.5 Filters SHOULD also control whether items are shown or hidden within lists (see section 14 for more info on lists).

Top of page

12. Clustering of map contents and iconography

12.1 Clusters gather and present items in a usable manner. The aim of clustering is to ensure that:

  • There is a minimum distance between pinpoints shown on a map;
  • Pinpoints do not overlap;
  • Pinpoints which are exactly coincident can still be reached by the user.

12.2 An option to enable and disable clustering SHOULD be given.

12.3 Clustering is a completely automatic function, if the key focus of the map is lost by clustering then it SHOULD be switched off.

12.4 Clustered pinpoint icons SHOULD communicate the number of items clustered within the pinpoint, and providing the content is not mixed, SHOULD indicate the type of content, e.g. audio, video, etc.

12.5 Clustered pinpoints SHOULD, on click, present the user with a paginated list of items. This list SHOULD contain no more than 6 items per page.

12.6 Clustered pinpoints MUST only present an info panel when clicked (see section 8 for info panel requirements).

12.7 Cluster info panels MUST be set to a fixed height and width to provide a consistent and accessible user experience.

12.8 When creating a javascript map, the cluster icon MUST be constructed using a background graphic with HTML text for the labels.

Top of page

13.1 In addition to browsing a map, users SHOULD be able to search and find by typing the required item into a search box.

13.2 The search box MUST be prominent and positioned close to the map, showing a clear association between the two.

13.3 By default the search box SHOULD offer contextual help, once a user begins typing this text MUST disappear.

Top of page

14. Lists

14.1 Lists allow users to quickly scan the content associated with a map. Lists MAY be positioned left or right of the map.

14.2 A list MUST remain the same depth as its corresponding map, this can be made possible with the inclusion of a vertical scrollbar. The appearance of the scrollbar SHOULD be browser specific.

14.3 Lists SHOULD be used when a factor other than location is considered more useful, e.g. the price of a house or date of an event.

14.4 Pinpoints within lists MUST maintain a default state until selected (see pattern for more detail).

14.5 Pinpoints associated with an open info panel or panel, MUST show as selected in the list, even if this pinpoint can no longer be seen in the map area.

14.6 Items selected on the map MUST be shown as selected in the list. However, the list MUST NOT move up or down as a result of this action.

14.7 Summary text MUST be kept brief.

Top of page

15. Locator maps

15.1 A locator map SHOULD be used for maps that are 384 pixels wide and larger.

15.2 If included, a locator map SHOULD always appear in the bottom right hand side of the main map

15.3 Locator maps SHOULD be collapsible but SHOULD appear open when a user first visits the page.

15.4 Locator maps SHOULD contain a marquee box which SHOULD be centred within the locator map box. See DPL pattern for mor info

15.5 The marquee box MUST reflect the visible area of the map.

15.6 Locator maps MUST be draggable and MUST have a direct effect on the entire map area when dragged.

Top of page

16. Accessibility and Usability

16.1 For any content used on a map there MUST always be a link to the content in an accessible format, in accordance with the Textual Equivalents Standard.

16.2 The tools and assets that can be found in the BBC Design Patterns Library MUST be used to support the functionality of the map used.

16.3 The elements of a map first loaded in the page MUST fit within the limits laid out in the Page Download Standard.

16.4 It is recognised that map applications contain large quantities of Javascript, related assets and files containing data. These elements MUST be post-loaded dynamically, with feedback given to the user while loading.

Top of page

17. Glossary

17.1 Controls - the set of buttons used to manipulate a map

17.2 Cluster - Group of more than one point represented as a single point

17.3 Info-panel (other terms: infobox, pop-up) - quoting Glow: 'A box on top of other elements, pointing to a particular element'.

17.4 Key (other terms: legend) - a further explanation of particular icons/visual elements used on the map.

17.5 Layer - Set of pinpoints, e.g. the set that is turned on and off when you click on a checkbox. Flow call the checkboxes 'filters'.

17.6 Panel - A box on top of other elements on the page. For example, Panel can be used as a substitute to popup windows and alerts, or to display large images.

17.7 Pinpoint - (other terms: marker, point) - the icon is the visual representation that can be changed. Microsoft think of a pinpoint as simply being the point version of a 'shape' (other versions being polyline and polygon).

Appendix A: Why

  • A1. Don't just include a map because you can. Carefully consider whether a map is the best way to display information. Consider the experience from the user's point of view – would it be more useful to see content in another format, e.g. as a list? Also remember that inclusion of a map on your page can significantly affect page download times.
  • A2. The BBC is currently in negotiations with other mapping providers. This standard will be updated to permit the use of other mapping providers when this is possible.
  • A3. This is because the standard Google Maps terms and conditions are not suitable for use on the BBC website.
  • A4. All of these formats support the addition of non-geographic content.
  • A5. For the best user experience maps should be kept above the fold wherever possible.
  • A6. This is for usability and accessibility reasons (e.g. motor control) and is scoped per layer, as individual layers can be turned on and off by the user.
  • A7. This is because of accessibility concerns such as motor control and distraction through flicker.
  • A8. User testing has shown that this is where users normally expect them to be.
  • A9. User research shows that people interact with filters in a variety of ways, this is also necessary to help users with motor disabilities.

Top of page

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.