Maps with displaced areas and dividers

amCharts 5 comes with a few maps that has some of their areas (islands) deliberately displaced, so they are closer to the mainland. Maps like that usually make a much better effective use of the available screen space at the expense of displaced areas not being compatible with actual lat/long coordinates.

Map list

Below is a list of maps that have their areas displaced:

Map(s)	Country
franceDepartments2Low, franceDepartments2High	France
spain2Low, spain2High	Spain
spainProvinces2Low, spainProvinces2High	Spain
usaTerritoriesLow, usaTerritoriesHigh	United States
usaTerritories2Low, usaTerritories2High	United States

Usage

Loading the map

Using maps like that is exactly the same as using regular maps - we just add them as geodata of a MapPolygonSeries.

Important

Placing markers using actual latitude/longitude coordinates for such areas will not work as expected, as they are deliberately displaced.

Using dividers

The data for such maps are equipped with additional information for divider lines between separate areas.

Those are not visible by default.

If we’d like to enable the divider lines, we would need to configure a separate MapLineSeries with the same map data:

TypeScript

let dividerSeries = chart.series.push(
  am5map.MapLineSeries.new(root, {
    geoJSON: am5geodata_spain2Low
  })
);

dividerSeries.mapLines.template.setAll({
  strokeOpacity: 0.2
});

JavaScript

var dividerSeries = chart.series.push(
  am5map.MapLineSeries.new(root, {
    geoJSON: am5geodata_spain2Low
  })
);

dividerSeries.mapLines.template.setAll({
  strokeOpacity: 0.2
});

Demo

Open in CodePen