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. Having a number of accessible entrances, all of which are ground level, means fewer line-ups and a better distribution of people and crowds. It is next door to the Calgary Flames store and central to the four restaurants. All of these amenities can be accessed from both inside and outside the building.
Outdoor Plazas
Plazas for gathering and events are located on the north, south and west sides of the block. Highlights include video screens for public viewings of events, stage areas, and activity areas.
A digital video screen will be in place on the Southwest corner for public viewing parties and events.
The plaza designs will also incorporate public art, including a major piece on the east side facing the Calgary Stampede’s newly opened Sam Centre. A separate process for public art will begin after the Development Permit is approved.
The outdoor plazas also offer a close connection to and from the Elbow River pathway.
Details
-
Northwest Entrance
The northwest entrance is designed to be one of the primary accesses to Scotia Place. Having a number of accessible entrances, all of which are ground level, means fewer line-ups and a better distribution of people and crowds. It is next door to the Calgary Flames store and central to the four restaurants. All of these amenities can be accessed from both inside and outside the building.
-
Outdoor Plazas
Plazas for gathering and events are located on the north, south and west sides of the block. Highlights include video screens for public viewings of events, stage areas, and activity areas.
A digital video screen will be in place on the Southwest corner for public viewing parties and events.
The plaza designs will also incorporate public art, including a major piece on the east side facing the Calgary Stampede’s newly opened Sam Centre. A separate process for public art will begin after the Development Permit is approved.
The outdoor plazas also offer a close connection to and from the Elbow River pathway.
Code
Responsive preview
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.