The map consists of the underlying basemap, the data on the map, as well as a number of other features.
Basemaps
There are 2 options available for the underlying map.
Navigation Map
This is the most common basemap, and is used for displaying single points (pins) on a map)
Grey Map
This is used when there is more complex information such as shapes or lines. It is also used when there are more than 3 colours of pins.
Map Locations
Locations can be represented as points, lines or polygons. The most common location type is a point or pin.
Pins
Pins represent a single location on the map.
It is recommended that the same colour & icon are used for all pins for accessibility as it is hard to distinguish colours & icons.
The default colour for pins is blue. If multiple colours are used, the max number of colours is 6 from the available colour set.
Colour values:
| Code Block |
|---|
REDDark Red rgb(165,61,64) #a53d40 Dark BLUEBlue rgb(13,109,166) #0d6da6 Dark GREENGreen rgb(121,136,47) #79882f BLACK Dark Purple rgb(97,65,113) #614171 Orange rgb(214,71,52) #d64734 Pink rgb(255,150,234) #ff96ea Black rgb(0, 0, 0) #000000 PURPLE Gray rgb(9795,6595,113) #614171 ORANGE rgb(214,71,52) #d64734 |
95) #5f5f5f
White rgb(255,255,255) #ffffff |
Clustering
When the map is zoomed out, the pins are clustered to make the map easier to view and reduce load times
Lines
Lines are used for linear shapes such as road segments.
When using many colours, line weights and dashes should be considered as well.
Polygons
Polygons are used for shapes such as a ward or neighbourhood map.
Additional Map Features
Legend
Some maps require a legend if there are multiple colours or styles on the map.
The legend appears between the filter and the map.
Show Map toggle
Show Map toggles the map on or off.
This accessibility feature lets users hide the map and go straight to the list while still being able to use search & filters on the list.
Map is usually On by default. There is an option to have map Off at the start
Features Toggle
These are additional layers that the user can choose to turn on or off.
Appears in bottom left corner.
Can be minimized
Some layers may not display until user is zoomed in
Examples include
Ward outlines
Bus routes
Subway stations
Zoom In / Out
Appears in top left corner
Always available by default
Zoom levels (how far you can zoom in/out) can be customized
Maps of a single location may have zoom buttons removed
The map consists of the underlying basemap, the data on the map, as well as a number of other features.
Basemaps
There are 2 options available for the underlying map.
Navigation Map
This is the most common basemap, and is used for displaying single points (pins) on a map)
Grey Map
This is used when there is more complex information such as shapes or lines. It is also used when there are more than 3 colours of pins.
Map Locations
Locations can be represented as points, lines or polygons. The most common location type is a point or pin.
Pins
Pins represent a single location on the map.
It is recommended that the same colour & icon are used for all pins for accessibility as it is hard to distinguish colours & icons.
The default colour for pins is blue. If multiple colours are used, the max number of colours is 6 from the available colour set.
Colour values:
| Code Block |
|---|
RED rgb(165,61,64) #a53d40 BLUE rgb(13,109,166) #0d6da6 GREEN rgb(121,136,47) #79882f BLACK rgb(0, 0, 0) #000000 PURPLE rgb(97,65,113) #614171 ORANGE rgb(214,71,52) #d64734 |
Clustering
When the map is zoomed out, the pins are clustered to make the map easier to view and reduce load times
Lines
Lines are used for linear shapes such as road segments.
When using many colours, line weights and dashes should be considered as well.
Polygons
Polygons are used for shapes such as a ward or neighbourhood map.
Additional Map Features
Legend
Some maps require a legend if there are multiple colours or styles on the map.
The legend appears between the filter and the map.
Show Map toggle
Show Map toggles the map on or off.
This accessibility feature lets users hide the map and go straight to the list while still being able to use search & filters on the list.
Map is usually On by default. There is an option to have map Off at the start
Features Toggle
These are additional layers that the user can choose to turn on or off.
Appears in bottom left corner.
Can be minimized
Some layers may not display until user is zoomed in
Examples include
Ward outlines
Bus routes
Subway stations
Zoom In / Out
Appears in top left corner
Always available by default
Zoom levels (how far you can zoom in/out) can be customized
Maps of a single location may have zoom buttons removed