Bug when loading the Map with specific geojson

[luanrjjj]

When attempting to load a map using a specific GeoJSON file representing the states of Brazil, I encounter a situation where sometimes I face the following issue:

I have researched this problem, and typically, the issues reported here or on StackOverflow are related to the direction of GeoJSON coordinates. However, in my case, the loading process occurs normally. Despite this, even after a successful reload, a state may still break during subsequent reload attempts. I am using React with amCharts 5.

[martynasma]

Do you mean that exactly same GeoJSON sometimes produces proper map and sometimes this square?

Would you be able to post this as a runnable demo, e.g. on CodePen?

[luanrjjj]

Yes, Exactly. I'm going to do this CodePen in the next week and put the link here.

[luanrjjj]

So, I created a example in the following repository :
https://gitlab.com/alfredofreitas/amcharts-map-test-debug/

It's a simple nextjs project with only 1 page, the dashboard page. So, to test the app you need only enter in localhost:3000/dashboard

To install the package is necessary npm install and after to run npm run dev.

If the necessary I can deploy the project also to the vercel.

It was possible to reproduce the bug when I change the select state, as is possible to see in following picture:

The geojson is in the maps_counties folder

[martynasma]

Can you post just the GeoJSON? I don't have a GitLab account and they are making me jump through all these hoops just to access a repo.

[luanrjjj]

Here a json used in the example
geojs-29-mun.json

[luanrjjj]

If you want I can put in the github also.

[luanrjjj]

The first load is fine, the problem is when I change the map based in a react state condition. The information is charged in the map but the image break

[luanrjjj]

Here the link to github repo: https://github.com/luanrjjj/map-test/tree/main/amcharts-map-test-debug-main/my-app

[martynasma]

Getting this:

[luanrjjj]

You need enter in /dashboard path. http://localhost:3000/dashboard

[martynasma]

I think I know what's going on.

When you use reverseGeodata: true setting it mutates the source GeoJSON by modifying the order of coordinates in it.

If you set geoJSON with the same (mutated) object again, it reverses coordinates again, thus creating visual anomaly.

The solution would be to always create a shallow copy of the GeoJSON you set:

geoJSON: JSON.parse(JSON.stringify(object))

[luanrjjj]

I did some testes here. It's better, but still unstable: the reload is broken with a probability around 30% - 50%. Do you have some other tip?

[martynasma]

I can't seem to be able to reproduce this outside of your specific app.

Here's a very basic repro case using your GeoJSON:
https://codepen.io/team/amcharts/pen/wvbvYNa/112f2ef728e40bf60ea92ee32ed9af7c?editors=0010

Technically, shallow-copying GeoJSON should be enough, as per above demo.

[github-actions]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.