maplibre-gl-overview-map

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.

Live example

Table of Contents

• Installation
• Usage
• Options
• Development
• Build
• License

Installation

npm install maplibre-gl-overview-map

Usage

When using modules

import { 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'

When using a CDN

<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/maplibre-gl-overview-map.css"
  rel="stylesheet"
/>

Example Usage

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())

Live example | code

If you want to customize the overview map control, you can see the custom example or read the document about options.

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.

Box Options

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.

Development

pnpm install
pnpm run dev

Build

Build library

pnpm run release

Build example

pnpm run build

License

This plugin is open-source and released under the MIT License.