AmCharts Map - Improving map performance

user_4326630 0
Viewed 271

I have an app that displays a world map using amCharts 4, in which each continent is to be colored differently and then there are some bubbles places in certain countries to show some data.

For the map, I have an object that lists all countries by the country code key. Then I have an API that returns the data regarding which countries have some values associated with them that should be displayed on the map.

For the purpose of having differently colored continents ( with country borders ) I created a different series for each continent and colored it accordingly. However due to the data structure, this wouldn't let me place the bubbles, so I have another series, beneath all the colored ones, of a full world map.

For the bubbles to be places, I've followed an example from the demos, and calculate the visual center for each country.

My problem is that this has become very resource-intensive, to the point where sometimes, randomly, the map fails to build properly resulting in all the bubbles being places on the top left corner. I was wondering if there are any ways to improve this performance, namely: - An easier way to calculate the visual center, or get the coordinates for such. - Some way to color each continent without having to rely on a separate series

amcharts4 amcharts javascript
1 Answers

If you don't need country borders, I recommend the following steps:

1) Create a map with countries and calculateVisualCenter = true set on country series. 2) When map is build, loop through all polygons and save visualLongitude/visualLatitude of each into some object, output the result in console. 3) Use the coordinates in your actual map for bubble positions.

Here is a quick demo where the coordinates are saved and logged to console: https://codepen.io/team/amcharts/pen/bGdQXzE

user_13075920
Related