Case Study
Elite Sports Interactive Map
About
This interactive map was designed and developed during my field placement at Tallships Media n the final semester of the Interactive Media Design at Durham College. This project was created a client at Elite Level Sports Jr. Hockey League. This map will allow the user to view each hockey team in Southern Ontario with their corresponding league.
Tools Used
Adobe Photoshop, Illustrator, HTML, CSS, and JavaScript
How It Works
When the map loads, the user will view the entire Southern Ontario Hockey Leagues. There are four all together. As shown to the right when the user hovers each logo, the map will highlight the corresponding area of the league. When the user clicks a specific league logo, another map will display of the same league. Each league map displays the team logo and map location within that specific league. When the user hovers the team logo, the map will highlight the location; the map will also highlight each location when user hovers the map. When the user clicks a team logo or the map location, a dialog box will display information about that specific team.
Development
The project started off with creating the map of Southern Ontario with all hockey teams displayed, using a traced map of Ontario's Municipalities in Adobe Illustrator. Each hockey league has a separate map. All map files are saved as SVG format. The interaction of the map was developed using HTML, CSS, and JavaScript.
NOTE: It's best to view this application in Google Chrome as it was developed for google chrome!