how to make "HighchartMap" change to "OpenStreetMap" after several scrolls of the mouse wheel in the direction of increasing the scale?

i.e. it should work like this:

1. when zooming in, "OpenStreetMap" is loaded
2. when zooming out, "HighchartMap" is returned

It would be great if you could help me with the example.

my examle

Inside of the redraw event, you can check current zoom level, and if it exceeds certain threshold, you can dynamically add tiledwebmap series. Then, on zooming out, you can also check the zoom level and based on it's value hide or show the tiledwebmap series.

events: {
    redraw() {
        const chart = this;
        const zoom = chart.mapView.zoom;
        
        const zoomThreshold = 3;
        
        if (chart.series.length <= 1) {
            if (zoom >= zoomThreshold) {
                chart.addSeries({
                    type: 'tiledwebmap',
                    provider: {
                        type: 'OpenStreetMap'
                    }
                }, false);
            }
        } else 
            chart.series[1].setVisible(zoom >= zoomThreshold, false);
    }
  }
}

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

API:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/class-reference/Highcharts.Series#setVisible