mapView.fitToBounds() method from highcharts not working

Question

I have created a bubble map with a geographical map at the base and points represented on it in the form of bubbles. The points have latitude longitude information with the help of which they get rendered on the map. I am using highcharts library for doing the same in a typescript project. My requirement is that the area in which bubbles are present should be zoomed into when the map gets loaded. The remaining map which is blank need not be shown.

I tried using the mapView.fitToBounds() method but the zooming in is not working. Reference: https://api.highcharts.com/class-reference/Highcharts.MapView#fitToBounds

Since, I have latitude and longitude information, I need to convert it to pixel values first because mapView.fitToBounds() expects pixel values as inputs. I tried using the mapView.lonLatToPixels() method for the same. Reference: https://api.highcharts.com/class-reference/Highcharts.MapView#lonLatToProjectedUnits

I tried calling these methods on the chart instance but it doesn't have any effect on the output. I expect the area defined by the minimum and maximum latitude and longitude values to be zoomed into whenever the map loads. I need to use the above mentioned mentioned methods for my project setup. Could you please let me know what is it that I am missing while using them?

Link to code sandbox: https://codesandbox.io/p/sandbox/bubblemapdemo-fm5vqw?file=%2Fsrc%2FBubbleMapViewer.tsx%3A188%2C30-188%2C52

Answer 1

The mapView.fitToBounds() method uses projected values, not pixel values as you've described. You can convert geographical coordinates to projected plane values using lonLatToProjectedUnits() convertion.

Demo: https://codesandbox.io/p/sandbox/bubblemapdemo-forked-jvsnd2?file=%2Fsrc%2FBubbleMapViewer.tsx%3A81%2C10