Country-specific world maps

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:

CountryMap files (.ts; .js; .json)Map global vars
ChinaworldChinaLow
worldChinaHigh
worldChinaUltra
am4geodata_worldChinaLow
am4geodata_worldChinaHigh
am4geodata_worldChinaUltra
IndiaworldIndiaLow
worldIndiaHigh
worldIndiaUltra
am4geodata_worldIndiaLow
am4geodata_worldIndiaHigh
am4geodata_worldIndiaUltra
MoroccoworldMoroccoLow
worldMoroccoHigh
worldMoroccoUltra
am4geodata_worldMoroccoLow
am4geodata_worldMoroccoHigh
am4geodata_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 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
  })
);

Examples

China

See the Pen
amCharts 5: World map (China version)
by amCharts team (@amcharts)
on CodePen.0

India

See the Pen
amCharts 5: World map (China version)
by amCharts team (@amcharts)
on CodePen.0

Morocco

See the Pen
amCharts 5: World map (India version)
by amCharts team (@amcharts)
on CodePen.0

Posted in Uncategorized