Some countries like India, China, and some other have local regulations regarding how their borders are drawn that differ from UN-mandated or actually controlled territories. This tutorial will explain how to use country-specific maps with MapChart.
Available maps
The following country-specific versions of World map are currently available:
| Country | Map files (.ts; .js; .json) | Map global vars |
|---|---|---|
| China | worldChinaLowworldChinaHighworldChinaUltra | am4geodata_worldChinaLowam4geodata_worldChinaHigham4geodata_worldChinaUltra |
| India | worldIndiaLowworldIndiaHighworldIndiaUltra | am4geodata_worldIndiaLowam4geodata_worldIndiaHigham4geodata_worldIndiaUltra |
| Morocco | worldMoroccoLowworldMoroccoHighworldMoroccoUltra | am4geodata_worldMoroccoLowam4geodata_worldMoroccoHigham4geodata_worldMoroccoUltra |
Using maps
Using these country-specific maps works exactly like you would use regular world map. Except instead of world map you use some specific map, e.g. worldMorocco.
Please note, that you need to load/import specific file:
import am4geodata_worldMoroccoLow from "@amcharts/amcharts4-geodata/worldMoroccoLow";
<script src="//www.amcharts.com/lib/4/geodata/worldMoroccoLow.js"></script>
As well as use map global/local variable:
chart.geodata = am4geodata_worldMoroccoLow;
chart.geodata = am4geodata_worldMoroccoLow;
{
// ...
"geodata": "worldMoroccoLow"
}
Examples
China
See the Pen amCharts 4: China world map by amCharts team (@amcharts) on CodePen.
India
See the Pen amCharts 4: India world map by amCharts team (@amcharts) on CodePen.
Morocco
See the Pen amCharts 4: Morocco world map by amCharts team (@amcharts) on CodePen.