Edit

Overview Map Control

overview2 overviewmap2

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';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {OverviewMap, defaults as defaultControls} from 'ol/control';

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>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/[email protected]/dist/elm-pep.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>
package.json
{
  "name": "overviewmap",
  "dependencies": {
    "ol": "7.1.0"
  },
  "devDependencies": {
    "vite": "^3.0.3",
    "@babel/core": "latest"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}