County maps

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:

TypeScript

import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

JavaScript

<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:

TypeScript

import am4geodata_region_usa_caLow from "@amcharts/amcharts4-geodata/region/usa/caLow";

JavaScript

<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:

Open in CodePen

Mexico

An one for Jalisco in Mexico:

Open in CodePen

United States

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

Open in CodePen

Related content

• Using U.S. congressional districts maps
• Combining map polygon series to create grouped outlines