Downtown Calgary: Interactive Map
Tools: HTML + CSS + JavaScript + PHP + MySQL
Role: Full-Stack Developer
For this project I was part of a team where I developed an interactive map focused on study spots in downtown Calgary.
The purpose of this interactive map was to display information about study spots when the user clicked on one of the pins in the locations.
Clickable SVG
To allow user interaction with the SVG, the illustration had to be carefully designed with each element on separate layers. This allowed for the use of JavaScript to manipulate each layer and display specific information about the corresponding location when clicked on by the user.
Description Page Sliders
All the information shown in the description page for every location is brought from a MySQL database with PHP.
To optimize the user experience, I implemented a solution for locations with only one image by using json_encode() to connect PHP and JavaScript. This allowed me to dynamically determine which locations had multiple images and should display a slider, and which locations had only one image and should not display a slider.
