Hawk's By Design

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.

The tray open on the interactive map showing detailed information

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.

The parking, buildings, and resident halls location indicators showing on the map

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.

The search field being used and the autocomplete dropdown open

Fully Responsive

It’s kind of a must nowadays, right?


Interactive Map - Desktop


Interactive Map - Laptop


Interactive Map - Tablet


Interactive Map - Mobile

Device vectors made by Macrovector


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.


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.

Check it out

It’s a lot cooler to experience it yourself