A screenshot from the map when it was still in use.
Interactive University Map
An interactive google map with a custom overlay.
Purpose of This Project
While I was a student worker, I was tasked with redesigning the university's campus map. The existing map was difficult to use, was pretty dated in terms of design, and was lacking a lot of important information. The intention was to focus on making a map that could serve as a tool for people that were new to campus, and for prospective students that wanted to know more about campus.
Development Process
With these goals in mind, I worked with unversity designers and content writers to build a map with a stylized and information focused representation of the campus. The first step of this process was deciding on the functionality for the map, which was accomplished by searching for other universities and understanding what their approach to campus maps looked like, and reverse engineering the technologies that they were using. The foundation of the map ended up being the google maps API, and then I leveraged KML data in a google fusion table (which has since been discontinued) in order to store and retrieve geographical information. A designer created an illustrated map of campus, which was overlayed on top of the base google map, and the user could interact with the overlay to click on buildings on campus to view photos and learn more information about them. The map also included a search function using fuse.js, printing support, bus routes, recreational trails, and parking information.
There were a lot of challenges in developing the map, many of which I had no experience dealing with. One significant challenge was that the map needed to be mobile friendly to allow people on campus to use it when they were most likely to need it, which was while walking around campus to a destination. This meant learning responsive design practices, which were just starting to be adopted at the unversity. Another challenge is that a poorly designed map will consume a lot of data for mobile users, which on slow data connections means very slow load times. To tackle this problem, I wrote a pipeline for taking the illustrator files from the designers and converting them to various levels of resolution and detail in png format. For each png file, I ran them through a quantization library called pngnq, and then used a program called gdal2tiles to slice the png files into many small square tiles that were less than 1 KB each. I then setup the overlay as a tiled overlay, which means that based on the zoom level and location of the map that was being viewed only the tiles in that specific part of the map would be loaded, and could be downloaded concurrently (with one big image, you have to wait for the entire thing to load). This lead to a significantly better end user experience, and once the process was scripted and established it became easy to incorporate updates from the illustrations.
Epilogue
The map I created was in use by the university for 3 years from 2016 to 2019. In 2019 they decided to outsource the development of a new map to a company that specialized in making maps for large organizations. I was very impressed with the new offerings that came with the new map, because I had the perspective of knowing many of the challenges they were overcoming, but I was also proud to see many similarities between the map I had created and the map that replaced it.