How to display a minimap or overview map control to aid the map navigation

This tutorial shows how to display a minimap or overview map control in MapTiler SDK JS to aid map navigation.

By following this guide, users will learn how to integrate and display a minimap within their map interface using MapTiler SDK JS. The minimap provides users with a compact overview of the entire map, allowing them to easily navigate and explore different areas. With the help of MapTiler SDK JS, developers can effortlessly incorporate a minimap control into their web-based mapping applications, making it easier for users to interact with and navigate through their maps.


npm install --save @maptiler/sdk

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
  container: 'map', // container id
  style: MapStyle.STREETS,
  center: [16.62662018, 49.2125578], // starting position [lng, lat]
  zoom: 10, // starting zoom
  minimap: {
    containerStyle: {
      width: '200px',
      height: '150px'
    }
  }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display a minimap control to aid the map navigation</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display a minimap control to aid the map navigation</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.MapStyle.STREETS,
      center: [16.62662018, 49.2125578], // starting position [lng, lat]
      zoom: 10, // starting zoom
      minimap: {
        containerStyle: {
          width: '200px',
          height: '150px'
        }
      }
    });
      
  </script>
</body>
</html>

Learn more

By default, the control uses the same style as the map but we can use a different style on the minimapControl. Example of the control using the Satellite Hybrid Map and changing the size of the map.

Visit the JavaScript Maps API reference to learn how to create your custom control.

main.js

index.html

style.css

Learn more

Scale control

Add elevation profile control

Measure distances

Change attribution default position

How to display a minimap or overview map control to aid the map navigation

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

Scale control

Add elevation profile control

Measure distances

Change attribution default position