ArcGIS API for JavaScript (legacy) ^3.46

require(["esri/renderers/HeatmapRenderer"], function(HeatmapRenderer) { /* code goes here */ });

The HeatmapRenderer renders feature layer point data into a raster visualization that emphasizes areas of higher density or weighted values. This renderer uses a Gaussian Blur technique to average the influence of each point out over the area determined by the blurRadius. A Gaussian blur uses a Gaussian, or Normal, distribution (also called a Bell-curve) to spread value out in vertical and horizontal directions.

The standard normal distribution



This averaging function is applied horizontally and vertically to produce a blurred area of influence instead of a single specific point.



This process is repeated for each point. Each time the calculation is performed, the blurred values are added to the underlying pixels. The results are cumulative, so a pixel that has several points near it will have a higher value than a pixel with a single point in it. This accumulated value is called the intensity of the pixel. This intensity calculation can be further adjusted by using the field property. The values from the specified attribute field are multiplied by the blurred value during the calculations for each point. Through this property, points can be given higher or lower weights depending on the value of their specified attribute.

The unit-less, calculated intensity value is used to assign a color to the pixel. The color ramp specified by the colors option is scaled using the maxPixelIntensity and minPixelIntensity values. Typically, minPixelIntensity will be zero and maxPixelIntensity will be set to an appropriately high value. The default is 100, but that might not be good for your dataset and expected scale over which this renderer will be used. When using a field to weight the points, setting minPixelIntensity above zero might help to visually filter out frequently occurring but low value point clusters. This property will not actually filter the data or modify the calculated intensity value in any way, but rather scale the color ramp such that a higher intensity value is required for a pixel to get a noticeable color. Determining the best values for minPixelIntensity and maxPixelIntensity is an exercise left up to the developer since different types, scales, densities, and distributions of data will require different values for these properties to create a visually pleasing separation of high and low intensity areas that is appropriate for the data and its application.

More information on working with rendering, smart mapping, and using visual variables can be found in the Data Visualization guide topic and the multiple samples referenced within this topic.

esri/renderers/Renderer
|_esri/renderers/HeatmapRenderer

var heatmapRenderer = new HeatmapRenderer({
    colors: ["rgba(0, 0, 255, 0)","rgb(0, 0, 255)","rgb(255, 0, 255)", "rgb(255, 0, 0)"],
    blurRadius: 12,
    maxPixelIntensity: 250,
    minPixelIntensity: 10
});

var heatmapRenderer = new HeatmapRenderer({
  blurRadius: 10,
  colorStops: [
      { ratio: 0, color: "rgba(250, 0, 0, 0)" },
      { ratio: 0.6, color: "rgb(250, 0, 0)" },
      { ratio: 0.85, color: "rgb(250, 150, 0)"},
      { ratio: 0.95, color: "rgb(255, 255, 0)"}],
});

var colors = ["rgba(0, 0, 255, 0)","rgb(0, 0, 255)","rgb(255, 0, 255)", "rgb(255, 0, 0)"];

heatmapRenderer.setColorStops([
  { ratio: 0, color: "rgba(250, 0, 0, 0)" },
  { ratio: 0.6, color: "rgb(250, 0, 0)" },
  { ratio: 0.85, color: "rgb(250, 150, 0)"},
  { ratio: 0.95, color: "rgb(255, 255, 0)"}]);