Select to view content in your preferred language

How to add an onClick event on cluster image ?

216
1
a month ago
TapanPatra1
New Contributor

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 ?

 

Screenshot 2024-05-21 at 6.02.15 PM.png

 

 

 

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",
      },
    };

 

 

0 Kudos
1 Reply
TapanPatra1
New Contributor

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;
          })
        }
      });
    });

 

 

0 Kudos