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.
The following country-specific versions of World map are currently available:
Country
Map files (.ts; .js; .json)
Map global vars
China
worldChinaLow worldChinaHigh worldChinaUltra
am4geodata_worldChinaLow am4geodata_worldChinaHigh am4geodata_worldChinaUltra
India
worldIndiaLow worldIndiaHigh worldIndiaUltra
am4geodata_worldIndiaLow am4geodata_worldIndiaHigh am4geodata_worldIndiaUltra
Morocco
worldMoroccoLow worldMoroccoHigh worldMoroccoUltra
am4geodata_worldMoroccoLow am4geodata_worldMoroccoHigh am4geodata_worldMoroccoUltra
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 am5geodata_worldMoroccoLow from " @amcharts/amcharts5-geodata/worldMoroccoLow " ;
< script src = " //www.amcharts.com/lib/5/geodata/worldMoroccoLow.js " ></ script >
As well as use map global/local variable:
let polygonSeries = chart . series . push (
am5map . MapPolygonSeries . new (root , {
geoJSON: am5geodata_worldMoroccoLow
var polygonSeries = chart . series . push (
am5map . MapPolygonSeries . new ( root , {
geoJSON: am5geodata_worldMoroccoLow
Run * ---------------------------------------
* This demo was created using amCharts 5.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v5/
* ---------------------------------------
var root = am5 . Root . new ( " chartdiv " );
root . setThemes ([ am5themes_Animated . new ( root )]);
var chart = root . container . children . push (
am5map . MapChart . new ( root , {
projection: am5map . geoNaturalEarth1 ()
var polygonSeries = chart . series . push (
am5map . MapPolygonSeries . new ( root , {
geoJSON: am5geodata_worldChinaLow ,
polygonSeries . mapPolygons . template . setAll ({
polygonSeries . mapPolygons . template . states . create ( " hover " , {
fill: am5 . color ( 0x677935 )
< div id = " chartdiv " ></ div >
-apple-system , BlinkMacSystemFont, " Segoe UI " , Roboto, Helvetica , Arial , sans-serif ,
" Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
"projectionName" : " geoNaturalEarth1 "
"type" : " MapPolygonSeries " ,
"geoJSON" : " am5geodata_worldChinaLow " ,
World map (China version) world-map-china-version
Run * ---------------------------------------
* This demo was created using amCharts 5.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v5/
* ---------------------------------------
var root = am5 . Root . new ( " chartdiv " );
root . setThemes ([ am5themes_Animated . new ( root )]);
var chart = root . container . children . push (
am5map . MapChart . new ( root , {
projection: am5map . geoNaturalEarth1 ()
var polygonSeries = chart . series . push (
am5map . MapPolygonSeries . new ( root , {
geoJSON: am5geodata_worldIndiaLow ,
polygonSeries . mapPolygons . template . setAll ({
polygonSeries . mapPolygons . template . states . create ( " hover " , {
fill: am5 . color ( 0x677935 )
< div id = " chartdiv " ></ div >
-apple-system , BlinkMacSystemFont, " Segoe UI " , Roboto, Helvetica , Arial , sans-serif ,
" Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
"projectionName" : " geoNaturalEarth1 "
"type" : " MapPolygonSeries " ,
"geoJSON" : " am5geodata_worldIndiaLow " ,
World map (India version) world-map-india-version
Run * ---------------------------------------
* This demo was created using amCharts 5.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v5/
* ---------------------------------------
var root = am5 . Root . new ( " chartdiv " );
root . setThemes ([ am5themes_Animated . new ( root )]);
var chart = root . container . children . push (
am5map . MapChart . new ( root , {
projection: am5map . geoNaturalEarth1 ()
var polygonSeries = chart . series . push (
am5map . MapPolygonSeries . new ( root , {
geoJSON: am5geodata_worldMoroccoLow ,
polygonSeries . mapPolygons . template . setAll ({
polygonSeries . mapPolygons . template . states . create ( " hover " , {
fill: am5 . color ( 0x677935 )
< div id = " chartdiv " ></ div >
-apple-system , BlinkMacSystemFont, " Segoe UI " , Roboto, Helvetica , Arial , sans-serif ,
" Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
"projectionName" : " geoNaturalEarth1 "
"type" : " MapPolygonSeries " ,
"geoJSON" : " am5geodata_worldMoroccoLow " ,
World map (Morocco version) world-map-morocco-version