JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width:450px;height:430px;"></div>

JavaScript

var options = {
    projection: new OpenLayers.Projection("EPSG:900913"),
    'displayProjection': new OpenLayers.Projection("EPSG:4326"),
    units: "m",
    maxResolution: 156543.0339,
    maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
};

map = new OpenLayers.Map('map', options);

var osm = new OpenLayers.Layer.OSM();

var wms = new OpenLayers.Layer.WMS("World Map", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
    'layers': 'basic'
}, {
    maxExtent: new OpenLayers.Bounds(-30037508.34, -30037508.34, 30037508.34, 30037508.34),
    maxResolution: 156543.0339
});

map.addLayers([wms, osm]);
osm.setVisibility(false);

var long = 170;
var lat = -45;
var lonlat = new OpenLayers.LonLat(long, lat).transform(map.displayProjection, map.projection);
map.setCenter(lonlat, 4);

map.events.register("zoomend", map, zoomChanged);

function zoomChanged() {
    zoom = map.getZoom();
    if (zoom >= 7) {
        if (wms.getVisibility()) {
            osm.setVisibility(true);
            wms.setVisibility(false);
            map.setBaseLayer(osm);
        }
    }
    else {
        if (osm.getVisibility()) {
            osm.setVisibility(false);
            wms.setVisibility(true);
            map.setBaseLayer(wms);
        }
    }
}