Ordering map polygons

Polygons in MapPolygonSeries are ordered automatically by size. This tutorial will show how we can alter this order to suit our purposes.

Default behavior

As we already mentioned in the preamble, the polygons are ordered by size.

This is done so that tiny polygons are not obstructed by larger ones.

This, however, creates another problem - when selecting polygons using TAB key (accessibility feature), the order by which such selection happens might seem random to our user:

Changing the order

MapPolygonSeries has a way to change ordering (or disable it altogether): a sortPolygonsBy setting.

Available values are as follows.

Value	Comment
"area" (default)	Polygons are ordered by their size
"name"	Polygons are ordered by their name
"longitude"	Polygons are ordered by their West-most longitude, causing selection in somewhat columnar fashion
"latitude"	Polygons are ordered by their North-most latitude, causing selection in somewhat horizontal fashion
"id"	Polygons are ordered by their ID
"none"	Polygons are not order and will be drawn in the same order as they appear in geodata

Changing the order is as easy as setting sortPolygonsBy on your series:

polygonSeries.sortPolygonsBy = "longitude";

polygonSeries.sortPolygonsBy = "longitude";

{
  // ...
  "series": [{
    // ...
    "sortPolygonsBy": "longitude"
  }]
}

• 

• 

Setting ordering direction

We can change order direction as well: there's a sortPolygonsReversed setting, which is a boolean with false as default.

To reverse the ordering direction, we simply have to set it to true:

polygonSeries.sortPolygonsBy = "longitude";
polygonSeries.sortPolygonsReversed = true;

polygonSeries.sortPolygonsBy = "longitude";
polygonSeries.sortPolygonsReversed = true;

{
  // ...
  "series": [{
    // ...
    "sortPolygonsBy": "longitude",
    "sortPolygonsReversed": true
  }]
}

Full example

See the Pen Ordering polygons in MapPolygonSeries by amCharts team (@amcharts) on CodePen.24419