marker cluster user data

Getting markers id in clicked cluster

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-clusterer@^2/dist/clustering.js"></script>
<div id="container"></div>

CSS

html,
body,
#container {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
  center: [55.323, 25.235],
  zoom: 10.5,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

const markers = [{
    coordinates: [55.27887, 25.21001],

    // any user data in marker object
    userData: {
      type: 'a'
    },
  },
  {
    coordinates: [55.30771, 25.20314],
    userData: {
      type: 'b'
    },
  },
  {
    coordinates: [55.30771, 25.20314],
    userData: {
      type: 'c'
    },
  },
  {
    coordinates: [55.35266, 25.24382],
    userData: {
      type: 'd'
    },
  },
];

const clusterer = new mapgl.Clusterer(map, {
  clusterStyle: (counts, target) => {
    // put any user data to cluster object
    target.userData = {
      foo: 'bar',
    };

    return {
      // get marker user data and set label text
      labelText: `${target.data.map(m => m.userData.type).join(', ')}`
    };
  }
});

clusterer.load(markers);

clusterer.on('click', (event) => {
  // get user data from cluster object
  console.log(event.target.userData);
});