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.