|

subdirectory_arrow_right Interactive Map

For this project, our group was given a location, and asked to think of a way to promote it using an interactive map. Our concept involved Fish Creek Park and a dual identity: it appears perfectly normal during the daytime, but at night there are more unusual or unexplained things lurking around.

We all loved this idea as Halloween was quickly approaching, so we began brainstorming ideas for the project. One proposal was to have a separate look and feel to the website, depending on the current time of day. It was an ambitious idea, and it threatened our project timeline, but in the end, the website was completed on-time and fully functional, with both modes intact.

The night and day modes required different interactive maps, which I created by first separating the important parts of the artwork into specific layers using Adobe Illustrator. I then exported them as SVG, and took the SVG code and organized it to make it easier to work with. Once that was done, CSS animations and JavaScript were used together to make the maps interactive. The user could click on one of the specified locations, and it would change the information displayed in the sidebar, or, the user could select one of the locations from a list instead.

Since completing this project, I have realized that there are better ways to optimize the code I used in this project, such as using CSS @keyframe animations, rather than entering the same specific animation info multiple times.