How to create Custom map using AmCharts

Question

There are many beautiful charts on Geographical Maps that can be drawn with AmCharts JS library as in https://www.amcharts.com/demos/#javascript-maps

However, I was wondering if it is possible to create a Custom Map. For example, I want to create a Global map with all Color-coded countries, but want to show US and Canada as one individual Country without any intermediate boundary between them. All other Countries should remain same.

Really appreciate for any pointer on above direction.

Thanks,

Have you looked at this tutorial? It tells you how to create your own map. — xorspark
Alternatively, you can also group countries together to make US and Canada behave as a single entity if you don't want to dive into the SVG and make your own changes. — xorspark
Thanks xorspark. However, the problem with this approach is still the internal boundary between 2 underlying countries is visible as white line. Any idea how to erase internal boundary line? — Bogaso
Have you tried setting the outlineAlpha in areasSettings? It will get rid of most of the white line but there will still be a faint line due to how the map SVG/js files are made. It's the closest you'll get to removing the boundaries without modifying the map SVG/js files directly. — xorspark

notacouch notacouch · Accepted Answer · 2018-11-15T01:18:30

With amCharts v4, we have switched to using GeoJSON for our maps.

While I'm sure there's some kind of way to merge geographical polygons using mapshaper, I haven't tried it out myself yet and have been getting comfortable using the free software, QGIS.

There's already a tutorial out there on merging polygons if you're interested. I'll give a quick, specific rundown here anyway.

Download & install QGIS, then go ahead and grab the latest version of amCharts v4 worldLow.json (or worldHigh.json if you want more detail), in this case I've used worldLow.json:

https://github.com/amcharts/amcharts4-geodata/blob/master/dist/script/json/worldLow.json

Raw file:

https://raw.githubusercontent.com/amcharts/amcharts4-geodata/master/dist/script/json/worldLow.json

Make a copy of the .json file or otherwise rename it, it will be overwritten in the steps below.
Open QGIS and start a new project
Menu: Layer -> Add Vector Layer -> Source(s) -> Vector Dataset(s): Choose above file -> Add
Enable editing on the layer by either: Clicking pencil icon, Menu: Layer -> Toggle Editing, or in the bottom left Layers panel right click the layer and select Toggle Editing in the context menu
Menu: Edit -> Select -> Select feature(s)
Select the US and Canada polygons.
Menu: Edit -> Merge selected features (near the bottom)

Save your project, save layer edits, now your json file will be updated.

It should look something like this:

https://gist.github.com/notacouch/485b8525a360c15690f1ab23cbf04940

Now to refer to this in your map, you can do so via:

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.geodataSource.url = "https://gist.githubusercontent.com/notacouch/485b8525a360c15690f1ab23cbf04940/raw/e6742c279571ae02166027817351a4250b1bea69/worldLow--canadia.json";

In addition, you can generate a new color per country by using the default ColorSet, e.g.

// Have amCharts generate a new color for each mapPolygon once they're available
//
// Learn more about Event Listeners:
// {@link https://www.amcharts.com/docs/v4/concepts/event-listeners/}
polygonSeries.events.on("datavalidated", function() {
  polygonSeries.mapPolygons.each(function(polygon, index) {
    // Learn more about ColorSets:
    // {@link https://www.amcharts.com/docs/v4/concepts/colors/#Color_sets}
    polygon.fill = chart.colors.getIndex(index);
  });
});

// Create hover state and set alternative fill color
//
// Learn more about States:
// {@link https://www.amcharts.com/docs/v4/concepts/states/}
var hs = polygonTemplate.states.create("hover");

// Darken the polygon's current color
//
// Learn more about Adapters:
// {@link https://www.amcharts.com/docs/v4/concepts/adapters/}
hs.adapter.add("fill", function(fill) {
  return fill.brighten(-0.2);
});

Here's a demo with all that thrown together:

https://codepen.io/team/amcharts/pen/abd95bebcfb65a74d9472043d63351fc

That's probably undesirable, you can also color via data binding, or via a heat map.

For customizing maps in v4 in general, I recommend checking out our guide on Creating custom maps. Between mapshaper, QGIS, and all the map-related files out there, there's bound to be a way to get the customization you want and possibly in short order, too.

Hope this helps.

How to create Custom map using AmCharts

1 Answers