Coronavirus (COVID-19) Map Dashboard

 

The Coronavirus (COVID-19) map is a data-focused example of how we can use maps to present impactful data. The goal here was trying to demonstrate the ability to create maps like this with a real-world event that’s impacting everyone’s lives right now. When looking at the map, you can get a quick high-level view of how different countries are being impacted by the number of cases, as well as a way to learn a little more about each specific country with an individual tooltip.

 

I built this map using OSS tools like React, Gatsby, and Leaflet along with the NovelCOVID API and a Mapbox basemap. To jumpstart the project, I used a Gatsby Starter I created for Leaflet, that makes it really easy to rapidly bootstrap a simple mapping app. From there, I fetch the data and build that data into the UI with Leaflet and CSS.

 

Are you looking for contributors, feedback, testers, or new users?

 

Generally, I’d be more than happy to have anyone contribute to the project in whatever form they can. I think this map is a great way to demonstrate how to build a map and the features we all can put together. So if someone wanted to add more data, dashboard statistics, or any other type of feature — please feel free to contribute!

Check out the Gatsby Starter for Leaflet on Github: https://github.com/colbyfayock/gatsby-starter-leaflet

From an informational and data collection perspective, you can gather more information and details about the pandemic using dashboards like those from Johns Hopkins University: https://coronavirus.jhu.edu/map.html

All that said, I’m eager to help make creating maps easier for anyone in the tech world. For anyone who is interested from that perspective, I would love contributions to my Leaflet Starter for Gatsby, whether it’s building in new features, adding additional tile services for other developers to easily plug in to use, or simply making the documentation easier for others to use.

 

What are the primary programming language(s) you built or are building this project with?

 

The primary language I used to build this project out is Javascript, with some help from React.

Tech Stack

About the Engineer

I’m currently a Senior UX & Front End Engineer at Element 84. I work the majority of time in the front end with tech like Javascript and React, but I also spend time working on the design side of things, working through wireframes and user flows.

Element 84 is a software engineering team with its HQ in downtown Alexandria, VA who focuses on bringing remote sensing and life sciences data to the cloud. Once that data is in the cloud, that’s where I step in to put interfaces in front of that data. Most recently, I’ve been working on a dashboard for tasking commercial satellites in real-time and allowing scientists to search for that data on a map.

I’d like to credit the people who have been working to provide the NovelCOVID API, which is what I used to fetch the data: https://github.com/NovelCOVID/API, as well as the other OSS tools that made it possible.

You can really find me anywhere by Googling my name, as I’m the only Colby Fayock in the world! But I like to push people to Twitter and Youtube where I talk about the work I’m doing:

company logo
Colby Fayock
Senior UX & Front End Engineer