Getting started

The deck2gisLayer plugin allows you to render deck.gl layers on the MapGL JS API map.

To add a deck.gl layer:

1. Install the deck2gisLayer plugin and the deck.gl framework in your project.
2. Initialize deck.gl.
3. Create a layer.
4. Add the layer to the map.

To work with multiple layers on the map simultaneously, see the Working with multiple layers instruction.

1. Install plugin

Using script tag

After initializing the map, add the following lines to your HTML page code:

<script src="https://unpkg.com/@2gis/deck2gis-layer@^2/dist/deck2gislayer.js"></script>
<script src="https://unpkg.com/deck.gl@^8/dist.min.js"></script>

Using npm package

If you use npm, install the library using the @2gis/deck2gis-layer package:

npm install @2gis/deck2gis-layer @deck.gl/core @deck.gl/layers

Version compatibility

The current version of the deck2gisLayer plugin is only compatible with deck.gl@^8.

2. Initialize deck.gl

To create a deck.gl instance, initialize it using the initDeck() function, which binds it to the map:

import { Deck } from '@deck.gl/core';
import { Deck2gisLayer, initDeck } from '@2gis/deck2gis-layer';

const deck = initDeck(map, Deck, { antialiasing: 'msaa' });

3. Create layer

To create a deck.gl layer, use the Deck2gisLayer.

For example, you can create a HexagonLayer that visualizes data as a heatmap consisting of hexagons. The color and height of a hexagon depend on the objects it contains.

Example of creating a HexagonLayer to the map:

import { HexagonLayer } from '@deck.gl/aggregation-layers/typed';

const data = [
    {
        point: {
            lon: 55.296872,
            lat: 25.261885,
        },
    },
];

const deckHexagonLayer = new Deck2gisLayer({
    id: 'deckgl-HexagonLayer',
    deck,
    type: HexagonLayer,
    data,
    radius: 250,
    getPosition: (d) => [d.point.lon, d.point.lat],
});

Where:

• point - coordinates of data points.
• id - layer identifier. Must be unique across all layers of the map style.
• deck - Deck instance that manages layer rendering.
• type - deck.gl layer type (Layer).
• radius - hexagon radius in meters.
• getPosition - method for calculating object coordinates.

For more information about parameters, see the deck.gl documentation for each layer.

4. Add layer

Before adding a layer to the map, the map style must be loaded. Otherwise, it overwrites the previous style and removes the added layers. Use the styleload event handler, which is emitted every time after a new style is set:

map.on('styleload', () => {
    map.addLayer(deckHexagonLayer);
});

For more information, see the Modifying current map style in runtime instruction.

Usage example