OpenLayers - Switch to Web Mercator

OpenLayers with Equal Earth tiles for zoom level 1-2 and Web Mercator tiles for level 3-6.

HTML:

<div id='map'></div>

Javascript:

var eqearth = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'https://assets.bbox.earth/tiles/ne_extracts_8857/ne_countries/{z}/{x}/{y}.pbf'
  }),
  maxZoom: 3,
});
olms.applyStyle(eqearth, location.origin + '/natural-earth-countries-style.json');

var merc = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'https://assets.bbox.earth/tiles/ne_extracts_3857/ne_countries/{z}/{x}/{y}.pbf'
  }),
  minZoom: 3,
});
olms.applyStyle(merc, location.origin + '/natural-earth-countries-style.json', {updateSource: false});

const map = new ol.Map({
  layers: [eqearth, merc],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 0,
    maxZoom: 6,
  }),
});

Header:

<script src="https://cdn.jsdelivr.net/npm/ol@9.1.0/dist/ol.js"></script>
<link href="https://cdn.jsdelivr.net/npm/ol@9.1.0/ol.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.1/dist/olms.js"></script>