Create a scale-dependent visualization

Loading...

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 = view.map.layers.getItemAt(0);
  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

  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

114 results for Sample Code:

Tags
TitleSample
View padding Explore in the sandboxSandbox Share View live
Intro to MapView - Create a 2D map Explore in the sandboxSandbox Share View live
Intro to FeatureLayer Explore in the sandboxSandbox Share View live
Load portal items via drag & drop Explore in the sandboxSandbox Share View live
Load a basic WebMap Explore in the sandboxSandbox Share View live
Bookmarks widget Explore in the sandboxSandbox Share View live
Switch view from 2D to 3D Explore in the sandboxSandbox Share View live
Custom BlendLayer Explore in the sandboxSandbox Share View live
WMTSLayer Explore in the sandboxSandbox Share View live
Popup actions Explore in the sandboxSandbox Share View live
Popup dock positions Explore in the sandboxSandbox Share View live
PopupTemplate - use functions to set content Explore in the sandboxSandbox Share View live
PopupTemplate with promise Explore in the sandboxSandbox Share View live
Synchronize MapView and SceneView Explore in the sandboxSandbox Share View live
Visualize points with a heatmap Explore in the sandboxSandbox Share View live
Visualize features by type Explore in the sandboxSandbox Share View live
Swap web maps in the same view Explore in the sandboxSandbox Share View live
Compass widget Explore in the sandboxSandbox Share View live
Using widgets with React Explore in the sandboxSandbox Share View live
Legend widget Explore in the sandboxSandbox Share View live
Search widget with multiple sources Explore in the sandboxSandbox Share View live
Measurement in 2D Explore in the sandboxSandbox Share View live
Draw polyline Explore in the sandboxSandbox Share View live
Query features from a FeatureLayer Explore in the sandboxSandbox Share View live
Query features from a FeatureLayerView Explore in the sandboxSandbox Share View live
Intro to popups Explore in the sandboxSandbox Share View live
Intro to PopupTemplate Explore in the sandboxSandbox Share View live
Custom DynamicLayer Explore in the sandboxSandbox Share View live
Custom LERC Layer Explore in the sandboxSandbox Share View live
GeoRSSLayer Explore in the sandboxSandbox Share View live
Intro to ImageryLayer Explore in the sandboxSandbox Share View live
StreamLayer Explore in the sandboxSandbox Share View live
VectorTileLayer Explore in the sandboxSandbox Share View live
Overview map Explore in the sandboxSandbox Share View live
Multiple popup elements Explore in the sandboxSandbox Share View live
Disable rotation on the view Explore in the sandboxSandbox Share View live
Visualize all features with the same symbol Explore in the sandboxSandbox Share View live
Generate a predominance visualization Explore in the sandboxSandbox Share View live
Data-driven opacity Explore in the sandboxSandbox Share View live
CoordinateConversion widget Explore in the sandboxSandbox Share View live
Using widgets with Riot Explore in the sandboxSandbox Share View live
Intro to widgets using BasemapToggle Explore in the sandboxSandbox Share View live
CSVLayer - Project points on the fly Explore in the sandboxSandbox Share View live
VectorTileLayer from JSON Explore in the sandboxSandbox Share View live
Symbol playground Explore in the sandboxSandbox Share View live
Reference Arcade expressions in PopupTemplate Explore in the sandboxSandbox Share View live
Simple theme Explore in the sandboxSandbox Share View live
Themes Explore in the sandboxSandbox Share View live
Create an app with composite views Explore in the sandboxSandbox Share View live
Visualize data with class breaks Explore in the sandboxSandbox Share View live
Create a scale-dependent visualization Explore in the sandboxSandbox Share View live
Data-driven continuous size Explore in the sandboxSandbox Share View live
Feature Widget Explore in the sandboxSandbox Share View live
Update legend text Explore in the sandboxSandbox Share View live
Print widget Explore in the sandboxSandbox Share View live
ScaleBar widget Explore in the sandboxSandbox Share View live
Scale feature sizes based on real world sizes (2D) Explore in the sandboxSandbox Share View live
Multi-line labels Explore in the sandboxSandbox Share View live
KMLLayer Explore in the sandboxSandbox Share View live
Select WMTSLayer sublayer Explore in the sandboxSandbox Share View live
Sketch update validation Explore in the sandboxSandbox Share View live
IdentifyTask Explore in the sandboxSandbox Share View live
Disable all zooming on the view Explore in the sandboxSandbox Share View live
Generate a class breaks visualization Explore in the sandboxSandbox Share View live
Multivariate data exploration Explore in the sandboxSandbox Share View live
Data-driven continuous color Explore in the sandboxSandbox Share View live
Visualize data with rotation Explore in the sandboxSandbox Share View live
Watch for changes Explore in the sandboxSandbox Share View live
Query statistics client-side by distance Explore in the sandboxSandbox Share View live
Query statistics client-side Explore in the sandboxSandbox Share View live
Geoprocessing - hotspot analysis Explore in the sandboxSandbox Share View live
Add labels to a FeatureLayer Explore in the sandboxSandbox Share View live
Add multiple label classes to a layer Explore in the sandboxSandbox Share View live
ImageryLayer - raster attribute table Explore in the sandboxSandbox Share View live
ImageryLayer - server side raster function Explore in the sandboxSandbox Share View live
Custom popup actions per feature attribute Explore in the sandboxSandbox Share View live
Popup with DOM node Explore in the sandboxSandbox Share View live
Using Esri Icon Fonts with map graphics Explore in the sandboxSandbox Share View live
Create a custom visualization using Arcade Explore in the sandboxSandbox Share View live
Custom Recenter Widget Explore in the sandboxSandbox Share View live
Directions widget Explore in the sandboxSandbox Share View live
Add a Legend to LayerList Explore in the sandboxSandbox Share View live
Track current location Explore in the sandboxSandbox Share View live
ImageryLayer - client side rendering rules Explore in the sandboxSandbox Share View live
MapImageLayer - set renderers on sublayers Explore in the sandboxSandbox Share View live
MapImageLayer - Toggle sublayer visibility Explore in the sandboxSandbox Share View live
Sketch widget Explore in the sandboxSandbox Share View live
RouteTask Explore in the sandboxSandbox Share View live
Disable panning on the view Explore in the sandboxSandbox Share View live
Legend widget card style Explore in the sandboxSandbox Share View live
Client-side projection Explore in the sandboxSandbox Share View live
MapImageLayer - dynamic data layer with query table Explore in the sandboxSandbox Share View live
MapImageLayer - raster data source Explore in the sandboxSandbox Share View live
MapImageLayer - label sublayer features Explore in the sandboxSandbox Share View live
Disable scroll-zooming on the view Explore in the sandboxSandbox Share View live
Access features with pointer events Explore in the sandboxSandbox Share View live
Generate continuous color visualization Explore in the sandboxSandbox Share View live
Update Feature Attributes Explore in the sandboxSandbox Share View live
Highlight features by geometry Explore in the sandboxSandbox Share View live
Intro to graphics Explore in the sandboxSandbox Share View live
ImageryLayer - client side pixel filter Explore in the sandboxSandbox Share View live
Responsive apps using CSS Explore in the sandboxSandbox Share View live
Generate data-driven continuous size visualization Explore in the sandboxSandbox Share View live
Animate opacity visual variable Explore in the sandboxSandbox Share View live
GeometryEngine - geodesic buffers Explore in the sandboxSandbox Share View live
Create a FeatureLayer with client side graphics Explore in the sandboxSandbox Share View live
MapImageLayer - Explore data from a dynamic workspace Explore in the sandboxSandbox Share View live
Generate data-driven visualization of unique values Explore in the sandboxSandbox Share View live
Animate color visual variable Explore in the sandboxSandbox Share View live
LayerList widget with actions Explore in the sandboxSandbox Share View live
Query statistics by geometry Explore in the sandboxSandbox Share View live
Update FeatureLayer using applyEdits() Explore in the sandboxSandbox Share View live
Calcite Maps and Bootstrap Explore in the sandboxSandbox Share View live
Thematic multivariate visualization (2D) Explore in the sandboxSandbox Share View live
Loading...