Custom Overview Map

Rotate with view

Example of OverviewMap control with advanced customization.

This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.

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 DragRotateAndZoom from 'ol/interaction/DragRotateAndZoom.js';
import {defaults as defaultInteractions} from 'ol/interaction/defaults.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const rotateWithView = document.getElementById('rotateWithView');

const overviewMapControl = new OverviewMap({
  // see in overviewmap-custom.html to see the custom CSS used
  className: 'ol-overviewmap ol-custom-overviewmap',
  layers: [
    new TileLayer({
      source: new OSM({
        'url':
          'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
          '?apikey=Your API key from https://www.thunderforest.com/docs/apikeys/ here',
      }),
    }),
  ],
  collapseLabel: '\u00BB',
  label: '\u00AB',
  collapsed: false,
});

rotateWithView.addEventListener('change', function () {
  overviewMapControl.setRotateWithView(this.checked);
});

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

index.html

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

      .map .ol-custom-overviewmap,
      .map .ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      .map .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      .map .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 300px;
      }

      .map .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .map .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      .map .ol-rotate {
        top: 170px;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div><label><input type="checkbox" id="rotateWithView"> Rotate with view</label></div>

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

package.json

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