Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: HeatmapSlider
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/HeatmapSlider"], function(HeatmapSlider) { /* code goes here */ });
Description
(Added at v3.13)
A widget to assist in obtaining values for managing and setting properties on a HeatmapRenderer.Samples
Search for samples that use this class.Class hierarchy
esri/dijit/RendererSlider |_esri/dijit/HeatmapSlider
Constructors
| Name | Summary |
|---|---|
| new HeatmapSlider(params, srcNodeRef) | Creates a new HeatmapSlider widget within the provided DOM node srcNodeRef. |
CSS
esri/dijit/HeatmapSlider | Download source
| Name | Description |
|---|---|
| NumberTextBoxContainer | None |
| bottomLabelNode | None |
| esriRendererSlider | None |
| handler | None |
| handlerLabel | None |
| handlerTick | None |
| handlerTickBottom | None |
| handlerTickTop | None |
| moveable | None |
| sliderArea | None |
| sliderAreaRight | None |
| sliderNode | None |
| topLabelNode | None |
Properties
| Name | Type | Summary |
|---|---|---|
| colorStops | Object | Required. |
| handles | Number[] | Required. |
| maxValue | Number | Optional, absolute maximum value of the slider.NOTE: This value overrides statistics' max property. |
| minValue | Number | Optional, absolute minimum value of the slider.NOTE: This value overrides statistics' min property. |
| rampWidth | Number | Optional. |
| showHandles | Boolean | Property for showing handles. |
| showLabels | Boolean | Property for showing labels. |
| showTicks | Boolean | Property for showing ticks. |
| values | Number[] | Required: Handle positions represented as numbers that fall between minimum and maximum. |
Methods
| Name | Return type | Summary |
|---|---|---|
| startup() | None | Finalizes the creation of the widget. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| handle-value-change | {
colorStops: < | Fires on slide stop and when a handle is updated via textbox. |
Constructor Details
Creates a new
HeatmapSlider widget within the provided DOM node srcNodeRef.Parameters:
< |
Required | Set of parameters used to specify the HeatmapSlider widget options. |
< |
Required | Reference or ID of the HTMLElement where the widget should be rendered. |
params properties: < |
Required | An array of colorStop objects describing the renderer's color ramp with more specificity than just colors. |
< |
Required | Handles identified by their index values within the stops array. |
< |
Optional | Absolute maximum value of the slider. Default is 100. |
< |
Optional | Absolute minimum value of the slider. Default is 0. |
< |
Optional | Width of slider ramp in pixels. Default is 25. |
< |
Optional | Displays slider handles when true. Default is true. |
< |
Optional | Displays slider labels when true. Default is true. |
< |
Optional | Displays slider ticks when true. Default is true. |
Sample:
require(["esri/dijit/HeatmapSlider"], function (HeatmapSlider) {
var myStops = [
{"ratio":0,"color":{
"r":133,"g":193,"b":200,"a":0}
},
{"ratio":0.01,"color":{
"r":133,"g":193,"b":200,"a":0}
},
{"ratio":0.01,"color":{
"r":133,"g":193,"b":200,"a":0.7}
},
{"ratio":0.01,"color":{
"r":133,"g":193,"b":200,"a":0.7}
},
{"ratio":0.0925,"color":{
"r":144,"g":161,"b":190,"a":0.7}
},
{"ratio":0.17500000000000002,"color":{
"r":156,"g":129,"b":132,"a":0.7}
},
{"ratio":0.2575,"color":{
"r":167,"g":97,"b":170,"a":0.7}
},
{"ratio":0.34,"color":{
"r":175,"g":73,"b":128,"a":0.7}
},
{"ratio":0.42250000000000004,"color":{
"r":184,"g":48,"b":85,"a":0.7}
},
{"ratio":0.505,"color":{
"r":192,"g":24,"b":42,"a":0.7}
},
{"ratio":0.5875,"color":{
"r":200,"g":0,"b":0,"a":0.7}
},
{"ratio":0.67,"color":{
"r":211,"g":51,"b":0,"a":0.7}
},
{"ratio":0.7525000000000001,"color":{
"r":222,"g":102,"b":0,"a":0.7}
},
{"ratio":0.8350000000000001,"color":{
"r":233,"g":153,"b":0,"a":0.7}
},
{"ratio":0.9175000000000001,"color":{
"r":244,"g":204,"b":0,"a":0.7}
},
{"ratio":1,"color":{
"r":255,"g":255,"b":0,"a":0.7}
}
];
heatmapSliderDev = new HeatmapSlider({
"colorStops": myStops
}, "heatmapSliderDev");
heatmapSliderDev.startup();
}
Property Details
<Number[]
Number[]Required. Handles identified by their index values within the
stops array.Default value:
[3, 15]<Number
NumberOptional, absolute maximum value of the slider.NOTE: This value overrides statistics'
max property.Default value:
100<Number
NumberOptional, absolute minimum value of the slider.NOTE: This value overrides statistics'
min property.Default value:
0<Number[]
Number[]Required: Handle positions represented as numbers that fall between
minimum and maximum.Default value:
[50]Method Details
Event Details
[ On Style Events | Connect Style Event ]
Fires on slide stop and when a handle is updated via textbox.
Event Object Properties:
< |
An array of colorStop objects describing the renderer's color ramp with more specificity than just colors. |