Interactive map
The interactive map component: Users can click on a map pin, and a popup appears with details about that location. The map image size set up: 1280x720 pixels.
The Interactive Map Component helps users explore location-based information visually. It highlights key points of interest, and when users click on these points, a pop-up appears with relevant details. The pop-up is scrollable for additional content.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
Functional grouping: Marketing and storytelling
Demo
Interactive map title - Neque porro quisquam
Northwest Entrance
The northwest entrance is designed to be one of the primary accesses to Scotia Place.
Outdoor Plazas
Plazas for gathering and events are located on the north, south and west sides of the block.
Do
- Use the correct business unit colour to highlight interactive points, ensuring they are clearly visible.
- Keep pop-up content concise and easy to read.
- Provide alternative text (alt text) for all map markers so screen reader users can understand them.
- Support keyboard navigation, allowing users to tab through points and close the pop-up easily.
- Include a clear close button so users can quickly return to the map.
- Write all displayed information in plain language to make it easy to understand.
Don't
- Don’t overload the map with too many markers—this can make navigation difficult.
- Don’t rely only on colour to indicate interactive points—always include icons or labels for clarity.
- Don’t make the pop-up too large or difficult to close.
- Don’t allow the pop-up to block important content when open.