---
title: "How to display a minimap or overview map control to aid the map navigation | JavaScript maps SDK"
description: "Display an overview minimap control to aid map navigation."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# 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 module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```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
```html
Display a minimap control to aid the map navigation
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
```
### Basic JavaScript setup
```html
Display a minimap control to aid the map navigation
```
## 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](https://cloud.maptiler.com/maps/hybrid-v4/) and changing the size of the map.
```js
minimap: {
style: maptilersdk.MapStyle.HYBRID,
containerStyle: {
width: '200px',
height: '150px'
}
}
```
Visit the [JavaScript Maps API reference](https://docs.maptiler.com/sdk-js/api/controls/) to learn how to create your custom control.
## Related examples
### [Scale control](https://docs.maptiler.com/sdk-js/examples/control-scale/)
Tutorials
Learn to add and display map scale control.
### [Add elevation profile control](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-simple/)
Examples
Show elevation profiles for GeoJSON traces using MapTiler.
### [Measure distances](https://docs.maptiler.com/sdk-js/examples/measure/)
Examples
To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length.
### [Change attribution default position](https://docs.maptiler.com/sdk-js/examples/attribution-position/)
Examples
Position map attribution in the top-left corner on initialization.