Using U.S. county maps

You might have not known that the geodata package for Map Chart includes not only country maps, but also detailed county maps for all U.S. states.

Using county maps

The county map files are located under region/usa subdirectory of the geodata package.

If you are not familiar with the geodata package and how maps are loaded into Map Chart, please make sure you check out this section.

Loading

Normally, you would load the geodata definition direct from the geodata package's root:

import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
<script src="//www.amcharts.com/lib/4/geodata/worldLow.js"></script>

Then you would access the map definition using variable am4geodata_[mapname].

It's not that much different with county maps, except you need to use subdirectory references both in referring to the files and variables:

import am4geodata_region_usa_caLow from "@amcharts/amcharts4-geodata/region/usa/caLow";
<script src="//www.amcharts.com/lib/4/geodata/region/usa/caLow.js"></script>

And the variable with the loaded map definition would be am4geodata_region_usa_[mapname], e.g. am4geodata_region_usa_caLow.

Identifying

Each map in the U.S. county map directory is identified by the state's ISO two-digit code (in lowercase).

In the above example we were loading a map for California's counties, since that state's ISO code is "CA".

As with all maps in amCharts 4, county maps come in two flavors: low-detail and high-detail. They are suffixed with "Low" and "High" respectively.

US-wide county map

There's one additional map in the directory as well: usaCountiesLow and usaCountiesHigh.

As you've probably guessed, it has counties for all the states on one single map.

Beware though, it's huge, so, unless absolutely necessary, don't throw that onto your users.

Example

Below, you will find an example of a live map displaying California's counties:

See the Pen amCharts 4: California counties by amCharts (@amcharts) on CodePen.24419

Related content