Symbol remains clustered when zooming in with Feature Reduction enabled

792
2
Jump to solution
08-06-2021 06:24 AM
FranklinAlexander
Occasional Contributor III

I am have Feature Reduction enabled on a layer and at some point when zooming in to a cluster it should break apart into single graphics. This does not happen for some clusters no matter how much I zoom in. 

I tried changing the cluster radius, going as small as 20, but I get the same result. This appears to be happening for any cluster when the features are less than 1000 meters apart:

Here is the cluster as it appears in the app:

noSingleGraphics2.png

 

 Here are the actual features as they should appear:

noSingleGraphics3.png

 

I need the single graphics to appear in the app because user need to be able to click the feature to get more info. Please let me know if there is a fix.

0 Kudos
1 Solution

Accepted Solutions
rogenjh
New Contributor III

You watch the scale and remove the feature reduction cluster at a certain scale.

You can see this happening on this example: Sample .

Key code: 

        layer
          .when()
          .then(generateClusterConfig)
          .then(async (featureReduction) => {
            // sets generated cluster configuration on the layer
            layer.featureReduction = featureReduction;

            // the layer view is needed for querying clusters
            layerView = await view.whenLayerView(layer);

            // Disable clustering when user zooms beyond a 1:50,000 scale level
            // Re-enable clustering when the user zooms out to a scale smaller than 1:50,000
            view.watch("scale", (scale) => {
              layer.featureReduction =
                view.scale > 50000 ? featureReduction : null;
            });
          })
          .catch((error) => {
            console.error(error);
          });

View solution in original post

0 Kudos
2 Replies
rogenjh
New Contributor III

You watch the scale and remove the feature reduction cluster at a certain scale.

You can see this happening on this example: Sample .

Key code: 

        layer
          .when()
          .then(generateClusterConfig)
          .then(async (featureReduction) => {
            // sets generated cluster configuration on the layer
            layer.featureReduction = featureReduction;

            // the layer view is needed for querying clusters
            layerView = await view.whenLayerView(layer);

            // Disable clustering when user zooms beyond a 1:50,000 scale level
            // Re-enable clustering when the user zooms out to a scale smaller than 1:50,000
            view.watch("scale", (scale) => {
              layer.featureReduction =
                view.scale > 50000 ? featureReduction : null;
            });
          })
          .catch((error) => {
            console.error(error);
          });
0 Kudos
FranklinAlexander
Occasional Contributor III

Thank you for that suggestion. I am using the 3x API, so I had to adapt the code accordingly but it's working.

0 Kudos