Interactive Map
—An easy to use campus map that gives users an abundance of information
Project Summary
Navigating a college campus can be a daunting task for anyone unfamiliar. The interactive map provides a way to get a bird’s eye view of the campus, while also providing detailed information about any location. The user can click on buildings to see layouts, best parking, as well as what services are provided. Parking areas and resident halls can also be toggled for better visibility. To top it off, there is a search field with autocomplete capabilities to help quickly search for locations.
Location Details Tray
Clicking on a building, or parking lot, opens a tray with more information about the location including: layout, best parking, if it’s a pay lot, services in the building, etc.
Broad Location Highlighting
Users are able to easily highlight and find all buildings and residence halls. They can also target all parking lots, or filter down based off what parking tag color they have.
Autocomplete Search Field
Instead of searching all over the map for a specific building, users can use the search field, with an autocomplete function, to quickly find locations.
Fully Responsive
It’s kind of a must nowadays, right?
Desktop
Laptop
Tablet
Mobile
Device vectors made by Macrovector
Challenges
This was a project that I inherited; it had been in development for over a year before I took it over. Figuring out what was already there, and usable, and then figuring out a way to build upon that was my first task. The map already needed updating, as well, so I needed to iron out a process for updating the map now, and in the future. Mobile would prove challenging, as the header took up a lot of valuable space we needed for the map.
Solutions
I went through all of the services and libraries used, and completely restructured how the JavaScript file was written. After gaining an understanding of how things worked together, I was able to build upon that with the requested features that needed added. I created a template for the map image that we can use as a reference for current and future updates. Mobile usability was improved by programming the existing header, and controls, to be able to toggle in and out of view, giving priority to the map.