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 worldChinaUltraam4geodata_worldChinaLow am4geodata_worldChinaHigh am4geodata_worldChinaUltra
India
worldIndiaLow worldIndiaHigh worldIndiaUltraam4geodata_worldIndiaLow am4geodata_worldIndiaHigh am4geodata_worldIndiaUltra
Morocco
worldMoroccoLow worldMoroccoHigh worldMoroccoUltraam4geodata_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 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 "
* ---------------------------------------
* This demo was created using amCharts 4.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
var chart = am4core . create ( " chartdiv " , am4maps . MapChart );
chart . geodata = am4geodata_worldChinaLow ;
chart . projection = new am4maps . projections . Miller ();
// Create map polygon series
var polygonSeries = chart . series . push ( new am4maps . MapPolygonSeries ());
polygonSeries . exclude = [ " AQ " ];
// Make map load polygon (like country names) data from GeoJSON
polygonSeries . useGeodata = true ;
var polygonTemplate = polygonSeries . mapPolygons . template ;
polygonTemplate . tooltipText = " {name} " ;
polygonTemplate . fill = am4core . color ( " #74B266 " );
// Create hover state and set alternative fill color
var hs = polygonTemplate . states . create ( " hover " );
hs . properties . fill = am4core . color ( " #367B25 " );
chart . events . on ( " ready " , function ( ev ) {
polygonSeries . getPolygonById ( " CN " ) . isHover = true ;
< div id = " chartdiv " ></ div >
-apple-system , BlinkMacSystemFont, " Segoe UI " , Roboto, Helvetica , Arial , sans-serif ,
" Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
China world map china-world-map * ---------------------------------------
* This demo was created using amCharts 4.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
var chart = am4core . create ( " chartdiv " , am4maps . MapChart );
chart . geodata = am4geodata_worldIndiaLow ;
chart . projection = new am4maps . projections . Miller ();
// Create map polygon series
var polygonSeries = chart . series . push ( new am4maps . MapPolygonSeries ());
polygonSeries . exclude = [ " AQ " ];
// Make map load polygon (like country names) data from GeoJSON
polygonSeries . useGeodata = true ;
var polygonTemplate = polygonSeries . mapPolygons . template ;
polygonTemplate . tooltipText = " {name} " ;
polygonTemplate . fill = am4core . color ( " #74B266 " );
// Create hover state and set alternative fill color
var hs = polygonTemplate . states . create ( " hover " );
hs . properties . fill = am4core . color ( " #367B25 " );
chart . events . on ( " ready " , function ( ev ) {
polygonSeries . getPolygonById ( " IN " ) . isHover = true ;
< div id = " chartdiv " ></ div >
-apple-system , BlinkMacSystemFont, " Segoe UI " , Roboto, Helvetica , Arial , sans-serif ,
" Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
India world map india-world-map * ---------------------------------------
* This demo was created using amCharts 4.
* For more information visit:
* https://www.amcharts.com/
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
var chart = am4core . create ( " chartdiv " , am4maps . MapChart );
chart . geodata = am4geodata_worldMoroccoLow ;
chart . projection = new am4maps . projections . Miller ();
// Create map polygon series
var polygonSeries = chart . series . push ( new am4maps . MapPolygonSeries ());
polygonSeries . exclude = [ " AQ " ];
// Make map load polygon (like country names) data from GeoJSON
polygonSeries . useGeodata = true ;
var polygonTemplate = polygonSeries . mapPolygons . template ;
polygonTemplate . tooltipText = " {name} " ;
polygonTemplate . fill = am4core . color ( " #74B266 " );
// Create hover state and set alternative fill color
var hs = polygonTemplate . states . create ( " hover " );
hs . properties . fill = am4core . color ( " #367B25 " );
chart . events . on ( " ready " , function ( ev ) {
polygonSeries . getPolygonById ( " MA " ) . isHover = true ;
< div id = " chartdiv " ></ div >
-apple-system , BlinkMacSystemFont, " Segoe UI " , Roboto, Helvetica , Arial , sans-serif ,
" Apple Color Emoji " , " Segoe UI Emoji " , " Segoe UI Symbol " ;
Morocco world map morocco-world-map
