I have a highcharts map that I'm looking to add a trigger to in the event that the map is either entirely zoomed out or not.
But I don't understand enough about the chart & map view object data in relation to whether or not it has hit its minimum zoom level.
How can I determine when the map is fully zoomed out?
I'm using highcharts 11.4.0, typescript, and react.
I'm currently using the afterSetView event to determine when the view has been changed:
// const chart: HighCharts.mapChart = ...
Highcharts.addEvent(chart.mapView, 'afterSetView', (/* event */) => {
/*
* `event.target` is an instance of `MapView`,
* or I can reference it just via. `chart.mapView`.
*/
if (/* not fully zoomed out */) {
onPanZoom();
} else {
onFit();
}
});
I understand the the zoom level also changes based on the viewport size - a smaller content area means the minimum zoom level is lower in order to fit the map entirely in the container - so I cannot rely on a static value to determine the lowest zoom amount.
I also see there is an undocumented minZoom key on the mapView object, but I'm using typescript and so I cannot access this value as it's not defined in the Highcharts.MapView type.
You can extend Highcharts type declarations if there are any missing types that you need to use in your application.
interface extendedChart extends Higchcharts.Chart {
mapView?: {
minZoom: number;
zoom: number;
}
}
I believe the easiest way to determine if the mapView is fully zoomed out would be by comparing with a simple condition check: minZoom === zoom, as the minZoom gets updated constantly on chart container resize, so you don't need to store it's state inside your code.
Demo: https://stackblitz.com/edit/react-starter-typescript-ne8vie?file=App.tsx