Maps

[govuk-design-system]

What

How and when to use mapping interfaces. How to make sure that information in maps is accessible.

Example of "Find apprenticeship training" service

Why

Services that use this pattern:

• Flood warning
• GOV.UK Foreign Travel Advice

Anything else

• Read the draft guidance on Dropbox Paper

[joelanman]

There don't seem to be any government services using maps yet - the apprenticeships example above is a prototype, and doesn't appear to be live (yet?)

[NickColley]

Then Flood information service have an excellent example of using maps with alternative ways to view the same information to overcome the inherent accessibility issues with maps.

https://flood-warning-information.service.gov.uk/warnings

[joelanman]

Excellent, thanks @NickColley !

[timpaul]

The Rural Payments service has mapping elements, but it's all behind a login: https://www.gov.uk/claim-rural-payments

[kr8n3r]

please tell me the other one is Google Maps :)

[dannyleech]

Thanks @NickColley, we have been doing more work with maps since but still early prototypes. In addition to giving them a more gov.uk style we've been exploring the following...
Map interactions; keyboard access; fullscreen and browser history, feature presentation plus more. The big challenge is accessibility though. We have done limited testing so far but have more planned.

Here's a couple of screens. Drop me an email I can send login details.

[suryanaga]

We did some work around maps and helping people understand Parking Permits zones on the Verify Local project. In particular we made sure the right information was also available in text, making the map a progressive enhancement. https://verify-local-patterns.herokuapp.com/service-patterns/parking-permit/check/design

[frankieroberto]

The Flood map for planning service displays flood data on a map, using an overlay on Ordnance Survey tiles, with a legend:

[frankieroberto]

The Find and compare schools in England has a feature to view the search results on a map (vs list) via a toggle. It uses Google Maps, with a custom overlay (with markers being "clustered" when close together):

[frankieroberto]

The Teaching jobs service displays maps on the individual job listing pages: