Skip to main content

Obtaining deck.gl layer data

You can obtain data:

Click on a hexagon on the map and view information about it in the browser console. To obtain data from both the layer and the map simultaneously, click on a hexagon where there is a metro icon or street name underneath it.

1. Initialize the map​

When initializing the MapGL JS API map, set the forceSyncIdentify: true flag. In the MapGL JS API, objects are identified asynchronously by default, while in deck.gl it is synchronous. Setting the flag allows you to synchronize these processes and obtain information about selected objects when clicking on the map from both sources simultaneously.

Example of adding the forceSyncIdentify flag when initializing the map:

const map = new mapgl.Map('container', {
    center: [37.615655, 55.751005],
    zoom: 13,
    key: 'Your API access key',
    // Enabling the forceSyncIdentify flag for synchronous obtaining of selected object information
    forceSyncIdentify: true,
});

2. Configure data obtaining​

From a deck.gl layer​

Using built-in event handling in deck.gl, you can determine which object and layer are located at the point on the map.

To obtain information from a deck.gl visualization layer, add the following parameters to its settings:

  • pickable: true - supports selecting layer objects
  • depthTest: false - disables depth testing

You can use deck.gl methods to handle layer interaction events, such as onClick, onHover, and others. For more details, see the deck.gl layer interactivity documentation.

Example of an onClick (click on the map) event handler for the HexagonLayer:

const deckHexagonLayer = new Deck2gisLayer({
    id: 'deckgl-HexagonLayer',
    deck,
    type: HexagonLayer,
    data,
    radius: 250,
    getPosition: (d) => [d.point.lon, d.point.lat],
    pickable: true,
    parameters: { depthTest: false },
    onClick: ({ object, x, y }) => {
        if (object) {
            console.log('Clicked on hexagon:', object);
        }
    },
});

From a deck.gl layer and the map​

You can obtain information from both a deck.gl visualization layer and the MapGL JS API map simultaneously.

Example of a click (click on the map) event handler:

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

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

map.on('click', (event) => {
  const pickCoords = {
      x: event.point[0],
      y: event.point[1],
  };

  const pickedObject = deck.pickObject(pickCoords);

  console.log('Deck picked object:', pickedObject);
  console.log('MapGL click event:', event);
});

The pickObject() method is used to identify the object that was selected when clicking on the map. This allows you to handle interactions with both the map and deck.gl layers simultaneously. To retrieve information about multiple objects if they overlap, use the pickObjects() method.

If you use React, you can use a state manager to display information about selected objects in the user interface (for example, in a popup or sidebar):

// Initialization of deck.gl
const deck = initDeck(map, Deck, { antialiasing: 'msaa' });

// Access to selectedObject and setSelectedObject
const [selectedObject, setSelectedObject] = useState(undefined);

// Event handler for a click on the map
useMapEffect(({mapInstance }) => {
  const handleClick = (event) => {
    const pickCoords = {
        x: event.point[0],
        y: event.point[1],
    };

    const pickedObject = deck.pickObject(pickCoords);

    setSelectedObject({
      pickedObject,
      mapEvent: event,
    });
  };

  mapInstance.on('click', handleClick);

  return () => {
    mapInstance.off('click', handleClick);
  };
}, [deck]);

// Using data on the selected object
{selectedObject && (
  <div className="popup">
    <h3>Selected Object</h3>
    <pre>{JSON.stringify(selectedObject, null, 2)}</pre>
  </div>
)}