Web Application: British Columbia Football & Soccer Club Atlas

BC Football & Soccer Club Atlas

An interactive web application that visualizes major football (soccer) and Canadian football organizations across British Columbia. Built with a focus on Metro Vancouver, the atlas features an interactive Leaflet map, rich club and community profiles, search and filtering, team comparison, and guided story tours.

Overview

The BC Football & Soccer Club Atlas is a data-rich, map-centric web application designed to explore and discover the football and soccer landscape of British Columbia. It covers professional, semi-professional, amateur, youth, and university-level clubs across five regions: Metro Vancouver, Fraser Valley, Interior, Vancouver Island, and Northern BC.

The app combines geographic visualization with community discovery layers — each club is linked to its community profile and nearby landmarks, giving users a holistic view of the local sports culture.

Features

Interactive Map

• Leaflet-based map with three base layers: Street (OpenStreetMap), Satellite (Esri World Imagery), and Terrain (OpenTopoMap)
• Custom team markers rendered as circular badges with team colours, sport icon (soccer ball or football), and pulse animation for selected teams
• Landmark markers with category-specific icons (parks, museums, historic sites, waterfronts, trails, art, Indigenous sites, stadiums)
• Smooth fly-to animations when selecting a team from the sidebar or map
• Popup tooltips on marker hover/click showing team name, league, and level

Search & Filtering

• Text search across team name, league, city, and stadium
• Filter by sport (football or soccer)
• Filter by level (professional, semi-pro, amateur, youth, university)
• Filter by region (Metro Vancouver, Fraser Valley, Interior, Island, North)
• Live filter count displayed in the sidebar

Team Detail Panel

• Rich profile overlay showing team colours, mascot, founded year, stadium, league, and level
• Achievements list with trophy/medal icons
• Community profile section with population, description, history, nickname, and branding
• Nearby landmarks list with category icons and descriptions
• Add to compare button for building comparison sets

Team Comparison

• Side-by-side comparison modal supporting up to 4 teams
• Compare attributes: sport, league, level, city, stadium, founded year, mascot, colours, community, population, achievements count
• Remove teams individually from the comparison

Story Mode

• Curated guided tours that highlight themed collections of teams on the map
• Tour banner overlay with title, description, and dismiss control
• Tour team markers highlighted with elevated z-index and tour colour accent

Responsive Design

• Desktop: Sidebar + map side-by-side layout with overlay detail panel
• Mobile: Toggle between map view and list view; full-width detail panel
• Collapsible sidebar with filter chips and scrollable team list

Inspiration

What it does

How I built it

Challenges I ran into

Accomplishments that I'm proud of

What I learned

What's next for VancouverFootball

Built With

• devin