CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Molecules

Map

A map component enables users to view and interact with geographical locations within an interface, supporting wayfinding and location-based context.

When to use

Use the map component when you need to:

  • Display a specific geographical location or address

  • Show spatial relationships between multiple locations

  • Provide users with visual context about where something is located

  • Allow users to view directions or understand proximity to landmarks

  • Enable users to interact with location data in a visual format

When not to use

Do not use the map component when:

  • The location information is not essential to the user's task

  • A simple text address would suffice and be more accessible

  • The interface is already complex and a map would add unnecessary cognitive load

  • Users are likely to have limited bandwidth or slower connections, as maps require significant resources to load

  • The primary user base relies on assistive technologies, as maps can present accessibility challenges


Best practice guidelines

  • Clear purpose: Ensure the map has a clear purpose that adds value to the user experience rather than serving as decorative content.

  • Loading performance: Optimise the map's loading time by using appropriate sizing and embedding techniques to minimise impact on page performance.

  • Interactive elements: Provide clear, accessible controls for map navigation such as zoom, pan, and full-screen options.

  • Alternative access: Always provide a text-based alternative to the map information for users who cannot view or interact with the map.

  • Responsive design: Ensure the map adapts appropriately to different screen sizes, maintaining usability across devices.

  • Fallback content: Include fallback content that displays if the map fails to load or if third-party map services are unavailable.

  • Location information: When embedding specific locations, include clear markers and ensure address information is also available in text format.

  • Visual contrast: Maintain sufficient contrast between map elements and markers to ensure they're clearly distinguishable.

  • Connection to source: Provide a way for users to view the map in its original source (such as Google Maps) for additional functionality.

Variations

Desktop

The desktop variant provides a larger, full-featured map experience with complete controls for navigation and interaction.

Mobile

The mobile variant adapts to smaller screens while maintaining core functionality, often with simplified controls to accommodate touch interaction patterns.


Accessibility

Based on the CivicTheme v1.7.0 Accessibility Assessments, the map component has been evaluated against WCAG 2.2 requirements. The following guidelines were included as part of testing and have passed both manual and automated accessibility tests:

WCAG Criterion
Level
Result

1.1.1 Non-text Content

A

Pass

1.4.3 Contrast (Minimum)

AA

Pass

1.4.4 Resize text

AA

Pass

1.4.12 Text Spacing

AA

Pass

2.1.1 Keyboard

A

Pass

2.4.4 Link Purpose (In Context)

A

Pass

2.4.7 Focus Visible

AA

Pass

4.1.2 Name, Role, Value

A

Pass

It's important to note that maps have inherent accessibility challenges. While the component itself meets accessibility standards, the content displayed within maps may present difficulties for users with visual impairments. Always provide text alternatives to map content.

Security

Maps that use third-party providers like Google Maps may have privacy and security implications. The map component is designed to:

  • Allow secure embedding of third-party map services

  • Respect user privacy by not automatically sharing user location data

  • Provide secure linking to external map providers

When implementing the map component, ensure that proper data handling and privacy protocols are followed, particularly when displaying sensitive location information.

Component inspiration and uplift

This component has been modelled after the Responsive Media component from the Australian Government Design System. Specifically, it follows elements from the Embedded Map: Responsive Media reference.

CivicTheme has uplifted the map component in the following ways:

  • All variants can be enlarged to maximise screen real estate

  • The embedded map provides the ability to view and open the map in its original source (i.e., Google Maps)

  • The embedded map also provides the ability to use native map features such as directions, zoom in and out, view larger map, and toggle between satellite, terrain and public transport layers

These uplifts were based on user research findings indicating that:

  • For various government agencies, responsive media has requirements in multiple formats, including maps

  • Responsive media in its default location in the body was limited by width constraints, making some details difficult to view

  • By opening an embedded map within its native application, it expands the features and capabilities (including accessibility) that the website may not be able to provide


User research on this component

★★★★☆ Confidence rating = High (Informed by secondary research and industry best practices)

While no direct user research data specific to the CivicTheme map component is available, the component design and functionality have been informed by established mapping interface research and best practices.

Industry research indicates that users expect maps to:

  • Load quickly and be responsive to interaction

  • Provide clear markers for important locations

  • Allow for zooming and panning

  • Offer the ability to open in a dedicated map application for more advanced features

Further user testing specifically on the CivicTheme implementation would be valuable to validate these assumptions in the context of government websites.

Known issues

  • Third-party dependencies: The map component relies on third-party services that may change their APIs or features, potentially affecting functionality.

  • Performance impact: Maps can negatively impact page load times and performance metrics if not properly optimised.

  • Mobile usability: On smaller screens, map interactions can be challenging, especially when multiple markers are placed close together.

  • Accessibility limitations: Despite meeting technical accessibility requirements, maps remain inherently difficult for users with certain visual impairments.

More research needed

More user research is needed in the following areas:

  • User preferences for map controls and feature availability in different contexts

  • Performance impact across various devices and connection speeds

  • Effectiveness of different marker styles and interaction patterns

  • Accessibility improvements that could make map information more universally accessible

  • User journey continuity when transitioning from embedded maps to external map applications

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to our map component discussion

  • Submit your user research findings to help improve the map component

  • Propose a change to the map component


Resources

  • Storybook

  • GitHub

References

  • CivicTheme Design System documentation

  • Google Maps Platform documentation

  • W3C Web Accessibility Guidelines (WCAG) 2.2

  • Digital Service Standard (DSS) - Connect Services section

Changelog

Version
Date
Changes

1.8.0

23 Jul 2024

Renamed Embedded Map: Responsive media to Map

1.7.0

20 Mar 2024

Added accessibility assessment for WCAG 2.2

1.6.0

[Previous date]

[Previous changes]

Contact us

PreviousLogoNextNavigation card

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Getting Help