CODEWITHSUNDEEP
javascriptamcharts
Bogaso
Bogaso

Reputation: 3318

How to create Custom map using AmCharts

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,

Upvotes: 2

Views: 3896

Answers (1)

notacouch
notacouch

Reputation: 3655

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.

Upvotes: 4

Related Questions