Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maps #75

govuk-design-system opened this issue Jan 15, 2018 · 29 comments

Maps #75

govuk-design-system opened this issue Jan 15, 2018 · 29 comments


Copy link

@govuk-design-system govuk-design-system commented Jan 15, 2018


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

Example of "Find apprenticeship training" service

screen shot 2018-02-21 at 09 00 41


Services that use this pattern:

Anything else

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 15, 2018
Copy link

@joelanman joelanman commented Apr 5, 2018

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?)

Copy link

@nickcolley nickcolley commented Apr 5, 2018

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.

Copy link

@joelanman joelanman commented Apr 5, 2018

Excellent, thanks @nickcolley !

Copy link

@timpaul timpaul commented Apr 9, 2018

The Rural Payments service has mapping elements, but it's all behind a login:

Copy link

@kr8n3r kr8n3r commented Apr 9, 2018

please tell me the other one is Google Maps :)

Copy link

@danleech-defra danleech-defra commented Jun 26, 2018

Thanks @nickcolley, we have been doing more work with maps since but still early prototypes. In addition to giving them a more 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.


Copy link

@sanjaypoyzer sanjaypoyzer commented Aug 21, 2018

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.

Copy link

@frankieroberto frankieroberto commented Oct 3, 2018

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


Copy link

@frankieroberto frankieroberto commented Oct 3, 2018

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):


Copy link

@frankieroberto frankieroberto commented Oct 4, 2018

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


Copy link

@frankieroberto frankieroberto commented Oct 10, 2018

Here's an example from the Check if you can get legal aid service:


(The map itself currently has a "development purposes only" overlay due to the Google Maps pricing model changes)

Copy link

@frankieroberto frankieroberto commented Oct 25, 2018

The Search property information service displays a map on property pages:


It uses the Leaflet javascript library and the default OpenStreetMap tile server.

Copy link

@frankieroberto frankieroberto commented Oct 25, 2018

The Find an apprenticeship service includes maps on the search results page and the individual listing pages:


These all use Google Maps.

Copy link

@fofr fofr commented Oct 26, 2018

We're trialling a variety of Google Maps styles in user research at the moment for finding postgraduate teacher training. We want to show courses on a map so their locations can be more easily compared, the user need is around choosing a course with a manageable commute.

screen shot 2018-10-26 at 11 45 13

We've found that:

  • users preferred a full screen map to a boxed one (like schools performance use), it let them see street names and landmarks they know more easily, they could orientate themselves faster. We thought this might have some negative affects – the page is quite different, but users seemed familiar with this kind of map layout
  • using pins alone meant that users would open and close and move between pins but would forget which course was which on the map, it was hard to go back to something they'd seen before – we've switched to using text instead of pins
  • we added radius circles with labels "5 miles", "10 miles", and these tested well for quickly gauging a distance, it also led users to consider some pins they'd have otherwise thought were "too far"
  • we've tweaked the Google map style to remove business points of interest to make the map clearer (we've kept transits and landmarks as users are more likely to relate to these)
  • to save space, when the pop-up window is shown we don't keep the initial label
Copy link

@frankieroberto frankieroberto commented Nov 12, 2018

The Life in the UK test booking service includes a maps to help users pick a test location:

life in the uk test booking

Copy link

@pripley-ea pripley-ea commented Nov 13, 2018

Future map for Marine Planning.

Here the key is part of the layer menu and the colour swatches are numbered so people with deuteranopia or protanopia (green or red colour blindness) can still read the map.

Previous design iterations had the key in a tab as the list can be quite large however we found users missed this. Having the key as part of the layer menu was readily understood by users.

We used the GDS colour safe palette where possible. In instances where more swatches were needed then Ordnance Survey also have developed a colour safe palette for further options. These can be adapted for our own purposes and changed to suit, testing for colour blindness in Photoshop and with users.

Copy link

@nay-creative nay-creative commented May 20, 2019

Apply layers 5
Review data attribute 1 - metadata
Zoomed out - 2

Beta sketch prototype for Marine Planning
These screens are the latest versions of the marine planning service (following on from Paul's post above)

With a better understanding of the uses of the service, we now know that users of this tool do so to complete two separate tasks:

  1. Interrogate map data
  2. Review marine plan policy

Here the key/legend is presented with the data list and then presented as a separate key on the map when the list is not present. Clearing the selections and starting again will be easy as users will have a 'clear all' button.

The 'draw polygon' page is the way into the policy and the system will not return results without a drawn boundary. Testing showed that optional guidance copy here helps the user to better understand how to use the tool.

Myself and the team whole-heartedly welcome any and all feedback on these screens!

PS: We would also like some feedback on our potential list of names for this service

Find marine plans
Explore marine plans
Find marine information
Explore marine information
Find marine planning information
Explore marine planning information

Many thanks

Copy link

@JoeHMLR JoeHMLR commented May 22, 2019

Very interesting choices re the key.

Our own experience matches yours, where a separate tab was not an effective solution as users kept missing it.

Incorporating the key on the map itself led to a different problem when some users to attempted to interact with it, mistaking it for the plotting controls on the top of the map display (it wasn't a drop-down). We didn't try incorporating it as part of the layer menu for fear that the same issue would occur, so it's interesting to see that in your testing this issue didn't arise.

The link to guidance option is similar to the approach we settled on, and in live service did evidence improvements in the user experience (reduced time spent on plotting) for LLC.

Finally, I'd suggest...on the basis only of anecdotal rather than quantifiable evidence that Find may work better than Explore, when helping users identify the service (our own professional users tend to search for specific datasets, and Find has a more focused emphasis than Explore. YMMV on this though, and it could be your own users will have different expectations.

I think the screens are looking very nice :)


Copy link

@frankieroberto frankieroberto commented May 23, 2019

@nay-creative interesting developments! Looks good to me.

I would be tempted to include the colour and the full label from the key (eg "High intensity nursery grounds" rather than just "H") within the panel on the left when you select a particular area. That way people may start to get a sense of what the colours mean even if they don't open or look at the key?

As for name, my hunch would be to use "Find" rather than "Explore", on the assumption that most users are looking for some specific information rather than just general interest? I'd possibly avoid using "information" in the name, as that’s quite generic and doesn’t really communicate much (everything is information)? On that basis, "Find marine plans" sounds best to me – but that's a complete outside view!

Good luck!

Copy link

@DavmonUXROS DavmonUXROS commented Jul 1, 2019

Services With Maps - Cross Government Meetup - Edinburgh

Registers of Scotland are hosting the second Cross Government Meetup for Services With Maps on the 29th of August 2019 in our Edinburgh office at Meadowbank House.

We want to bring together the speakers and practitioners working in this space to share research, techniques, tips, hands-on practical skills and case studies from the field.

Specifically for this second event we hope to be able to provide some presentations and/or updates on three of the biggest topics that came out of the first meetup. These were:

· GOV standards and design patterns
· Accessibility
· Maps on mobile devices

Call for speakers

We’re looking for some speakers from this community to do some short presentations – sort of lightning talk stuff, 15 to 20 minutes long.

So if you’ve been working with maps please come and share your challenges, problems, war stories, findings or insights with the rest of the community.

Please email me directly if you wish to do a short presentation. The closing date for submissions is the 31st of July.


Please let us know if there are any specific requirements you have or if there’s anything we can do to help you take part in this event.


These are available through Eventbrite

There is a limited amount of 50 available.

The closing date for tickets is the 8th of August.

Copy link

@harry-wood harry-wood commented Jul 15, 2019

If we're talking about standardising towards something I would certainly hope to see favour Ordnance Survey or OpenStreetMap over Google Maps.

Of course the good old Ordnance Survey offers wonderfully detailed and accurate maps of our nation, and no longer quite such painful licensing arrangements, meanwhile OpenStreetMap is a not-for-profit free and open map provider which was also born in the UK.

Pragmatically, at a basic javascript level, there is an early fork in the tech decision tree between Google Maps or LeafletJS-based map development. The latter may be less familiar to many developers, but gives lots of freedom and flexibility.

Within the (largely free and open source) ecosystem of OpenStreetMap technologies, you get huge power over map presentations and even the ability to host a whole vector/raster rendering stack yourself. Options for this (e.g. things like OpenMapTiles) would let you look into designing a custom map style as part of the design standards. I'm imagining stripped down black-n-white style maps fitting with the website style (a bit like positron or toner styles). This might also include style variations geared towards vision imparements for greater accessibility.

Copy link

@charleyglynn charleyglynn commented Nov 16, 2020

Hi all,

I am a Product Manager at Ordnance Survey and pleased to report here that access to OS APIs will be free to Public Sector from Jan 2021. Now feels like a good time to promote the upcoming APIs - we are keen to support the efforts toward a consistent mapping capability.

OS Maps API provides pre-rendered map tiles in 4 styles and is available in 2 projections (British National Grid and Web Mercator) via OGC WMTS and ZXY.

OS Vector Tile API provides the same mapping but in a more lightweight, customisable format. As @harry-wood mentions above, this would allow us to create a style to fit the design system - OS cartographers could support this effort.

Please check out our copy and paste code examples created by @johnx25bd and @tmnnrs - these show how the OS APIs can be used in a variety of mapping libraries.

As you can imagine, we also have design patterns for different map interactions and would be happy to support further.

Copy link

@teddmason teddmason commented Dec 4, 2020

@charleyglynn Hi Charley,

I'm lead developer on the flood information service, we host flood warnings and alerts here: which we are looking to phase out with a full service refresh that is currently in beta here:

We currently use a Bing license for our background tiles and geocoding requirements. looks like a really good offering for public sector use, and I really appreciate the need for standardising mapping. However the throttling on the api is where we would have an issue:

– All our API data (OS OpenData and Premium) are subject to a 600 transactions-per-minute throttle for your live projects. This is equivalent to 100 concurrent users requesting a computer-screens worth of map tiles every 10 seconds. More about throttling in our FAQs.

At our peak we have had 20,000 concurrent users, all of whom will have made mapping tile requests, and a majority of whom who would have made geocoding requests. Do you have any solution to this?

And also what is the support wrapper around the service, is it 24/7 and gold? I implemented some of the ordnance survey on Demand apis to a couple of our other services over the last 3 years, and we had a few instances where we had deprecated service and availability.


Copy link

@charleyglynn charleyglynn commented Dec 17, 2020

Hi @teddmason

Thanks for your interest. The new flood warning beta service looks great - some big UX improvements there 👍

Do you have any stats on your map tile requests per minute during an average day but importantly during a peak?

PSGA Members on the Authorised List i.e. Emergency Services under Category 1 responders, will have unthrottled access to all OS APIs, and this is also available to any member during a period of emergency response.

We have OS Names API (settlment names, postcodes, road names, railway stations and more) and OS Places API (detailed address data) for geocoding.

All our APIs have an SLA of 99.9% availability and we have 24/7 support.


Copy link

@charleyglynn charleyglynn commented Jan 18, 2021

Just looping back here as the OS Data Hub and APIs were launched for Public Sector last week.

More information available here:

If you are a PSGA member, you can sign up and get started with the 'Public Sector Plan' here:

Copy link

@CharlotteDowns CharlotteDowns commented Feb 19, 2021

Department for Environment, Food & Rural Affairs has been working on a set of Map standards and starting to solve some of the problems around maps.

Particularly accessibility issues.

Copy link

@msmithcti msmithcti commented Mar 22, 2021

On the Report wreck material service (Maritime and Coastguard Agency) we're using maps in a couple of ways that might be of interest.

Firstly, as an input device. We capture the location an item of wreck material was found from the user. This might be a very specific location defined by coordinates (in the majority of cases) or some cases may be vaguer. For the more vague situations, we've used Leaflet to prototype map based input of a coordinate and radius:
Screenshot 2021-03-22 at 14 13 00

Our research has found users have valued this input approach when compared to having to construct a description of what can often be vague locations on the seabed. In terms of the teams processing the reports, a specific coordinate and radius are often better than the poor descriptions that are sometimes provided.

Our second use for maps is within "Check your answers". Whichever method of entering a location has been used we display this alongside a map. During our research, our users have highlighted how this helps them cross-check the coordinates they've entered (where a single digit can move the point 100s of miles on the early) against the map to ensure it's in the region they were expecting:
image (8)

As has been mentioned elsewhere in this backlog item, there are a number of accessibility challenges that we're working through with these two use cases.

Copy link

@frankieroberto frankieroberto commented Mar 22, 2021

@msmithcti interesting, thanks! Have you looked at how well the interface works on mobile or touch screens? And how are you picking which map background service to use?

Would be great it you could share any findings from your accessibility work on this too!

Copy link

@msmithcti msmithcti commented Mar 24, 2021

@frankieroberto the drawing interaction isn't perfect on touch devices but it's certainly passable. When using a pointer you're able to place the circle and define the radius of it in a single, fluid motion. On touch, you're able to place the point but then have to edit it to get finer control over the position and radius.

In terms of map tiles, at the moment we're simply using OpenStreet map. We have discussed the use of nautical chart tiles as something to look into in the future. That is tricky in itself as our users could be a beachcomber who finds something on a beach, where a "land" map is more relevant.

We'll be sure to share our findings on accessibility once we've done some more detailed testing and improvements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet