Changing colors of counties programmatically in US map

[iantukic]

Hello,

can someone give example on how to programmatically (by click of some button) change colors of one or more counties on this map https://www.highcharts.com/demo/maps/us-counties

Please do it by using 'highcharts-react-official' package,

Thanks.

[dominik.c]

Hello iantukic!

Thanks for contacting us with your question!

Here you've got this demo built in react: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

But what do you exactly mean by changing counties' colors? We've got already colorAxis in the demo. Could you explain it more precisely?

API: https://api.highcharts.com/highmaps/colorAxis

Best regards!

[iantukic]

I took that map as an example because it has counties, but I don't need color axis at all.

All I need is an US map with counties. Initially all counties (whole map) should be of the same color, green for example. On click of the button I would like to change color of some of the counties to red. How can I achieve this with highcharts-react-official package?

[dominik.c]

Hi again!

So here we've got the demo without colorAxis: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Now I need you to specify more precisely how would you like to color the counties. Do you want to color them, when we click the button, right? Do you want to choose points that will be colored, or you'd rather have hardcoded points that will be colored every time the button is clicked?

Best regards!

[iantukic]

Thanks for the demo. Yes, I want to color it on the click of the button and I don't want to hard code it. Which counties will be colored on the click of the button will be decided by my programming logic.

[iantukic]

Beside coloring, I also need to be able to zoom to colored counties in the map, for example if Iron County in Utah and Baca County in Colorado are colored, then the map should be programmatically zoomed to show the states Utah and Colorado in close. How can I achieve this?

[dominik.c]

Hi again!

Here is the demo with the option to color clicked counties: https://stackblitz.com/edit/react-7fbjgh?file=index.js
Now you can add a button and write your custom logic. If it goes about zooming how should it look like? When the zoom effect should be turned on? I suggest firstly write the code with coloring counties then we'll go to zoom functionality.

Best regards!

[iantukic]

Hello,

thanks again for the demo. In your demo the color is changed after clicking on specific county. I am not sure how to implement this with the button, how can I specify to which counties the color will be changed (please note that I need to be able to change color of multiple counties at once)?

[iantukic]

Hello,

can I get an answer on this? I need to know if I would be able to do this with your library.

Thanks.

[dominik.c]

Hi again!

Firstly we store a list of counties in an array. Then we add a button using SVG renderer and there we can place our code in which we update the chosen points' colors (they are placed in our array).

API references: https://api.highcharts.com/class-refere ... VGRenderer

Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Best regards!

[iantukic]

Thanks again.

I would like to know why do I need to add a button using SVG renderer?

I have forked your demo https://codesandbox.io/s/highcharts-rea ... =/demo.jsx , and placed a button outside of a map component. I have also created click event listener (line 81) for that button. I would like to know what should I put in that method in order to be able to change color in Iron County in Utah and Baca County in Colorado (or some other counties, doesn't matter) at the same time when that button is clicked?

[dominik.c]

Hi again!

Naturally, we can do it in a different way. We can render a button and put our code there.
Here is the working demo: https://stackblitz.com/edit/react-wzmgyf?file=index.js

Check it out and tell me if it answers your question.

Best regards!

[iantukic]

Hello,

yes, this answers my question, thank you.

Lets also solve my other issue with the zoom that I mentioned above. Basically, the zoom effect should be turned on at the same time when the counties colors are changed (on button click) and it should zoom map just enough to fit colored area in the view (see this image https://imgur.com/nDUuULT).

Can I achieve this with your 'mapZoom' function?

[iantukic]

Hello,

any info regarding my previous post?


Thanks.

[dominik.c]

Hi again!

Sorry, for a bit late response.

Surely we can do that effect using mapZoom method. Firstly we need to assign ids to the elements we want to zoom in and then use this method using id, we had assigned already.

API references: https://api.highcharts.com/class-refere ... rt#mapZoom

Demo: https://stackblitz.com/edit/react-cr1lis?file=index.js

Let me know if that was what you were looking for!
Best regards.