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:
Here are the actual features as they should appear:
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.
Solved! Go to Solution.
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);
});
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);
});
Thank you for that suggestion. I am using the 3x API, so I had to adapt the code accordingly but it's working.