Posts: 31
Joined: Sun May 16, 2021 4:17 pm

Update map via user input

Tue Jul 05, 2022 5:50 am


I've created a fileupload in angular, with which a user can upload an SVG file that gets converted into a map series (not relevant to the actual problem). Afterwards, a form with a range of input elements gets created for each of the countries, allowing the user to set a name, id, and whether it is supposed to be interactive on the map, as well as a preview of the map.
Whenever a change occurs in the form, an update function is called, which sets the chartOptions.series with the updated data. However, I'm noticing several issues:
  • If I change the name of a country (say, I enter an "n"), the first time nothing happens in the chart; if I then change it again (say, I enter a "b"), then the chart gets updated with the previous value (initial name + "n"); if I then delete the "b" again, the chart again shows the previous value (initial name + "n" + "b"); this goes on like that. The chart seems to be always getting updated with the previous state, not the current one.
  • If I change the id of a country, in the array, where there is only one country because only one has a set value, Highcharts adds two more countries, the 2nd one that is disabled, which doesn't get a value (it seems to be a copy from the mapData array, since it has a name and path attribute), and a third one, which is actually the first country, but with the previous id, also without value (also seemingly a copy of the mapData). Also, despite the updated id in both and series.mapData array, the country with value now shows up as inactive.
I assume the 2nd issue is related to the first, since the country gets active again after changing the id, then changing the name.

The only thing that seems to be working properly is the switch to set a country as interactive or disabled. I'm wondering, why do these inconsistencies exist, what does Highcharts do to create them, and not just use the data I provide to update (the data is correct prior to setting it as chartOptions.series)? How can I fix this and get the chart to update properly?

I've created a stackblitz to showcase the problems (without the SVG file upload): ... map-sna7hf

User avatar
Posts: 1718
Joined: Fri Aug 07, 2020 7:08 am

Re: Update map via user input

Wed Jul 06, 2022 1:16 pm

Thanks for your message and example.

Could you prepare a simplified version of your case? (With one input for better testing)

So far I can't tell what might be wrong.
Best regards
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”