Mapping is not only about representing space. It is about representing space from humans’ perspectives, and therefore, it is about telling a story. Maps can be works of art, they can be instruments of war, or they can be a testament to the places where dominant morality and “good judgment” halt for a couple of hours. One thing never changes, though: a map is always a story.

This entry is describing the process of building a web map to complete one of CHI’s rapid development challenges successfully. I start by talking about the story my team, and I wanted to tell. Later I will be talking about the technical aspects of mapping the elements we wanted to map. Finally, I will talk about map customization.

Dionysian stories for graduate students

The first thing my team and I discussed was the story we wanted to tell. There should not be any surprise with this piece of information. After all, deciding what to represent in a map demands a basic understanding of a given representation’s purpose. In our case, we decided to tell a story about the places where we used to make and improve friendships with other graduate students before the Covid-19 epidemic. If you think about places where people have unlimited access to alcohol as long as they have a legal ID and money to buy it, you are right; we also thought about that. Some graduate students have Dionysian souls needing attention, and it seems my group was thinking about those souls.

Our story suggests three kinds of places MSU graduate students used to visit before the pandemic hit our way of living. Regarding those types, we make the following statement in the webpage: “Not every young scholar has the same amount of party-driven spirit. There’re both apollonian and Dionysian scholars. Considering that, we’re presenting here three types of sites that grad students visited before the Age of COVID-19 according to how apollonian or Dionysian they felt. For those without much love for loud music or alcohol consumption, we refer places for decent academic friendships (represented by coffee cups). For those looking to know their peers a little bit better after some “spirit boosting” with loud music and drinking, we offer places for insane academic friendships (represented by glasses of beer). Finally, for those rare scholar-Dionysian souls who explored things that they probably shouldn’t have explored with their peers, we cautiously denote no guarantees kinds of places (represented by skulls). “

Just like the previous paragraph suggests, our map tells a story of pleasure-seeking activities varying in intensity. A coffee cup, a glass of beer, and a skull are markers of different places and memories we, as team members, individually had or shared. Our map is not as representative as its title suggests, “THE PRE-COVID PARTY SCENE IN GREATER LANSING.” I guess we were more worried about the challenge’s technical aspect than about the very important task of telling a compelling story.

The technical challenge

None of the team members had any experience with web-mapping, and our experience with coding was the same: three months of CHI fellowship plus the free courses we took from Codeacademy. At least that was my impression before starting the challenge. Michael J. Albani had previous experience mapping some critical sites of the North American indigenous communities. His previous experience involved using the leaflet JS library for interactive maps and the OpenStreetMap data. We used his work as the starting point for ours.

Our first challenge was to decipher the coding logic because Michael did not remember much about it. Consulting tutorials and documentation from Leaflet were obligatory for us. Suddenly we understood the code structure, and we could change it. The first thing we changed was the zoom scale. Our map started looking into the Midwest region; it ended looking to Lansing and East Lansing. Then, we removed the markers of the previous map, and we came up with our own. We took the coordinates of the sites we wanted to map from google maps, and we wrote them in our code.

Map customization

Placing markers and the standard zoom is very easy but customizing the map to give it a unique look makes things more complicated. Most of the time and energy we spent on the challenge was related to customizing the map. The only thing we could customize, in the end, was the shape of the markers. I took the initiative of using Pixlr x, a cloud-based image edition software, to create the markers we used in the map. I used pictures of a coffee, a beer jar, and a skull to create PNG files I could use on the map. The map looks good and original with those markers, but they are not as precise as an orthodox icon. The problem is the PNG file. Because PNG files are images with a square shape, the ability to put them where you want is complicated. The invisible parts of the PNG are going to spoil accuracy.

Future attempts of web mapping

For the future, I will work with Mapbox, a JS library that could be much more responsive for beginners like myself than it was to work with Leaflet.

Check our web map here: https://riconogu.github.io/Mapping-memory-party-for-PhD-students/