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 'ol/ol.css';
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';

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

var 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>
    <title>Overview Map Control</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="main.js"></script>
  </body>
</html>
package.json
{
  "name": "overviewmap",
  "dependencies": {
    "ol": "6.4.3"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}