This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Overview Map Control

overview 3 overviewmap 2

#####

Example of OverviewMap control.

This example demonstrates the use of the OverviewMap control. Both the main map and the overview map are configured with layers using the same source. Please note that explicitly configuring layers for the overview map is mandatory.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import OverviewMap from 'ol/control/OverviewMap.js';
    import {defaults as defaultControls} from 'ol/control/defaults.js';
    import TileLayer from 'ol/layer/Tile.js';
    import OSM from 'ol/source/OSM.js';

    const source = new OSM();
    const overviewMapControl = new OverviewMap({
      layers: [
        new TileLayer({
          source: source,
        }),
      ],
    });

    const map = new Map({
      controls: defaultControls().extend([overviewMapControl]),
      layers: [
        new TileLayer({
          source: source,
        }),
      ],
      target: 'map',
      view: new View({
        center: [500000, 6000000],
        zoom: 7,
      }),
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Overview Map Control</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "overviewmap",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }