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.
2.1 A map MUST NOT be included on a page UNLESS it adds value to the content and user experience.A1
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.
4.1 Geographic data provided to the map MUST be loaded in one or more of the formats specified here.A4
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).
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
6.1 It is recommended that that you SHOULD use the following map sizes only:
6.2 The inclusion of any keys, filters and lists MUST be considered when deciding the map size.
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.
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.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.
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.
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.
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).
12.1 Clusters gather and present items in a usable manner. The aim of clustering is to ensure that:
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.
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.
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.
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.
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.
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).
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.