Mapbox-GL plugin - LayerGroup

This is a plugin of Mapbox-GL.

This plug-in provides the management function of layer groups.

Demo

English | 简体中文

APIs

The following APIs have been extended on map instances:

• addLayerGroup()
• removeLayerGroup()
• getLayerGroupFirstLayerId()
• getLayerGroupLastLayerId()
• addLayerToGroup()
• getLayerGroupLayersId()
• moveLayerGroup()

Because the API is relatively simple and the number is very small, there is no additional API documentation provided. View the source code directly.

Bundle

The following bundles are provided:

types/
build/
├── bundle.js
├── bundle.min.js
├── bundle.esm.js
├── bundle.esm.min.js
├── bundle.cjs.js
├── bundle.cjs.min.js
├── bundle.umd.js
└── bundle.umd.min.js

It also provides the corresponding sourcemap file.

Usage

Browser

In the browser, referenced by the <script> tag:

<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
<!-- Reference the utils library -->
<script src="../build/bundle.min.js"></script>

Then, use it:

const map = new mapboxgl.Map({ ... })
map.addLayerGroup('google')
map.addLayerToGroup('google', /* layer{ ... } */)

If you can't get the bundle file, you can try to build it yourself.

Node.js

Install via npm:

npm install mapbox-gl-plugin-layer-group

Use it like this:

// ES Module
import 'mapbox-gl-plugin-layer-group'

// CommonJS
require('mapbox-gl-plugin-layer-group')

Typescript

If you want to use typescript, @types/mapbox-gl package type definition does not include the API provided by the plugin. However, the plugin provides expanded type definitions:

-import mapboxGL, { Map } from 'mapbox-gl'
+import mapboxGL from 'mapbox-gl'
+import { Map } from 'mapbox-gl-plugin-layer-group'

const map: Map = new mapboxGL.Map({ ... })

Build

If you cannot get the bundle file, or you want to add additional map service resources and other reasons, you can build your own.

First, clone to local

git clone https://github.com/wang1212/mapbox-gl-plugin-layer-group.git <dir>
cd <dir>/
npm install

Then you can modify the files in src/ by yourself, and run the following command when finished:

npm run build

The bundle file will be generated in the build/ folder, include sourcemap file.

License

MIT.