---
title: "MaplibreMinimap"
description: "Overview map control that shows the surroundings of the main map, outlines its viewport, and navigates on drag or click."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/controls/minimap"
---
# MaplibreMinimap

> Overview map control that shows the surroundings of the main map, outlines its viewport, and navigates on drag or click.

## Introduction

`MaplibreMinimap` creates a non-interactive overview map inside the control container. It follows the center of the main map at the main zoom plus `zoomOffset`, and outlines the current viewport of the main map with a polygon that also fits rotation and pitch. Dragging on the minimap pans the main map by the drag delta, and a click eases the main map center to the clicked point.

> [!NOTE]
> 
> Without 
> 
> map-style
> 
>  the minimap reuses the current main map style (including layers added at runtime, such as a Tianditu basemap) and follows it when the main map switches styles. Changing any prop rebuilds the minimap.

## Usage

A minimap in the bottom-right corner that reuses the main map style:

```vue [MinimapExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/liberty', center: [116.397, 39.908], zoom: 10 }">
      <MaplibreMinimap position="bottom-right" />
    </MaplibreMap>
  </div>
</template>
```

## Examples

### Custom style and size

Set `map-style`, `zoom-offset`, the size and the viewport color; the viewport outline follows the rotation and pitch of the main map:

```vue [MinimapStyleExample.vue]
<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/liberty', center: [121.47, 31.23], zoom: 12, pitch: 45, bearing: -20 }">
      <MaplibreMinimap
        position="top-right"
        map-style="https://tiles.openfreemap.org/styles/positron"
        :zoom-offset="-5"
        :width="240"
        :height="160"
        color="#f43f5e"
      />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreMinimap component
 */
interface MaplibreMinimapProps {
  /**
   * 控件停靠位置；省略用地图默认位置
   */
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
  /**
   * 鹰眼底图样式（对象或样式 URL）；省略时沿用主图样式并跟随其切换
   */
  mapStyle?: string | StyleSpecification | undefined;
  /**
   * 相对主图的缩放偏移
   * @default -4
   */
  zoomOffset?: number | undefined;
  /**
   * 宽度（px）
   * @default 200
   */
  width?: number | undefined;
  /**
   * 高度（px）
   * @default 150
   */
  height?: number | undefined;
  /**
   * 视口框颜色
   * @default '#3b82f6'
   */
  color?: string | undefined;
}
```

## Changelog

See commit history for [src/runtime/components/controls/Minimap.vue](https://github.com/mhaibaraai/movk-maplibre/commits/main/src/runtime/components/controls/Minimap.vue).


## Sitemap

See the full [sitemap](https://maplibre.mhaibaraai.cn/sitemap.md) for all pages.