How to add an onClick event on cluster image ?

[TapanPatra1]

Hi All,

I am facing difficulties to add an onClick event to the cluster image in ReactJs application,

Below image is the cluster example - If we manually zoom to the maximum level, the cluster is removing and showing three individual data points.

But here I want, when i click only on the cluster image, it should zoom to the maximum level and display only the individual three data,

How to add an event  to the cluster image or any other way to do this ?

const clusterConfig = {
      type: "cluster",
      clusterRadius: "100px",
      clusterMinSize: "30px",
      clusterMaxSize: "50px",
      labelingInfo: [{
        deconflictionStrategy: "none",
        labelExpressionInfo: {
          expression: "Text($feature.cluster_count, '#,###')"
        },
        symbol: {
          type: "text",
          color: "#fff",
          font: {
            weight: "bold",
            family: "Noto Sans",
            size: "18px"
          },
        },
        labelPlacement: "center-center",
      }],
      symbol: {
        type: "picture-marker", 
        url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQa88gtYlcIGYRv5X5yEs7NbJ5JkJdDvzCmLf41BtSCgHqCodZV2fa4ZIjCjroPj27SQCE&usqp=CAU",
        width: "50px",
        height: "50px",
      },
    };

[TapanPatra1]

Hi All,

I found how to access the click event on a cluster, and upon clicking the cluster, I can zoom to the maximum level. However, I encountered an issue where the map center does not align with the points data; instead, it centers on a different area.

How can I display the center of the points data on the screen when a cluster is clicked?

Here is the click event code,

view.on("click", (event) => {
      view.hitTest(event).then(({ results }) => {
        if(results[0].layer?.featureReduction?.type === "cluster" ){
          view.goTo(results[0].graphic.geometry).then(() => {
            view.zoom = 23;
          })
        }
      });
    });