If you’ve seen the new Admission Site, you may have noticed the new Google Maps-based campus maps we’re using. We created these for a still-ongoing campus map project, but thought they fit well on the Admissions site.
Since the site’s launch we’ve received a few requests for information on the process of creating these maps. I decided to write up a little bit about our process here.
The best starting place would be to familiarize yourself with the Google Maps API and its documentation. The main thing we’ve done is create a custom tile overlay of our campus map.
The steps to do this are pretty well documented on The Mapki wiki, but we strayed from this in a few ways that I’ll outline below.
We started with a PDF version of our map that we imported into Adobe Illustrator to edit. We stitched together Google Map tiles at the correct zoom level to create a large-scale background image. We put this behind our map in Illustrator to align everything correctly and give us crop marks.
Because our building and street labels are on our map, we created a layer for each final zoom level so that we could align, resize, remove labels at the various sizes.
Then we imported this into Photoshop at the correct resolution for each zoom level and used this script to output the tiles.
After that, it’s back to Mapki and the GMap API docs for actually getting these tiles onto a map on your page.
We’ve done some additional trickery that I won’t go into detail with here:
- Slightly modified the tile cutter script to import the correct Illustrator files at the correct resolution for each zoom level
- Created a set of base tiles with no color on buildings and a set tiles with just buildings highlighted for various building groups (Academic, Administrative, Student Housing, etc). We toggle these overlay layers based on what the user is currently looking at.
- We’ve done some work to convert our map Illustrator file to SVG to KML file so that we can overlay this on a map for use with clickable targets. If this ever works in a generalizable way, I’ll write it up and publish the code.