Map

What is a Map?

A Map is a interactable digital representation of a physical map, i.e. a diagram of an area of land or sea showing physical features, cities and roads with controls for search and zoom.

When, and why?

A Map can be used in places like contact pages or about sections of your application to increase awareness of a location and display key points.

The Map can provide regional information that will help the user locate a particular service and calculate the distance between two markers.

Using a map

Map markers

Whenever a Map is used to show a location, a marker should be displayed on the location to illustrate effectively where the user's attention should be focused.

Map zoom

A Map should have functionality that allows the user to zoom in and out to get a wider context of the location. There should also be a zoom level included to show how zoomed in the user is.

Map cursor

While the user's cursor is over the map, it should change to a 'hand' symbol rather than a pointer to demonstrate that the map is interactable.

Uh-oh! Looks like we haven't finished building this page yet.

Come back soon, and we'll have more exciting content to share.

Component accessibility

This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.

Aria tags

Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.

Ensure that Aria tags are used as appropriate signposts throughout the product.

Colour Combinations

When designing with a Map, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Map and the background it is on. To check the contrast, please use WebAIM's contrast checker.

Focus state

A Map needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the Map.

Icons

An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.

Key Binding

A Map needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML or plugin ones. If this isn't the case then please implement logical key-binds for all intractable components.

Movement/Animation

Please refer to the WCAG guidelines for the time-based considerations for animations.