A working demo of the project can be found here: pollocco.github.io/.

Inspiration

The universal impact of social distancing has produced empty cities and streets to an extent never before experienced by Americans. We wanted to create a way to see the different ways communities have been impacted on a state-by-state basis. With New York currently being the epicenter of the pandemic, other states have gone by the wayside in terms of national coverage. This program hopes to give the user a better picture of how the pandemic is affecting the country as a whole.

What it does

This web application fetches pseudorandomly obtained geotagged photos from Flickr with the keyword "coronavirus" and adds them to a map. The user can click on the markers to view the photos in a side-pane. The states on the map are shaded by the number of known cases as they are provided by the New York TImes. If a user clicks on a state, they can see recent Reddit posts from the subreddit r/Coronavirus related to that state.

Challenges I ran into

The teammates I was assigned unfortunately had to drop out of the competition due to external circumstances before any of the coding had begun, so I had to reassess my timeline for the project in order to get it done on my own. Luckily I was able to get the site up and running in time for the deadline. For me, one of the most difficult parts of the project was rummaging through the source code and documentation for the various APIs and plugins to understand how they worked and how to fix things when they went wrong. Those challenges don't happen often in classes, so it was useful seeing the practical side of things while pulling this together. Managing the dependencies for this project was also difficult and I found myself with a broken project a handful of times when trying to introduce something new.

What I learned

My only experience with online mapping was using the Google Maps API for a much smaller project some time ago. I opted to use OpenStreetMap and Maptiler along with Leaflet.js instead, which were all unfamiliar to me at the start of the project. Essentially, this was my first time using pretty much all of these packages, frameworks and APIs (and also my first time using a bundler), so I had to absorb a lot fairly quickly in order to get the project done on time. I had limited experience with HTTP requests as well, so I was forced to develop a better understanding there. Finally, I learned a lot about the challenges that come with creating a satisfying UI that feels intuitive and works in a satisfying way. Much thought was put into how to present the information without provoking fear and anxiety.

How I built it

This web app uses Leaflet.js as the mapping framework with OpenStreetMap and Maptiler as the tile providers. Data on coronavirus cases in the U.S. by state provided by New York Times GitHub repo in CSV format and automatically updates as new data is released. The Flickr and Reddit APIs are used to obtain the photographs and news stories. snoowrap and flickr-sdk were used to access the APIs. Node.js and npm are used on the backend and parcel was used to manage dependencies. Additional plugins include leaflet-sidebar-v2, mapbox-gl, mapbox-gl-leaflet, leaflet-providers and leaflet-markercluster. GeoJSON data for U.S. states found in this tutorial, with attribution to Mike Bostock. csvtojson along with request were used to convert the New York Times data to JSON format.

What's next?

Gee, a lot. Next on the list is finding a way to host the map tiles on the cloud so they can be delivered more quickly. The clusterer plugin could use some workshopping to be more cross-compatible. Although, my biggest hope is that this project becomes irrelevant sooner rather than later. That said, it felt good to create something useful and potentially broaden someone's perspective.

Share this project:

Updates