This coming week, we’ll be pitching our project ideas for the CHI fellowship. One component of my project will involve a making a map to demonstrate the breadth of short-term medical training programs in China during the 1950s, 1960s, and 1970s. I’m taking inspiration from the digital project The Chinese Deathscape: Grave Reform in Modern China (https://chinesedeathscape.org) in that I want to incorporate my research analysis alongside the interactive map. The Chinese Deathscape map is quite robust (to be expected from a Stanford University Press publication), but in CHI we’ve already worked on two of the most foundational components for this project: Leaflet and TimeSlider.

We worked as a single group on the map making project, but my partner and I worked on the TimeSlider component specifically. The code for the TimeSlider itself was relatively straightforward and easy to adapt to our project needs, but once we started to enter the code for the points on the map, we ran into a few issues. Initially, we had an issue with the points and popups displaying. The fix for this was a little tweaking with code (commas, spacing, the tricky apostrophes), but once that was fixed, and the image size was adjusted, we encountered additional problems with display images in the popups. In the end, and with quite a bit of effort, Vee discovered that out overlapping code was to blame. When we began the project, we Frankensteined together different sites, some which had external GeoJson files that weren’t displaying in our file’s folder. I’m still not entirely certain how we managed that, but it was a lesson is the value of starting from scratch with code.

There was an additional concern about the overlapping layers in TimeSlider. For example, when you clicked to a new month, the pins were cumulative. This didn’t prove to be a huge issue for our project, but I am interested in how I could adjust the code to show individual moths/years/etc as an option. The Chinese Deathscape also has a cumulative function on its TimeSlider, and while there are many options for map layers, there are not other options for the TimeSlider function. For my own project, it would be ideal to maintain a separation or at least have that option as opposed to the accumulating layers.

Trouble shooting these issues during our rapid development challenge has given me a lot of useful information about how to build a functional JavaScript code for the TimeSlider component of my project. Perhaps most importantly, it’s alerted me to the layers issues early on, so that I can search for solutions before I start my own project.