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
.
IMPORTANTPlacing 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:
let dividerSeries = chart.series.push( am5map.MapLineSeries.new(root, { geoJSON: am5geodata_spain2Low }) ); dividerSeries.mapLines.template.setAll({ strokeOpacity: 0.2 });
var dividerSeries = chart.series.push( am5map.MapLineSeries.new(root, { geoJSON: am5geodata_spain2Low }) ); dividerSeries.mapLines.template.setAll({ strokeOpacity: 0.2 });
Demo
See the Pen
Map of Spain with displaced islands by amCharts team (@amcharts)
on CodePen.0