A New Generation of Campus Maps

“Anytime I feel lost, I pull out a map and stare. I stare until I have reminded myself that life is a giant adventure, so much to do, to see.”
— Angelina Jolie

conf-listing2014 has been a great year for getting out of my comfort zone, and in keeping with that theme, last month I gave my first-ever conference presentation with a couple of amazing colleagues at HighEdWeb 2014 in Portland, Oregon. I wish I could say that I nailed it, but honestly I tried to pack waaaay too much information into a limited amount of time, and was pretty nervous for the first 10 minutes or so. Still, it was well attended, we got some great questions and feedback afterward, and it was an exciting new experience that I would definitely recommend to anyone else looking to push out of their professional or personal comfort zone.

This presentation was about online maps—specifically higher-ed campus maps—and over the past several months I’ve collected a lot of information and resources that I’d like to share, in case it’s helpful to anyone else who is new-ish to online maps. Some of this will apply specifically to people working at colleges and universities, but there’s also some that could be useful to anyone interested in web-based mapping.

Before we jump in:

« here’s a link to the full slide deck ».

Community FTW, or why I ❤ higher-ed

uwebd-mugFirst, if you work in higher-ed, and you haven’t heard of <uwebd />, you really should check into it. It’s an email listserv (old-school, I know!) “for anyone involved with implementing and maintaining web sites in a University environment” and you can learn more about the list and subscribe here. One of the things I love about working in higher-ed and the web design/dev field in general is how willing people are to share information and help one another, even between organization which are nominally competitors. Awesome folks all around.

So I asked people on the <uwebd /> listserv for examples of schools which had recently redone their online campus maps, then for each of the dozen or so examples, I asked individuals involved with each of the map projects to answer a few follow-up questions about how they decided to build their map in-house (or alternately, how they decided to work with an outside consultant or vendor), challenges that arose, things that made their lives easier, and just in general what advice they had for others. The response I got back was overwhelming, and I can’t thank all of these people enough for their time and willingness to share their experiences. The full responses are included in slides #4 through #51 (remember when I said I tried to pack way too much information into the conference presentation? Yeah…), but I will summarize below.

Build vs. buy?

A key question with any IT-related project is “should we build this ourselves or purchase an existing product?” a.k.a. the “build vs. buy” question (though some people say this is a false choice). In higher-ed, in my experience, the answer is increasingly “buy.” However a campus map project can be sufficiently small in scope, and doable by a small team in a limited amount of time, and so 9 of the 12 schools (including ours) were in-house projects, whereas only 3 were produced by an outside 3rd-party vendor. It’s worth noting that all 3 of those schools worked with the same vendor, CampusBird, and all seemed to be very pleased with that decision.

Why build it in-house?

Here are the key reasons people gave for making the decision to build their campus maps themselves:

  • To use the data, technology and/or people resources you already have on campus. Many of the schools which decided to build in-house already had mapping experts on campus (maybe a GIS program), and/or had existing databases of map data, or had a strong in-house web development team.
  • Fewer limitations, more extensibility, integration. Several people mentioned wanting an extensible map system, beyond just a single map page, that they could integrate and use in different ways throughout their web site. In our case, we were able to use essentially the same map in our web site and our iOS & Android mobile apps, in part due to the flexibility afforded by developing it ourselves.
  • Ability to update quickly. A concern with using a 3rd-party was that you may not be able to update the data as quickly as you can when everything is in-house. Of course this will depend on the 3rd-party vendor, and how much they prioritize speed/ease of updates.
  • Quality & cost. Interestingly, quality of the end result was given as a reason both by the “in-house” crowd and the “outsource it” crowd. And cost was a consideration, some web teams just flat don’t have the money to hire outside help or buy an off-the-shelf solution, and for many others money is enough of a consideration to tip the balance when there are many free-or-cheap DIY options.

Why work with an outside vendor?

Schools which decided to outsource the campus map to a 3rd-party had other priorities:

  • Ability to do an artistic rendering/custom 3D illustration of campus. This was a big one, the ability to create a nice-looking finely-detailed 3D illustration like that offered by CampusBird isn’t often within the skillset of a small web team. Though it is possible, as Angelo State University proved, illustrating the map themselves in-house, then using MapTiler to generate the map tiles ready for self-hosting.
  • Breadth of experience & expertise. An outside map vendor which has worked with a number of different schools, perhaps dozens, will bring a breadth of experience to the project that an in-house team (especially one new to online mapping) cannot.
  • Quality. Sound familiar?

Avoiding the suck, with some advice from higher-ed web teams

Challenges to watch out for

You could rightly argue that these all apply to all non-trivial web projects, at least in higher education:

  • Getting all the data together. Higher-ed institutions tend to be relatively decentralized. Less-charitable terms used here include territorial, silos, and fiefdoms.
  • Keeping people on the same page. See above.
  • Learning the technology/APIs. Yep. Always a challenge, especially with a team of people who are much more generalists than specialists.

Advice for starting a campus map project

  • Involve key people (stakeholders/users/experts) right from the start. There are 2 aspects to this, first is that you need things from these people, whether that’s buy-in (or money) from key stakeholders or the administration, input and feedback from the users, or help, data, or information from the on-campus experts. The second and just as important aspect is interpersonal: nobody likes to feel the were deliberately left out of a process that should involve them in some way. Besides, it’s good to meet with all sorts of people around campus periodically and cultivate relationships–if and when things get tough or a project starts going sideways having people you can call can really help.
  • Get as much content/data as you can up-front, have a plan to keep it up-to-date. Yes. This is something we struggle with in all types of web projects, very rarely can you build something, launch it, and then walk away. Nearly everything you build needs a plan for upkeep and updating.
  • Choose your tools and take time to learn them. I can vouch for this one personally, the time you take to learn your tools now will pay off in the weeks, months, and years ahead. For example, JavaScript. When presenting at HighEdWeb I joked that I’ve been using JavaScript for over a decade, but I only learned JavaScript 3 years ago. As Douglas Crockford says here (starting about 3:30) “it’s the only language in the world that I’m aware of, that people feel they don’t need to learn it before they start using it.” Since I buckled down and put in the effort to learn javascript properly (hey, here’s something called exactly that) I’m able to get things done with 90% less flailing and 99.9% fewer chickens sacrificed to the gods of “try things until it magically starts working.”
  • Start small and build from there. Start with your MVP get it out there in front of people, and go from there. If you have an online map that’s over 5 years old, I can almost guarantee that you can build something better using free open tools like Leaflet and OpenStreetMap in under 10 hours. Maybe in under 2 hours.
  • Make it flexible and extensible. And modular.

What made life easier?

  • Let people do what they do best. Have technical people to handle the technical aspects, running servers, etc. Or hire an experienced vendor, if that’s your thing.
  • Finding the right tools that make things easier. For example Maptiler, or Leaflet.
  • Look at & learn from what other schools are doing. Back to <uwebd />.

What are interactive maps made of?

SXSW 2011 Lego Pile - 2 by EgnaroorangE, on Flickr
SXSW 2011 Lego Pile – 2 by EgnaroorangE, on Flickr
One interesting and fun thing about developing a campus map is how many tools and modules that are available which can be combined together in different ways to make the final product.

Here’s my sort of conceptual model to describe how all these various pieces fit together, again keeping in mind that I’m a web developer and not a cartographer or GIS expert. So you can think of an interactive map as three layers: Data, Visual, and Interface. You’ll have one or more sources for the actual geographic data describing “what things are where,” you’ll have one or more visual layers showing what the area looks like (map tiles, aerial images, etc), and then you’ll have the user interface layer allowing the user to interact with the map (panning, zooming, searching, lacting themselves in relation to map features, etc). Below are some examples of all these modular pieces.

Data Source(s)

Your web CMS, GIS databases, OpenStreetMap, Google (Places API, Web Services, etc), & more…

Visual Layer (Tiles/3D Illustration/Satellite Images)

OpenStreetMap, Google, Mapbox, MapTiler, ESRI, MapQuest, HERE/Nokia, your vendor of choice, more …

User Interface

Google Maps API, Mapbox, Leaflet, OpenLayers, more…

What we’re using, and why


At Colorado College, we are using OpenStreetMap as one of our data sources (map data can be exported fairly easily using the Overpass API), and also as one of our visual layers (as a source for map tiles).

OpenStreetMap is open data, so we could access and edit the data ourselves, immediately when needed. It’s also widely used as a data source for other sites and apps, so we need to make sure our campus footprint is up-to date in OpenStreetMap anyway. Here are some examples of places that use OSM data: Mapbox showcase (Mapbox Streets data is based on OSM data). Some prominent users of OSM data: Craigslist, Flickr, Wikipedia, Foursquare, Apple.

More information on why you might want to consider using OpenStreetMap can be found at switch2osm.org.


Leaflet is open source JavaScript library for interactive maps, and it’s what we’re using to provide the user interface layer of our campus map. Some thing I really like about Leaflet: it’s only 33K gzipped, it’s simple to create a basic map with, and it’s mobile-friendly and responsive out of the box. It’s also under active development, and moving into the future. Here’s Leaflet creator Vladimir Agafonkin talking about the future of Leaflet a little over a month ago. The robust and well-documented API allows for easy customization. There are also lots of plugins available, plus we can write our own as needed.

Hands-on code examples

A Simple Leaflet Example

Check out this Pen!

For a more detailed walkthrough, see my earlier post Geolocation Part II: Building Interactive Maps with Leaflet.

Super-simple Geolocation

Check out this Pen!

For a more detailed walkthrough, see my earlier post Geolocation Part II: Building Interactive Maps with Leaflet.

Additional Resources

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.