nayeemnshaikh
Posts: 28
Joined: Mon May 11, 2020 5:16 pm

USA Map - Highlighted by Regions - Request for help - PFA

Hello Team, Good Day.

We need to show a US Country map highlighted by regions as shown in the attachments below.

A region is a collection of few states.

The region color is based on the % of Users shown in the legend on the right of the map.

On hover over a region, that region should be highlighted and all other regions should be blurred as shown in attachment-2

On click of a region, we want show a different highchart in a popup.

We are using Angular.

Please let us know if any queries.
Request your help here.

Any reference / demo / jsfiddle / stackblitz URL would be of great help.

Thanking you.

Attachment-1
Image

Attachment-2
Image
Attachments
map.png
map.png (35.84 KiB) Viewed 2778 times
map-hover.png
map-hover.png (37.19 KiB) Viewed 2778 times
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hello nayeemnshaikh!

We appreciate you reaching out to us!

A region color we can control through colorAxis - line 93 in the demo below. Showing a different chart on a popup can be implemented in pointClicked function - line 13 in the demo below. Basically, I think that the demo in the link below should meet your expectations providing that you'll adjust it to your own custom requirements.

API references:
https://api.highcharts.com/highmaps/colorAxis
https://api.highcharts.com/highmaps/ser ... ents.click

Demo:
https://jsfiddle.net/BlackLabel/g2pb5t43/

Let me know if that was what you were looking for!
Best regards!
Dominik Chudy
Highcharts Developer
nayeemnshaikh
Posts: 28
Joined: Mon May 11, 2020 5:16 pm

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hello dominik.c,
Greetings for the day. Thank you very much for your response. This will be really helpful, will try this and update you.

How can we, on hover over a region, that region should be highlighted and all other regions should be blurred as shown in attachment-2 above ?

Request your help here please.

Thanking you very much. And Almighty GOD Bless you.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hi again!

I'm not sure if I understood you properly. Do you want to change the color of a single point when you hover your mouse on it and make all the other points gray? If yes, we could do it by saving colors of all points to an array and then update these colors in mouseOver and mouseOut functions using the update function. If no, please describe your requirement precisely. :-)

API references:
https://api.highcharts.com/highmaps/ser ... .mouseOver
https://api.highcharts.com/highmaps/ser ... s.mouseOut
https://api.highcharts.com/highmaps/ser ... data.color
https://api.highcharts.com/class-refere ... int#update

Demo:
https://jsfiddle.net/BlackLabel/m67rjp0z/

Best regards!
Dominik Chudy
Highcharts Developer
nayeemnshaikh
Posts: 28
Joined: Mon May 11, 2020 5:16 pm

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hello dominik.c,
Greetings for the day. Thank you soo much for your response.

Yeah sure. Sorry for that.

We have Regions, where A Region is a collection of few States.

So, when we hover over a Region meaning when we hover over any state of a region then
all the States of that Region should be highlighted, in other words the opacity of all the other States not part of the hovered Region is reduced to 50% as shown in the attachment.

Requesting your help here please.

Thanking you very much. And wishing you with all the Happiness.

Image
Attachments
map-hover.png
map-hover.png (45.18 KiB) Viewed 2740 times
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hi again!

In this case, we need to know exactly what states create a region. The whole functionality would be the same as with a single state. You need to create mouseOver and mouseOut events and there update the colors of all points.

You can create an array with regions, and with each loop, iteration checks if the hovered point belongs to the region, if yes change the color (or set the opacity to 50%) of other states. Unfortunately, this solution is far away from being optimal. These loops are vastly expensive.

Demo: https://jsfiddle.net/BlackLabel/sp76u0h4/(read the comments in the demo)

Best regards!
Dominik Chudy
Highcharts Developer
nayeemnshaikh
Posts: 28
Joined: Mon May 11, 2020 5:16 pm

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hello dominik.c,
Greetings for the day. Thank you very much for your response.

Yeah we could see the delay on mouseOver and mouseOut event.

We have the whole US map divided or grouped into 7 Regions where, each Region is a collection of few States.

When we hover over a State can we optimally just change the color of all the States of that Region.

And NO action on all other States which do not belong to this Region.

Request your suggestion for an optimal solution to achieve similar functionality.

Thanking you very much. And wishing you with all the Happiness.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: USA Map - Highlighted by Regions - Request for help - PFA

Hi again!

Sure, thanks for the explanation. :-)

In the demo below I've created an array with 3 states that creates one region (in load function). Then in the mouseOver function, we can check if the hovered state is assigned to a region. If it is we change the color of all states that are in the same region. In mouseOut function, we undo the color change.

Demo: https://jsfiddle.net/BlackLabel/r1q6mu9d/

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Maps”