Since version 4.1.8 the geodata package for Map Chart includes a collection of maps for U.S. Congressional Districts. This tutorial will show how you can use them.
Using congressional district maps
The congressional district map files are located under region/usa/congressional 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 congressional district maps, except you need to use subdirectory references both in referring to the files and variables:
import am4geodata_region_usa_congressional_caLow from "@amcharts/amcharts4-geodata/region/usa/congressional/caLow";
<script src="//www.amcharts.com/lib/4/geodata/region/usa/congressional/caLow.js"></script>
And the variable with the loaded map definition would be am4geodata_region_usa_congressional_[mapname], e.g. am4geodata_region_usa_congressional_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 congressional districts, since that state's ISO code is "CA".
As with all maps in amCharts 4, congressional district maps come in two flavors: low-detail and high-detail. They are suffixed with "Low" and "High" respectively.
US-wide congressional districts map
There's one additional map in the directory as well: usaCongressionalLow and usaCongressionalHigh.
As you've probably guessed, it has congressional districts 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 congressional districts:
See the Pen amCharts 4: California congressional districts by amCharts team (@amcharts) on CodePen.24419