Creating COVID-19 Heat Map for Specific Countries

If you’re using the plugin to create maps for individual countries with data about the new coronavirus (COVID-19), here are some tips on how to do it.

Portugal confirmed cases by municipalities

March 26 2020

Updated on March 26th, 14:00
Municipalities with less than 3 cases are not included

March 25 2020

Updated on March 25th, 21:00
Data only represents ~50% of total confirmed cases.


Getting the data

The data available might not be formatted the way you want. If you’re displaying a small country with a small number of regions, you can add the data manually to each region. In the example above for Portugal, the data is released in a table in PDF format, so it’s not available to be used directly by the plugin. I first needed to convert that data into JSON and then use it as a custom data source for the map. Consider the id property of your JSON entries, should match either the real region ID or the name. The plugin won’t be able to recognize entries that don’t match either.

I wrote a couple of other articles on how to use external data sources to feed the map automatically, but this will require javascript knowledge.

Creating the Map

Once you know where you’ll get the data from and have selected the map, you can create it. Here are some links that will help:

If you have any question feel free to leave a comment below or contact me.

US Map for COVID-19 in WordPress

If you’re using this plugin to build a map to report on the number of cases of the new coronavirus disease (COVID-19), following up on the latest article showing how you could create a map of the world using real-time data from external sources, in this example I’ll provide some custom code to build a US specific heat map.

We use data made available by NovelCovid API.


Most of the technical details are described in the previous post. We’ll jump straight to the important details. If you’re using the plugin, you can download the export file for the map above.

This map is just an example, you can do this to any country or even county maps if you have the data available. You can also add the data manually instead of reading from the external source.

If you have any question about this, leave a comment below or contact me.

Island of Ireland map divided by counties

Geopolitically, Ireland is divided between the Republic of Ireland (officially named Ireland), which covers five-sixths of the island, and Northern Ireland, which is part of the United Kingdom. But there are plenty of cases where it makes sense to represent the island without those geopolical borders and display the historical counties.

We used a custom JSON source to build this map of Ireland (source) divided by historical counties and added some markers to populate the map.

Creating an Interactive map for Coronavirus (Covid-19)

The end of the winter of 2020 in the north hemisphere has been marked with the quick spreading of the novel Coronavirus Covid-19. At the time I’m writing this, thousands of cases are confirmed daily across the world. This is a very serious threat and we all should be careful and follow the experts advice.

Some users have been using this plugin to create interactive maps to inform people about the virus and how it is spreading geographically. I’ve decided to create this article to answer some of the most common questions and provide some examples.

There are many ways you can create a map, below is an example of a map created using 2 external sources to feed the map data to colour countries and add round markers with different sizes. We use data made available by Johns Hopkins University, copyrighted, provided to the public strictly for educational and academic research purposes. We also use data from CoronaVirus REST API v1.0, available under the GPL3 license to identify the affected countries.

Update April 1st 2020

In recent weeks the NovelCovid API became a reliable source to get the data from and therefore I updated this example accordingly. The API formats the data in such a way that we almost don’t need any custom code to make it work with the plugin, we just need to add the link to the API and adjust some of the settings. Updated map below. There’s no need to use the custom callback function I wrote below. I will still leave it in the article for reference.

Interactive Coronavirus Covid-19 Map


The above map might be cached and the data might not be updated all the time.

If you’re using the plugin, you can download this export file and import a copy of this map using the builtin WordPress import feature. Make sure to credit the sources above. The purpose of this article is not to take advantage of the current situation, but rather to help users build a map for their projects.

Other Examples

US Map divided by states with coronavirus info
USA specific Example
World Map Covid-19
Example of an older version of the map above using markers instead of colouring the countries.

Data Source

The first thing to consider is where to get the data from and how to add it to the map. The easiest way is to add the data manually. You can use the plugin interface to simply add data to the countries or create markers. This is easier if you’re gathering data for a single country or region. You can explore the builtin heatmap options or customize the map the way you want.

If you want to gather data from the hole world or a bigger region, adding all the data manually will be too much work and you might need to use external sources to feed the map. However, using external data sources will probably require some knowledge of javascript, since usually the available data is not formatted in a way that is directly compatible with the plugin.

To colour regions, the plugin is able to read CSV data in the following format, using the “Custom Data Source > Raw Data” option.

Region Code, Title, Tooltip Content, Value, Color Code;

It’s also compatible with JSON in the following format:

[
	{
		name: "California",
		id: "US-CA",
		tooltipContent: "United States - Hello California!",
		fill: "#6699cc",
		hover: "#660000",
		content: "https://california.com/",
		action: "open_url",
		value: "0",
		useDefaults: "0",
	},
	{
		name: "Texas",
		id: "US-TX",
		tooltipContent: "United States - Hello Texas!",
		fill: "#6699cc",
		hover: "#660000",
		content: "https://texas.com/",
		action: "open_url",
		value: "0",
		useDefaults: "0",
	}
]

The above sample is for regions. For markers you would also need the latitude and longitude properties.

The information below is outdated. I have now found a good reliable source. I’ll leave the information below for reference.

At the time of this writing, I couldn’t find any available data source that followed this format, so the solution is to use the custom javascript to get the existing data and format it accordingly using the custom callback sanitize option. You will need to have javascript experience, since the plugin will only provide you the possibility to run that javascript, you are responsible for the code there. I wrote a custom javascript function that does the following:

  • Use the fetch API to get the CSV made available by the Johns Hopkins University and convert the data into a JSON object compatible with the plugin.
  • Since the numbers of cases have such a high range, using the included heatmap options wouldn’t display the round markers in the best way, so I created some code to generate different sizes for the markers, based on different ranges.
  • Gets the JSON content provided by CoronaVirus REST API added as the custom data source for the regions and corrects some of the region codes to make it compatible with the map. (For example, change ‘USA’ to ‘US’, change ‘UK’ to ‘GB’, among others.

The code I wrote might not be the best and performant, but it should give you an idea of what you can do and adjust accordingly. This is the code I used:

function igm_custom_filter(data) {

let coronaMarkers;

jQuery.ajax({
  url: "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_19-covid-Confirmed.csv",
  type: 'get',
	async: false, 
  dataType: 'text',
  success: function(response) {
    const lines = response.split('\n');
    const labelKeys = lines.shift().split(',');
    const output = [];
    for (let line of lines) {
			
			if(typeof line === 'string' && line.startsWith(',')){
			line = '<span></span>' + line;
			}

 			const items = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g);
			if( !Array.isArray(items)){ continue; }
      const peopleArr = items.slice(4);
			const cases = parseInt( peopleArr[peopleArr.length - 1 ] );
			
			radius = 5;

      if(cases>100){
         radius = 10;
      }

			if(cases>500){
         radius = 15;
      }

			if(cases>1000){
         radius = 20;
      }

			if(cases>5000){
         radius = 25;
      }

			if(cases>10000){
				radius = 30;
			}

      const doc = {
				'id':items[0],
				'region':items[0],
				'country':items[1],
				'latitude':parseFloat( items[2] ),
				'longitude': parseFloat( items[3] ),
				'radius':radius,
				'cases': cases,
				'fill':'rgba(221,51,51,0.47)',
				'hover':'rgba(221,51,51,0.8)',
				'useDefaults':0
			};
      output.push({ ...doc });
    }
    coronaMarkers = output;
  }
});

		data.roundMarkers = coronaMarkers;

// regions

data.regions.forEach(function(item,index){

data.regions[index].country = data.regions[index].name;

if( data.regions[index].name === 'USA') {
	data.regions[index].name = 'US';
  data.regions[index].id = 'US';
}

if( data.regions[index].name === 'UK') {
	data.regions[index].name = 'GB';
  data.regions[index].id = 'GB';
}

if( data.regions[index].name === 'S. Korea') {
	data.regions[index].name = 'KR';
  data.regions[index].id = 'KR';
}

});

    return data;
}

The code above was added in the Custom JS field for the Map. It might not be perfect, but it should provide you some guidelines to improve upon it. I used Ajax, since I know my page loads jQuery. Remember, the code added to the custom JS field is your responsibility, the plugin will only trigger it. If the map doesn’t display, you might have some javascript errors. The export file provided above includes a minified version of the code. Remember to credit the sources for the data and use it according to the licenses.

Tooltip Information

To have the map display the tooltip information with based on the data provided, we used the ‘Tooltip Template’ option. There you can use placeholders for the existing data. I ended up using the following:

{region} {country} <br> Cases: {cases}

Both the data for the markers and regions add a property in the final json called ‘cases’ and ‘country’. The ‘region’ property doesn’t always exist, but it’s left blank. Depending on your data and the available properties, you can use different placeholders.

Other Map Controls

I enabled the Zoom and Export Map controls to enhance the map. I also used the custom Legend feature to identify the 2 types of data, the infected countries and the clusters represented by the round markers.

Disclaimer

The purpose of this article is not to take advantage of the current situation, but rather to help users build a map for their projects, since some have made questions about how to create one. If you use the same data sources I mentioned, make sure to credit them. The plugin itself is not able to do everything, you will need custom Javascript, which is your responsibility. The exported map I made available above shouldn’t be used without following the licenses from the data sources.

Stay safe and use this to help others and raise awareness about this threat that is often underrated.

Feel free to leave any question in the comments below or contact us.