You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

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() {
  // When the view is ready, clone the heatmap renderer
  // from the only layer in the web map

  const layer =;
  const heatmapRenderer = layer.renderer.clone();

  // The following simple renderer will render all points as simple
  // markers at certain scales

  const simpleRenderer = {
    type: "simple",
    symbol: {
      type: "simple-marker",
      color: "#c80000",
      size: 5

  // When the scale is larger than 1:72,224 (zoomed in passed that scale),
  // then switch from a heatmap renderer to a simple renderer. When zoomed
  // out beyond that scale, switch back to the heatmap renderer"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

Sample search results