The maplibre-gl-overview-map plugin is designed to provide users with a high-level spatial perspective when working with Maplibre GL JS. This feature allows you to include a simplified, smaller-scale map alongside your primary map, offering valuable context and aiding in navigation.
npm install maplibre-gl-overview-mapimport { Map } from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import OverviewMapControl from 'maplibre-gl-overview-map'
import 'maplibre-gl-overview-map/dist/maplibre-gl-overview-map.css'<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/maplibre-gl-overview-map@1.0.4/dist/maplibre-gl-overview-map.umd.js"></script>
<link
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/maplibre-gl-overview-map@1.0.4/dist/maplibre-gl-overview-map.css"
rel="stylesheet"
/>let map = new Map({
container: 'map',
style: 'https://yuchuntsao.github.io/simple-vector-tiles/style.json',
center: [0, 0],
zoom: 4
})
map.addControl(new OverviewMapControl())If you want to customize the overview map control, you can see the custom example or read the document about options.
All of the following options are optional.
| Attribute | Type | Default | Description |
|---|---|---|---|
| mapContainerId | string |
'maplibre-gl-overview-map' |
The map id for overview map container. |
| mapStyle | StyleSpecification | string |
'' |
The style for overview map. If the mapStyle is empty, it will use the style of primary map. |
| zoomOffset | number |
4 |
The zoom level offset between primary map and overview map. |
| customClassName | string |
'' |
You can specific custom css style for the container of control. See custom example. |
| allowRotate | Boolean |
true |
Allow the overview map can rotate when the primary map rotated. |
| box | object |
Box | The option is a object about the source, layer and style of the box on the overview map. |
| Attribute | Type | Default | Description |
|---|---|---|---|
| sourceName | string |
maplibre-gl-overview-map-box-source |
The box source name. |
| outlineLayerId | string |
maplibre-gl-overview-map-box-outline-layer |
The box outline layer id. |
| fillLayerId | string |
maplibre-gl-overview-map-box-fill-layer |
The box fill layer id. |
| fillStyle | object |
{'fill-color': 'red','fill-opacity': 0.1} |
The style of the fill layer. You can override the default style with MapLibre Style Spec. |
| outlineStyle | object |
{'line-color': 'red','line-width': 1.5,'line-opacity': 0.5} |
The style of the outline layer. You can override the default style with MapLibre Style Spec. |
pnpm install
pnpm run devBuild library
pnpm run releaseBuild example
pnpm run buildThis plugin is open-source and released under the MIT License.