In this example we created a markers map with information about the population of the main cities in South Africa. We used heat map rules to make the markers bigger when the population numbers are bigger.
The map is actually reading data from a Google Spreadsheet. Read more information about this technique.
Following up on the latest articles about this covid-19, in this example we use the awesome NovelCovid API to get data for each state in the US to populate individual state maps with county data. Here’s an example for Alabama:
You can download the export file here.
You will need to add the code below to the custom JS field and change the number in igm_custom_filter_20997 to the ID of your map. And where it says “Alabama” you would need to change it to the state you’re currently displaying.
More detailed will follow below.
function igm_custom_filter_20997(data) {
data.regions = data.regions.filter(function(region){
return region.province == "Alabama";
});
data.regions.map(function(region){
Object.assign(region, region.stats);
});
return data;
}In this map we setup the regions to have a custom data source, an external JSON file generated by the API with the information for all US counties: https://corona.lmao.ninja/v2/jhucsse/counties
For the tooltip template, we added the following:
<strong>{county}</strong> <br> Confirmed: {confirmed} <br> Deaths: {deaths}And in the Heatmap configurations we used the ‘confirmed’ information as the source:
In order to get the information to work properly, we need to write a custom callback function to format the data and only retrieve the data from a specific state. The code used was already mentioned above.
Remember to change the “20997” from the code above, with the ID of your map for it to work properly. And change the state name to the one you’re building.
Feel free to leave a comment below if you have any question.
Following up on the examples created before, in this examples we have created for other countries, here’s an example for Australia with real time information about confirmed COVID-19 cases, the new coronavirus outbreak.
You can download the import file.
The data is being fetched from Johns Hopkins University open repository of data for COVID-19. Make sure to credit them in your projects.
To create such a map, you need some custom code to fetch the external content. I have created a gist with the code used for the map above.
COVID-19 is an infectious disease caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2). The disease was first identified in late 2019 in Wuhan, the capital of China’s Hubei province, and has since spread globally, resulting in a coronavirus pandemic, which as the time of this writing, is still ongoing.
If you plan to create a map like the one above and have any questions, feel free to leave a comment below or contact me.
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.
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.
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.
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.