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

Release notes

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.

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.