Overview Map Control

overview overviewmap

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.

index.html<!DOCTYPE html>
<html lang="en">
    <title>Overview Map Control</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
      .map {
        width: 100%;
    <div id="map" class="map"></div>
    <script src="index.js"></script>
index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {defaults as defaultControls, OverviewMap} from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

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

var map = new Map({
  controls: defaultControls().extend([
  layers: [
    new TileLayer({
      source: source
  target: 'map',
  view: new View({
    center: [500000, 6000000],
    zoom: 7
  "name": "overviewmap",
  "dependencies": {
    "ol": "6.3.1"
  "devDependencies": {
    "parcel": "1.11.0"
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"