County maps – amCharts 4 Documentation

The geodata package for MapChart includes not only country and world maps. It also has special county maps for some of the worlds countries, like United States, Canada, and Mexico. This tutorial will show how you can use them.

Using county maps

The county map files for each available country are located under regionsubdirectory 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.

Supported countries

Country	Map directory	Example file	Example global var
Canada	`region/canada`	`region/canada/abLow`	`am4geodata_region_canada_abLow`
Mexico	`region/mexico`	`region/mexico/jalLow`	`am4geodata_region_mexico_jalLow`
United States	`region/usa`	`region/usa/caLow`	`am4geodata_region_usa_caLow`

Identifying

Each map in the respective county map directory is identified by the state's ISO code (in lowercase).

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

Canada uses two-digit codes, too. E.g. British Columbia map is identified by its "BC" code.

Mexico uses three-digit codes, e.g. Jalisco map is identified by "JAL".

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.

Country-wide county map

There's one additional map in each country's directory as well: [country]CountiesLow and [country]CountiesHigh.

It contains all of the counties for the whole country.

Country	File	Global var
Canada	`region/canada/canadaCountiesLow` `region/canada/canadaCountiesHigh`	`am4geodata_region_canada_canadaCountiesLow` `am4geodata_region_canada_canadaCountiesHigh`
Mexico	`region/mexico/mexicoCountiesLow` `region/mexico/mexicoCountiesHigh`	`am4geodata_region_mexico_mexicoCountiesLow` `am4geodata_region_mexico_mexicoCountiesHigh`
United States	`region/usa/usaCountiesLow` `region/usa/usaCountiesHigh`	`am4geodata_region_usa_usaCountiesLow` `am4geodata_region_usa_usaCountiesHigh`

Beware though, those maps are huge, so, unless absolutely necessary, don't throw that onto your users.

Examples

Canada

The map below displays counties for Ontario:

See the Pen amCharts 4: Ontario counties by amCharts team (@amcharts) on CodePen.

Mexico

An one for Jalisco in Mexico:

See the Pen amCharts 4: Jalisco counties by amCharts team (@amcharts) on CodePen.

United States

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.