Create a scale-dependent visualization
Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
This sample demonstrates how to create a scale-dependent visualization with a HeatmapRenderer and a SimpleRenderer.
A HeatmapRenderer is ideal for visualizing large, dense point datasets, particularly those that have lots of overlapping points. However, the heatmap is only effective at certain scales. It particularly tends to fail to convey useful information at large scales.
You can setup a watch on the view's scale property and set a scale threshold where the layer's renderer can switch from a heatmap to discrete marker symbols as the user zooms to large scales.
view.when().then(function(){
const layer = view.map.layers.getItemAt(0);
const heatmapRenderer = layer.renderer.clone();
const simpleRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
color: "#c80000",
size: 5
}
};
view.watch("scale", function(newValue){
layer.renderer = newValue <= 72224 ? simpleRenderer : heatmapRenderer;
});
});
This will create a more ideal visualization at large and small scales.
Additional visualization samples and resources