Map
The map component helps find locations. It suports users' interaction such as panning and zomming. The collapsible data panel provides additional information for each location pin. As the users zoom in or out and pan across or up and down, list in the data panel responds by reflecting additional data for the visible location pins only.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | map.js
Functional grouping: Text and data
Demo
Configure: select the dropdowns below to display the variety of options that a map compnonent supports.
Usage best practices
Consider using map when:
- needing to provide location information for many locations
Do
Offer "view larger map" option especially when the map contains a large amounts of data.
Ensure text legibility on the map with proper font size and colour contrast.
Don't
Do not cover up map area by more than 40% with content.
Do not provide too many details without offering users the option to enlarge the map.