Maplibre-gl-overview-map NPM

maplibre-gl-overview-map

npm GitHub GitHub Workflow Status (with event)

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

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/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"
/>

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.