USA - Interactive Geo Maps

Subdividing USA states to create custom regions

Carlos Moreira on November 9, 2021

If you need to create sub-regions of a state in the US map, one approach could be to create individual state maps, where you create groups of regions with counties and they overlay those maps in the main US map. The result could be something like the example below:

The result is not perfect, but it’s usable in most scenarios.

This is achieved by using the individual county codes in a single region entry, in the state map:

In addition to creating groups, in the individual state map of the example below, we also set the borders to be 0px, so that the state borders are less visible. If you have the groups coloured the same way, you can set the border colour to be that same colour, instead of setting it to 0px. Another approach to improve the county borders issue could be to create individual maps for each group and this way you can set the border colour individually for those maps. In the example above you would end up having 3 maps in addition to the base map.

Other solutions to create custom regions, would include the creation of custom geojson files, which might not be so easy.

Using custom elements to interact with map

Carlos Moreira on April 13, 2020

Both in the Free version and Pro version we can take advantage of the builtin javascript methods provided by the plugin to create interactions with our own custom elements on a page. The example below includes some custom made lists and some custom Javascript code to give interaction to those lists.

Consider that the custom code or lists is not part of the plugin, they are just an example of what can be done using some custom code to interact with the existing map.

Click to Select California
Click to Select Florida
Hover California (You can also click)
Highlight California and Florida
Hover to select Florida
Hover to select California

The example above was all made using inline code and some extra css for the hover effects on the list. The code from the list above is the following:

<ul id="custom_interact">
<li onclick="iMapsManager.select(21042,'US-CA');">Click to Select California</li>
<li onclick="iMapsManager.select(21042,'US-FL');">Click to Select Florida</li>
<li onmouseover="iMapsManager.hover(21042,'US-CA');" onmouseout="iMapsManager.clearHovered(21042)" onclick="iMapsManager.select(21042,'US-CA');">Hover California (You can also click)</li>
<li onmouseover="iMapsManager.highlight(21042,'US-CA,US-FL');" onmouseout="iMapsManager.clearHighlighted(21042)">Highlight California and Florida</li>
<li onmouseover="iMapsManager.select(21042,'US-FL');" onmouseout="iMapsManager.clearSelected(21042)">Hover to select Florida</li>
<li onmouseover="iMapsManager.select(21042,'US-CA');" onmouseout="iMapsManager.clearSelected(21042)">Hover to select California</li>
</ul>

Refer to the documentation page for the javascript methods provided by the plugin for more information on how the methods work.

COVID-19 realtime US county maps

Carlos Moreira on April 6, 2020

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;
}

Setting up Regions

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

Setting Up Tooltip and Heatmap information

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:

Custom Callback

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.

US Map for COVID-19 in WordPress

Carlos Moreira on March 25, 2020

US Map divided by states with coronavirus info

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.