Overview Map Control

Edit

Overview Map Control

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.

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <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=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

Copy

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([
    overviewMapControl
  ]),
  layers: [
    new TileLayer({
      source: source
    })
  ],
  target: 'map',
  view: new View({
    center: [500000, 6000000],
    zoom: 7
  })
});

Copy

package.json{
  "name": "overviewmap",
  "dependencies": {
    "ol": "6.1.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}