Author's note: Similar to before, this dashboard is meant to be a demo and proof of concept for using real world data to build a dashboard. While this data should be accurate per the NovelCOVID API, I would recommend using tools like the Johns Hopkins University dashboard for complete and accurate analysis. Stay home and be safe! ❤️

• What are we going to build?
• What do we need before we get started?
• Step 1: Update how we fetch our data and fetch the statistics
• Step 2: Adding statistics to our dashboard
• Step 3: Make the data human friendly
• Step 4: Add the Last Updated date
• What can I do next?

What are we going to build?

We're going to be extending our original map demo with some basic statistics that we can retrieve from the NovelCOVID API. To get an idea, here's my demo I'm basing this off of.

Coronavirus (COVID-19) map demo with dashboard statistics

While you're not required to have completed Part 1 to apply these concepts, it definitely helps, and it lets you set up a map for your dashboard. If you'd like to start there, which I recommend, check out How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet first.

Woah, a mapping app?

Yup. If you haven't played with maps before, don't be discouraged! It's not as bad as you probably think. If you'd rather start with mapping basics, you can read more about how mapping works first.

What do we need before we get started?

For this walkthrough, you pretty much need a React app in some form. I'll be working with the dashboard we previously built in my last walkthrough that includes a map of the cases of the Coronavirus (COVID-19) per country.

Coronavirus (COVID-19) map dashboard

I recommend starting with the previous tutorial, but if you want to skip the map and start fresh, the easiest way would probably be to use Create React App, Gatsby, or Next.js.

Step 1: Update how we fetch our data and fetch the statistics

To get started with our statistics dashboard, we're going to do a little prep work by changing how we're fetching the data. The goal here, is we're going to wrap our request logic in a reusable way so that we can use it for both our countries data and our new statistics data.

Creating a new React hook to fetch data

Diving in, the first we'll do is create a new React hook that will serve as how we fetch the data. To get started, create a new file in your hooks directory called useTracker.js and add a line inside of hooks/index.js to export it:

// New file src/hooks/useTracker.js
// This will be empty for now

// Inside hooks/index.js
export { default as useTracker } from './useTracker';

Inside of our useTracker.js file, we're going to set up our request logic. This is a long file, so make sure you copy and paste the entire thing before we walk through what it does:

import { useEffect, useState } from 'react';
import axios from 'axios';

const API_HOST = 'https://corona.lmao.ninja/v2';

const ENDPOINTS = [
  {
    id: 'all',
    path: '/all',
    isDefault: true
  },
  {
    id: 'countries',
    path: '/countries'
  }
]

const defaultState = {
  data: null,
  state: 'ready'
}

const useTracker = ({ api = 'all' }) => {

  const [tracker = {}, updateTracker] = useState(defaultState)

  async function fetchTracker() {
    let route = ENDPOINTS.find(({ id } = {}) => id === api);

    if ( !route ) {
      route = ENDPOINTS.find(({ isDefault } = {}) => !!isDefault);
    }

    let response;

    try {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'loading'
        }
      });
      response = await axios.get(`${API_HOST}${route.path}`);
    } catch(e) {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'error',
          error: e
        }
      });
      return;
    }

    const { data } = response;

    updateTracker((prev) => {
      return {
        ...prev,
        state: 'ready',
        data
      }
    });

  }

  useEffect(() => {
    fetchTracker()
  }, [api])

  return {
    fetchTracker,
    ...tracker
  }
};

export default useTracker;

Starting from the top:

• We import our dependencies: we're going to use Reacts useEffect and useState hooks to manage our requests
• We define default constants: we have a base API endpoint for our data, a list of the available endpoints we'll use, and a state object that will store our data
• We define our useTracker hook: our hook includes one argument api that will allow us to specify which endpoint we'll use to make our request
• We set up a state instance: we'll want to keep track of our fetched data, so we create a tracker state instance that we'll be able to update
• We created an asynchronous fetchTracker function: we'll use this to make our actual request
• Inside our function: we first find the API route and create our URL, update our state instance to a "loading" state, try to make our request, catch any errors if there are any, and finally if the request is successful, we update our state with that data
• We trigger our function: using a useEffect hook, we trigger our fetchTracker function to make the request. We only have one dependency of api. This means the function will only fire the first time and any time the api value we pass in changes. We won't be changing that value, but it may be helpful in other instances if you're dynamically changing the API used
• We return our tracker: the returned object includes both our tracker data as well as our fetchTracker function that we could use to refetch the data if we'd like

And with all of that, we have a brand new hook that will fetch data from the NovelCOVID API.

Using our new tracker hook

To make use of this hook, let's jump over to src/pages/index.js, remove our axios import if it's there, and instead import our hook:

import { useTracker } from 'hooks';

With our hook, let's replace our original country data request. First, add the following to the top of the IndexPage component:

const { data: countries = [] } = useTracker({
  api: 'countries'
});

const hasCountries = Array.isArray(countries) && countries.length > 0;

This will let us fetch our country data and let us know if we have any results. Next, let's replace our original request.

Inside of our mapEffect function, let's remove the axios request in addition to the response, the destructured data object, and the hasData constant.

Code diff showing update to map effect

Then, replace hasData with hasCountries:

if ( !hasCountries ) return;

And replace data with countries in the geoJson object where we map our features:

features: countries.map((country = {}) => {

At this point, if you hit save and refresh, you shouldn't notice any difference to what you previously had.

Add a request for our stats

Now that we are using our useTracker hook to fetch our country data, let's also use that to fetch our stats.

Right next to where we set up our useTracker hook before, let's add another request:

const { data: stats = {} } = useTracker({
  api: 'all'
});

And if we add a console.log statement under to see what's inside stats:

console.log('stats', stats);

We should see our stats data object logged out!

Using console.log to show Coronavirus (COVID-19) statistics

Follow along with the commit!

Step 2: Adding statistics to our dashboard

Now that we have our data available to use, let's use it!

To get started adding our statistics to the dashboard, let's create a data structure that will allow us to easily configure the data we want to use.

To do this, let's first create a new array called dashboardStats below hasCountries at the top of the page component:

const dashboardStats = [];

Inside this array, let's add some new objects that specify our data that we're pulling from the stats object we requested. To start, let's try to add:

const dashboardStats = [
  {
    primary: {
      label: 'Total Cases',
      value: stats?.cases
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.casesPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Deaths',
      value: stats?.deaths
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.deathsPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Tests',
      value: stats?.tests
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.testsPerOneMillion
    }
  }
]

The reason we're splitting this up into primary and secondary keys, is we're going to use that to differentiate between logically similar stats that we want to style a little bit differently.

_Note: if you're not familiar with the ?. syntax, it's called Optional Chaining. This allows us to chain our properties without worrying about if the objects exist. If stats is undefined, it will simply return undefined instead of throwing an error._

With our stats data, let's add the tracker to our map. Let's remove our current <Map> component and include it nested inside our tracker div in the following:

<div className="tracker">
  <Map {...mapSettings} />
  <div className="tracker-stats">
    <ul>
      { dashboardStats.map(({ primary = {}, secondary = {} }, i) => {
        return (
          <li key={`Stat-${i}`} className="tracker-stat">
            { primary.value && (
              <p className="tracker-stat-primary">
                { primary.value }
                <strong>{ primary.label }</strong>
              </p>
            )}
            { secondary.value && (
              <p className="tracker-stat-secondary">
                { secondary.value }
                <strong>{ secondary.label }</strong>
              </p>
            )}
          </li>
        );
      })}
    </ul>
  </div>
</div>

This code should be immediately following the <Helmet> component if you're following along.

To explain what we're doing:

• We're creating a "tracker" div that will organize our stats
• We move our <Map component inside of this tracker
• We create a separate section called "tracker-stats"
• Inside of this, we create an unordered list (ul)
• Inside of our list, we loop through all of our stats inside dashboardStats
• For each stat, we create a new list element (li) and include 2 optional paragraphs that includes our primary stat data and our secondary stat data

Once we reload our page, we should now see a few stats:

Adding the first statistics to the page

Now that we have our stats on our page, let's make them look like they're in a dashboard.

Let's create a new file called _tracker.scss inside of our src/assets/stylesheets/components directory. Once that file is created, additionally add it to the src/assets/stylesheets/components/__components.scss file:

@import "tracker";

With our new component style file ready to go, let's add some styles into _tracker.scss:

.tracker-stats {

  color: white;
  background-color: $blue-grey-900;
  border-top: solid 1px darken($blue-grey-900, 5);

  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
  }

}

.tracker-stat {

  font-size: 2em;
  text-align: center;
  padding: .5em;
  border-right: solid 1px darken($blue-grey-900, 5);
  border-bottom: solid 1px darken($blue-grey-900, 5);

  strong {
    font-weight: normal;
    color: $blue-grey-300;
  }

}

.tracker-stat-primary {

  margin: 0;

  strong {
    display: block;
    font-size: .5em;
  }

}

.tracker-stat-secondary {

  font-size: .5em;
  margin: .8em 0 0;

  strong {
    font-size: .8em;
    margin-left: .4em;
  }

}

Above – we're adding colors and organizational effects, such as using CSS Grid, to allow our data to be organized in an easy to read way and to look good! We're also making use of some pre-existing colors variables that are used within the project to keep the color use consistent.

Once you save those styles and reload the page, it should look much better:

Adding case statistics to the dashboard

From here, feel free to add more stats or adjust them to your liking. In the demo I created, I added the stats for active cases, critical cases, and recovered cases. If you'd like to do the same, you can check out the commit.

Follow along with the commit!

Step 3: Make the data human friendly

Now the rest of this walkthrough could be considered optional, but ultimately we want people to be able to read these statistics, right? So let's make the numbers a little more easy to read.

First, let's open our src/lib/util.js file and add this function:

/**
 * commafy
 * @description Applies appropriate commas to large numbers
 */

export function commafy(value) {
  let numberString = `${value}`;

  numberString = numberString.split('');

  numberString.reverse();

  numberString = numberString.reduce((prev, current, index) => {
    const shouldComma = (index + 1) % 3 === 0 && index + 1 < numberString.length;
    let updatedValue = `${prev}${current}`;
    if ( shouldComma ) {
      updatedValue = `${updatedValue},`;
    }
    return updatedValue;
  }, '');

  numberString = numberString.split('');
  numberString.reverse()
  numberString = numberString.join('');

  return numberString;
}

This function will take a number and turn it into a string with commas. To walk through what it does:

• Takes in a value as an argument. For our use, this value will most likely be a number.
• It converts the value into a string. We'll use this to work with adding commas to our number.
• We split that string into an array and reverse it. We want to reverse it because it makes it easier to add our commas depending on the index.
• We use the javascript reduce function to recreate our number-string. After every 3 numbers, we want to add a comma.
• Once we have our new value with the commas, we want to re-reverse it. So we split it again, reverse the array of characters, and re-join it, which is what we return

And now that we have our commafy function, let's use it. Back inside src/pages/index.js, let's import our function at the top of the page:

import { commafy } from 'lib/util';

Then, in our dashboardStats array, let's replace every number value with a ternary expression and function that will convert our number if it's available:

value: stats ? commafy(stats?.cases) : '-'

This line checks to see if stats exists. If it does, we commafy the cases value. If it doesn't exist, we return a - to show it's unavailable.

Once we repeat that process for all of our numbers, we can save, reload the page, and see our human friendly numbers!

Formatting the statistics to be human readable

Follow along with the commit!

Step 4: Add the Last Updated date

Finally, we want to make sure people are staying informed and understand the last time this data was updated. Luckily, our API provides a Last Updated date for us, so let's use it!

At the bottom of our "tracker" div under tracker-stats, let's add the following:

<div className="tracker-last-updated">
  <p>
    Last Updated: { stats?.updated }
  </p>
</div>

This creates a new section where we simply include the updated property from our stats. And if we save and reload the page, we can see the last updated date!

Adding last updated to the dashboard

But how could we even understand what that number is, unless you're the computer crawling this blog post? So let's change it to a human readable format like we did with our numbers.

Inside of our src/lib/util.js file, let's add another function:

/**
 * friendlyDate
 * @description Takes in a date value and returns a friendly version
 */

export function friendlyDate(value) {
  const date = new Date(value);
  return new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: 'numeric',
    minute: 'numeric'
  }).format(date);
}

This function creates a new Date object, then uses the javascript International DateTimeFormat API to convert it into a friendly readable format!

Once that's saved, let's import it next to our commafy function at the top of src/pages/index.js:

import { commafy, friendlyDate } from 'lib/util';

Then we can update our code similar to how we updated our numbers:

Last Updated: { stats ? friendlyDate(stats?.updated) : '-' }

And if we save and reload, we see it in a human readable way!

Formatting the last updated date

Finally for our "last updated" should look like it fits in with the rest of the dashboard, so let's add a few more styles. Inside of our _tracker.scss file we were working with earlier:

.tracker-last-updated {

  color: white;
  background-color: $blue-grey-900;
  padding: .8em 0;

  p {
    color: $blue-grey-300;
    font-size: .8em;
    text-align: center;
    margin: 0;
  }

}

And once we hit save and refresh the browser, we have our dashboard statistics with the last updated time! ?

Final dashboard with formatted lasted updated date

Follow along with the commit!

What can I do next?

Make the marker tooltip data human friendly

Now that we have our handy commafy and friendlyDate functions, we can reuse those functions to clean up the data in our country marker popups!

Use the fetchTracker function to poll for updates

Inside of the useTracker hook we created, we exported a function called fetchTracker. This allows us to force a request to the API to fetch new data. To make sure our map stays current even when somebody doesn't refresh the page, we can create a timer in javascript to regularly invoke that function to update our dashboard data.

Clear the map layers before re-adding the new ones

One thing we're currently not doing is cleaning up old layers before adding a new one. The way the map is set up, it just keeps layering them on top. What we can do is before we add all of our new layers, we can clear out the old ones. Check out this commit to get started!

Want to learn more about maps?

You can check out a few of my other resources to get started:

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (Part 1 of this post)
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

Update: The original NovelCOVID API v1 endpoint has been deprecated. Please update and use the following instead: https://corona.lmao.ninja/v2/countries

Author’s Note: This is meant to be a demo and proof of concept for putting together an impactful mapping application using real life data. For complete and accurate analysis, please make sure to use tools like Johns Hopkins University dashboard. Stay home and be safe! ❤️

• What are we going to build?
• What do we need before we get started?
• Step 1: Cleaning up some unneeded code
• Step 2: Fetching the Coronavirus data
• Step 3: Transform the Coronavirus data into a geographic data format
• Step 4: Adding the Coronavirus data to the map
• What else can we do?
• Be safe and stay informed
• Want to learn more about maps?

What are we going to build?

We’ll be putting together a mapping application that uses an API containing recent Coronavirus statistics and maps out the locations and impact each country is facing.

Coronavirus map dashboard demo

On the map, we’ll show a marker for each country with the number of confirmed cases. On top of that, we’ll include a little popup tooltip that shows more in depth information.

The map we’ll build will mostly look like the above, but will look a little simpler. We’ll utilize the OpenStreetMap public tileserver instead of using a custom Mapbox

To get started, we’re going to use this Leaflet Gatsby Starter I created to make the initial setup a little smoother. With our app bootstrapped, we’ll fetch our data and add markers to the map with our data.

Woah, a mapping app?

Yup. If you haven’t played with maps before, don’t be discouraged! It's not as bad as you probably think. If you’d rather start with mapping basics, you can read more about how mapping works first.

What do we need before we get started?

If you followed along with my previous tutorials for building a Santa Tracker or creating a Summer Road Trip map, you can follow the same steps to get started. If not, we’ll want to make sure we have the following set up:

• node or yarn - I'll be using yarn, but you can substitute with npm where appropriate
• Gatsby’s CLI - yarn global add gatsby-cli

If you’re not sure about one of the above, you can try checking out the beginning my previous tutorial.

We’ll also want to set up a foundation for our map. We can do this by utilizing the Leaflet Gatsby Starter I put together that provides us a basic setup with Leaflet and React Leaflet.

gatsby new my-coronavirus-map https://github.com/colbyfayock/gatsby-starter-leaflet

Creating a new Leaflet Gatsby app in the terminal

After that’s finished running, you can navigate to the newly created project directory and start your local development server:

cd my-coronavirus-map
yarn develop

Starting your Gatsby app in the terminal

If all goes as planned, your server should start and you should now be able to see your basic mapping app in your browser!

New Leaflet Gatsby app in the browser

Follow along with the commit!

Step 1: Cleaning up some unneeded code

The Gatsby Starter we're using to spin up this app comes with some demo code that we don’t need here. We’ll want to make all of the changes below in the file src/pages/index.js, which is the homepage of our app.

First, let’s remove everything from the mapEffect function. This function is used to run code that fires when the map renders.

// In src/pages/index.js
async function mapEffect({ leafletElement } = {}) {
  // Get rid of everything in here
}

We’ll also change the variable name of our leafletElement simply for being able to more easily understand the code as we write it.

async function mapEffect({ leafletElement: map } = {}) {
}

Next, we don’t want a marker this time, so let’s remove the <Marker component from our <Map component:

<Map {...mapSettings} />

Now that we have those pieces cleared out, we can remove all of the following imports and variables from the top of our file:

• useRef
• Marker
• promiseToFlyTo
• getCurrentLocation
• gatsby_astronaut
• timeToZoom
• timeToOpenPopupAfterZoom
• timeToUpdatePopupAfterZoom
• ZOOM
• popupContentHello
• popupContentGatsby
• markerRef

After, our map should still work, but not do anything.

New mapping app with nothing going on

Follow along with the commit!

Step 2: Fetching the Coronavirus data

For our app, we’re going to use the NovelCOVID API. Particularly, we’re going to use the countries endpoint to fetch the list of our countries and the stats associated with them.

For making requests, I personally like to use axios as it has a nice to use API. If you want to use fetch or your own favorite request library, substitute that in for this step.

We’ll start by installing axios:

yarn add axios

Once that installs, remember to restart your server.

Import the axios package ta the top of our pages/index.js file:

import axios from 'axios';

Next we’ll actually make our request. Inside our mapEffect function, let’s try to make a request to the API endpoint:

async function mapEffect({ leafletElement: map } = {}) {
    let response;

    try {
      response = await axios.get('https://corona.lmao.ninja/v2/countries');
    } catch(e) {
      console.log(`Failed to fetch countries: ${e.message}`, e);
      return;
    }

    const { data = [] } = response;
}

In this snippet, we’re doing the following:

• Setting up a response variable that will allow us to store the response
• Adding a try/catch block that will catch any API errors if the request fails
• If the request is successful, we store the response in the response variable
• If the request fails, we console log out the error and return out of the function so we don’t continue to run the code with a failed request
• Once we have our response, we can destructure data from the response and set the default value to an empty array, as that will be the type of data we need

After that’s set up, we can console log out the data object and we’ll see our data successfully fetched!

Logging the Coronavirus location data to the browser console

Follow along with the commit!

Update: The previous commit includes a link to the original NovelCOVID v1 API endpoint which has now been deprecated. Please use this instead: https://corona.lmao.ninja/v2/countries.

See updated commit.

Step 3: Transform the Coronavirus data into a geographic data format

Now that we have our data, we can transform it into a geographic data format, particularly GeoJSON, that will allow us to interface with Leaflet.

Let’s start by adding this block of code:

const { data = [] } = response;
const hasData = Array.isArray(data) && data.length > 0;

if ( !hasData ) return;

const geoJson = {
  type: 'FeatureCollection',
  features: data.map((country = {}) => {
    const { countryInfo = {} } = country;
    const { lat, long: lng } = countryInfo;
    return {
      type: 'Feature',
      properties: {
       ...country,
      },
      geometry: {
        type: 'Point',
        coordinates: [ lng, lat ]
      }
    }
  })
}

So what are we doing here?

• We create a new constant called hasData that checks if our data variable is an array and has data
• If we don’t have data, we want to return out of the function, as we don’t want to try to add data we don’t have
• We create a geoJson object that will be our GeoJSON document
• Our document is of type FeatureCollection and as our features we loop through our dataset
• For each country in our data, we obtain the lat and lng to create a point for our map
• We additionally add our country data as properties so we can access it within our mapping APIs

If you console.log this object our into your browser and copy the contents, you can paste this into geojson.io and see the location data show up correctly.

Previewing Coronavirus location data on geojson.io

With this GeoJSON document, we'll now be able to add it to our map.

Follow along with the commit!

Step 4: Adding the Coronavirus data to the map

We have our GeoJSON document with our location data, so let’s add it to the map.

Let’s start with this code block. It's a long one, but we’ll break it down piece by piece:

const geoJsonLayers = new L.GeoJSON(geoJson, {
  pointToLayer: (feature = {}, latlng) => {
    const { properties = {} } = feature;
    let updatedFormatted;
    let casesString;

    const {
      country,
      updated,
      cases,
      deaths,
      recovered
    } = properties

    casesString = `${cases}`;

    if ( cases > 1000 ) {
      casesString = `${casesString.slice(0, -3)}k+`
    }

    if ( updated ) {
      updatedFormatted = new Date(updated).toLocaleString();
    }

    const html = `
      <span class="icon-marker">
        <span class="icon-marker-tooltip">
          <h2>${country}</h2>
          <ul>
            <li><strong>Confirmed:</strong> ${cases}</li>
            <li><strong>Deaths:</strong> ${deaths}</li>
            <li><strong>Recovered:</strong> ${recovered}</li>
            <li><strong>Last Update:</strong> ${updatedFormatted}</li>
          </ul>
        </span>
        ${ casesString }
      </span>
    `;

    return L.marker( latlng, {
      icon: L.divIcon({
        className: 'icon',
        html
      }),
      riseOnHover: true
    });
  }
});

So what are we doing here?

• We create a new instance of L.GeoJSON which will transform our GeoJSON document into something Leaflet will understand
• Inside that instance, we define a custom pointToLayer function. This allows us to customize the map layer Leaflet creates for our map
• In our function, we assign and create our datapoints that we want. Most of it is destructuring, but we format the cases count to show 1k+ instead of 1000 and a formatted date instead of the timestamp
• We create an HTML string block which is used to define our map marker that will be added to the map. This also includes the HTML for the tooltip that will pop up when hovering over a marker
• We return L.marker with our custom configuration that includes a class of icon for the container and our custom HTML.
• Additionally, we add the riseOnHover property so when hoving over a marker, it surfaces itself above over the other markers on the map

We also want to add a bit of CSS here so that we can make sure our markers show up in the map and are usable. Let’s add this snippet to our assets/stylesheets/components/_map.scss file:

.icon-marker {

  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  color: white;
  width: 3.6em;
  height: 3.6em;
  font-size: .7em;
  font-weight: bold;
  background-color: $red-800;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(black, .9);

  &:hover {

    .icon-marker-tooltip {
      display: block;
    }

  }

}

.icon-marker-tooltip {

  display: none;
  position: absolute;
  bottom: 100%;
  width: 16em;
  font-size: 1.4em;
  padding: 1em;
  background-color: $blue-grey-900;
  border-radius: .4em;
  margin-bottom: 1em;
  box-shadow: 0 3px 5px rgba(black, .9);

  &:before {
    display: block;
    position: absolute;
    bottom: -.6em;
    left: 50%;
    content: '';
    width: 1.4em;
    height: 1.4em;
    background-color: $blue-grey-900;
    transform: rotate(45deg);
    margin-left: -.7em;
  }

  h2 {
    font-size: 1.5em;
    line-height: 1.2;
    margin-bottom: .1em;
    margin-top: 0;
  }

  h3 {
    font-size: 1.2em;
    margin: .1em 0;
    font-weight: normal;
    color: $blue-grey-100;
  }

  ul,
  p {
    font-weight: normal;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: .6em 0 0;
  }

}

What we’re doing:

• We create our round markers using the .icon-marker class and set up our .icon-marker-tooltip class to show up when hovered over
• Our .icon-marker-tooltip class is hidden by default, as it’s our tooltip, but we position it absolutely to appear over top of our marker and formatted the way we want it

And finally, once we have our geoJsonLayers created with our styling added, we can add it to the map!

geoJsonLayers.addTo(map)

Map with Coronavirus location data

Now you might be wondering why it doesn't appear to be centering properly. Go ahead and change the LOCATION variable at the top of the index.js file to:

const LOCATION = {
  lat: 0,
  lng: 0
};

Once that’s set, when the page reloads, the map should be centered in the middle of the world!

Map with Coronavirus location data centered with a tooltip

Follow along with the commit!

Yay, we did it! ?

If you followed along, you now have created your own Coronavirus map dashboard that gives some quick stats about the cases around the world.

Take what you learned and run with it. You can apply this to any other type of data that you can imagine.

What else can we do?

Add more styles and a custom basemap

In my original demo, I set up a custom basemap using Mapbox that allows me to have a dark background making the markers easier to see.

Creating a new basemap in Mapbox Studio

Mapbox is great and has a nice free tier if you’re interested in getting started.

Once you have a Mapbox account, you can even copy the style I used and make it your own.

Basic Dark Mapbox Theme

To learn how to integrate it, you can try to check out the source code of my original demo:

https://github.com/colbyfayock/coronavirus-map-dashboard

Add overview dashboard stats

Dashboards with maps like the Johns Hopkins University app allows us to see more than a look on the map, but a glimpse at quick stats about the cases around the world.

Johns Hopkins University Coronavirus Map Dashboard - March 29, 2020

The NovelCOVID API has more endpoints like /all that provide a few global stats.

Be safe and stay informed

I want to reiterate that you should make sure you're staying up to date using official sources for information, such as the Johns Hopkins University dashboard. Though the data should be reliable, it should also be considered a proof of concept for building a map and referencing, but shouldn't be considered for any kind of statistical analysis.

Please take care of yourself during these times. We're all in this together! ❤️

Want to learn more about maps?

You can check out a few of my other resources to get started:

• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

And now – even as the pandemic lets up in China – schools remain closed. Most of the shops are still closed. People still can’t go out and enjoy the spring.

In this global public health crisis, it's not just front line medical staff taking action. Other people are producing masks and protective equipment, transporting daily supplies, and providing psychological assistance to people in affected areas.

And developers are jumping into action, too.

The Hack for Wuhan Hackathon**

The wuhan2020 open source community planned a big hackathon. The theme: open source collaboration to tackle the challenges behind the epidemic.

Together, they encouraged developers to take advantage of their own technology to support this new smokeless war.

wuhan2020 is a group of independent developers who write code to aggregate and analyze epidemic data. They use this to predict the spread of the virus and figure out where to send medical supplies.

Since wuhan2020 was created in January, it has already attracted more than 3,000 volunteers from different countries.

They reached out to freeCodeCamp asking if we'd be interested in helping support their upcoming hackathon. I also discovered that the leader of freeCodeCamp's Chengdu study group, Shui Ge, was one of wuhan2020's core developers.

How freeCodeCamp Got Involved

freeCodeCamp joined the hackathon organization team as a cohost. Several of our contributors helped plan the competition, served as judges, and maintained the GitHub repository.

It took only 20 days from initial idea to hosting the hackathon itself.

Here is some quick data about the event:

• More than 50 volunteers hosted the competition
• 902 contestants from 33 countries signed up
• 33 teams entered the preliminary round. 12 teams reached the final round. And 8 teams won the grand prize.
• 4 companies provided technical resources for the competition, including IBM Developer, Agora.io, Tencent Serverless, and Amazon Web Services.
• 45 industry professionals around the world provided guidance, such as Connie Chan at the Andreessen Horowitz Venture Capital firm, former Alibaba CTO Zhuang Ziming, and Eva Woo from The Stanford Center on Philanthropy and Civil Society (PACS)
• 48 media published articles about the hackathon that more than 700,000 people read

Even more data. Yes - this is in Chinese but if you can't read Chinese you may be able to guess the meaning from the icons :)

Hackathon Themes

The overall theme of the hackathon was: use open source software to solve the social challenges behind the epidemic.

Introducing Some of the Winning Projects

The 12 finalists started their live demos online, and judges were able to comment online as well.

Finalist: A One-stop Open Platform for Epidemic Data**

This open platform helps researchers efficiently collect, label, and analyze outbreak data.

Lots of official agencies and health commissions report fine-grained epidemic data. But the data formats are often incompatible, and require humans to interpret them. This makes it impossible to use crawlers to automatically crawl and structure the data. You have to introduce skilled manual labor.

So how do you collect data efficiently with as little labor as possible?

This project adopts an open source collaboration method, bringing all people interested in the data to this platform. Then the platform helps people structure and label the data.

Once that's done, the platform makes the data available through a public API. Scientists and developers can build other tools on top of this API.

autovax

Autovax is a web application that allows a vaccine and other treatment drugs to be automatically generated from the virus genome and virus genes.

A researcher from Harvard is developing this to help with COVID-19.

City Hero

In this educational game, you can choose a profession – such as doctor or nurse – to experience their life during the pandemic. This helps players understand the people involved in the aid effort, and the difficult choices they face.

The Path Forward

The Hack for Wuhan hackathon was not just a challenge for the contestants, but also a challenge for the organization team. We planned and executed everything in just 20 days, and helped 900 developers participate.

I want to thank everyone involved. And thank you for reading this hackathon report.

I hope you all will stay safe, and that we can all embrace spring as soon as it's safe.

If you are interested in learning more about these projects, or participating in our next hackathon, you can contact me on WeChat at fcczhongguo, or on Twitter.