Maps allow you to show data relative to a physical location.
Use a map when your users need to see the location of things relative to each other - for example locations where they can access a service.
Test your solution
Maps can be a challenge for users on small screens, so it is important to carefully consider if it brings value to your product or service. Ensure on mobile, users can still scroll the page by keeping the map’s aspect ratio different to the user’s screen.
Provide a text-based alternative
Do not rely on users being able to use a map. Make the content available without using the map by offering a text-based alternative.
Allow spacing around the map area on mobile devices to ensure users can scroll past map and give an option to close or minimise the map option where appropriate.
To ensure users have a consistent and smooth experience with the map interface:
Markers are used to indicate relevant data points for the user to focus and interact. When a user selects a data point, it should centre on the map and it’s listing should move to the top of the results. On selection, a pop up can also be triggered to provide a snapshot of the data point and link to further information (if requried). Pop ups should be dismissable by the close icon and also close when an alternate data point is selected.
When implementing data points:
Filters allow a user to narrow down the visible data points by their requirements - for example the location or available facilities. Fields labels should be descriptive and clearly identify the input required of the user (ie. postcode, suburb or full address).
When a user selects a result from the listing, it should move to the top of the results and centre the data point on the map with an active pop up (if applicable). Use title of the result to link user to further information.
When displaying results, consider what information is important to the user and what they require to make an informed decision.
When displaying results:
Maps in NSW Government should have a consistent look and feel. Configure your map to use the following styles.
Use pins, cirlces or lines to represent data points. Markers are implemented using a hosted marker generator. We’ve created a sample set in Figma that can used to show example styling to developers.
Colour: The reccomended colour set is Blue 02, Red 02 and Grey 02. When using pins and circles you can also use an outline to ensure contrast with the map interface. If additional colours are required from the NSW Governement colour palette, be mindful of users with colour blindness and test to ensure sufficient contrast.
Icons: Icons can be used to highlight specific offerings of a data point. Use familiar and easily recognisable icons.
Pop ups: Where possible, align your pop ups to NSW Governement visual langauge. This can be done by:
We recommend using a well supported maps platform, such as mapbox or leaflet.js.
When adding markers, use a generator to make sure you have the flexibility needed. We've used Mapbox in our demo which contains an icon generator. If you're using leaflet, MapMarker.io is a publicly available (CC licence) resource to generate markers on-the fly, or the SVGs below can be modified in figma.
Use hex colours from the NSW Brand Palette, and work with designers if you've not been given specific colours, as your branding colours may be different to NSW corporate branding.