Ionic Highchart-angular mapchart, How to set minZoom level?

Question

I have created a fullscreen Highcharts choropleth mapchart with the Esri Tiled Web Map(background) in Ionic & angular 14. In mobile view, while zoom out there is space on top of map. So wanted to limit the zoom out level upto 2. but couldn't able to achieve it, help me to find solution.

Demo -> https://stackblitz.com/edit/highcharts-angular-map-tile

Reproduce -> try to zoom out the map.

Expected -> Map always should be filled mobile full screen.

Answer 1

You can use fitToGeomerty property to limit zoom:

mapView: {
  maxZoom: 4,
  fitToGeometry: {
    type: 'Polygon',
    coordinates: [
      [
        [90, 84.9],
        [90, -40],
        [0, -50],
        [-90, -40],
        [-90, 84.9]
      ]
    ]
  }
}

Demo: https://stackblitz.com/edit/highcharts-angular-map-tile-d3tq3w?file=src%2Fapp%2Fapp.component.ts
API: https://api.highcharts.com/highmaps/mapView.fitToGeometry