tanmayshah95
Posts: 8
Joined: Fri Feb 15, 2019 8:45 am

Gradually increase/decrease Series labels font size on map zoom

Mon Jun 01, 2020 5:06 am

Hi,

I am trying to implement, increase/decrease of font size on map zoom in/out. For this, i have used getExtremes api and afterSetExtremes event of xAxis to find zoom level. With this zoom level, font size is updated in chart. is there any other way to achieve this?

This was working fine if map is not dragged after any zoom action, as afterSetExtremes event was triggered. To handle this i have added 'pan' trigger check before updating font size. is there any alternative to this?

Even with the check, issue arises when zoom out action is performed after dragging of map. For this case, when chart width is larger than plotted map width (as shown in below given fiddle) font-size are not decreased gradually on zoom out as they were increased. This can be noticed by looking at zoom levels logged on console. (highmaps version 6.1.1)
fiddle: https://jsfiddle.net/tanmayshah95/bxjqzy8m/9/
Consider eg.
-> zoom in on map and verify zoom levels on console: 1, 0.80, 0.60, 0.40, 0.30
-> drag map horizontally and vertically to view other state.
-> zoom out on map and verify significant changes in zoom levels: 0.75, 0.95, 1

As first zoom level on zoom out is significantly increased from last zoom level. font size are not getting correct size.

NOTE: For latest highcharts version, i was getting issue with label placement on map zoom.
fiddle: https://jsfiddle.net/tanmayshah95/98ox7fep/1/

Thanks
- Tanmay

mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gradually increase/decrease Series labels font size on map zoom

Tue Jun 02, 2020 11:40 am

Hello,

Thanks for contacting us with your question!

Unfortunately, there is no other way to find the current zoom level than dividing the extremes. The problem with that approach is that extremes are recalculated on the drag event too, that's why after dragging your zoom levels change. Your solution to prevent calling the font update on the drag is also correct and I don't think that there is a better one.

According to your second problem (label placement with the current HC version) it might be a bug, I need more time to investigate the issue - for now, I noticed that calling an additional chart.redraw() after the update() fixes the label positions. I will post an update here as soon as I find more information.

Feel free to ask any further questions!

Best regards.
Mateusz Kornecki
Highcharts Developer

tanmayshah95
Posts: 8
Joined: Fri Feb 15, 2019 8:45 am

Re: Gradually increase/decrease Series labels font size on map zoom

Fri Nov 19, 2021 12:05 pm

Hello,

Were you able to find solution regarding to our second problem. We are upgrading to highcharts v9.2.2 and will need a fix to this issue as labels looks way misplaced on zoom (button as well as scroll).

Issue on v9.2.2: https://jsfiddle.net/tanmayshah95/dek0gLf2/

Working on previous versions: https://jsfiddle.net/tanmayshah95/wgdoxmuv/

please let me know. If there is any better way to achieve this behavior on latest version of Highcharts.

mateusz.b
Posts: 1878
Joined: Tue Jul 13, 2021 11:34 am

Re: Gradually increase/decrease Series labels font size on map zoom

Fri Nov 19, 2021 4:00 pm

Hello tanmayshah95,

To make it work in v9.2.2 you have to either disable animations completely or delay update function with timeout longer that animation duration.
Demo: https://jsfiddle.net/BlackLabel/p4e29ywL/

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

tanmayshah95
Posts: 8
Joined: Fri Feb 15, 2019 8:45 am

Re: Gradually increase/decrease Series labels font size on map zoom

Mon Jan 17, 2022 2:27 pm

Hello mateusz.b,

Thanks for your response and solution. Disabling animation after first render worked for us.
Now, we were planning to further update highcharts to latest version but now it seems this custom handling is not working at all.

For latest version of highcharts (9.3.2), afterSetExtremes event is not getting triggered after zoom.

I have used your fiddle to repro issue. you can refer it for last working version.
Demo: https://jsfiddle.net/tanmayshah95/6zrLp0x2/

Please let us know how can we handle this or if this is an issue from Highcharts.

Regards
- Tanmay

mateusz.b
Posts: 1878
Joined: Tue Jul 13, 2021 11:34 am

Re: Gradually increase/decrease Series labels font size on map zoom

Tue Jan 18, 2022 6:58 am

Hi tanmayshah95,

Thanks for reporting it. I will take a closer look into that issue and get back with an answer asap.

Regards!
Mateusz Bernacik
Highcharts Developer

mateusz.b
Posts: 1878
Joined: Tue Jul 13, 2021 11:34 am

Re: Gradually increase/decrease Series labels font size on map zoom

Tue Jan 18, 2022 11:57 am

tanmayshah95,

As you can read in our changelog, since 9.3.0 MapView is introduced, axes are gone and thus afterSetExtremes event along with methods like setExtremes or getExtremes are gone too. You won't be able to use it anymore.
Improved map geometry by removing axes and implementing a MapView class. The MapView includes, currently as a beta feature, client side projection. Part of the improved geometry is the new series.data.geometry option to make it easier working with GeoJSON.
Most likely you will have to move your logic to other event like render and use mapView.zoom to scale your font size.
Demo: https://jsfiddle.net/BlackLabel/r1cshk9d/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”