require(["esri/dijit/HeatmapSlider"], function(HeatmapSlider) { /* code goes here */ });
HeatmapRenderer
.esri/dijit/RendererSlider |_esri/dijit/HeatmapSlider
Name | Summary |
---|---|
new HeatmapSlider(params, srcNodeRef) | Creates a new HeatmapSlider widget within the provided DOM node srcNodeRef . |
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 |
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 . |
Name | Return type | Summary |
---|---|---|
startup() | None | Finalizes the creation of the widget. |
Name | Event Object | Summary |
---|---|---|
handle-value-change | {
colorStops: < | Fires on slide stop and when a handle is updated via textbox. |
HeatmapSlider
widget within the provided DOM node srcNodeRef
.< > params |
Required | Set of parameters used to specify the HeatmapSlider widget options. |
< > srcNodeRef |
Required | Reference or ID of the HTMLElement where the widget should be rendered. |
params
properties: < > colorStops |
Required | An array of colorStop objects describing the renderer's color ramp with more specificity than just colors. |
< > handles |
Required | Handles identified by their index values within the stops array. |
< > maxValue |
Optional | Absolute maximum value of the slider. Default is 100 . |
< > minValue |
Optional | Absolute minimum value of the slider. Default is 0 . |
< > rampWidth |
Optional | Width of slider ramp in pixels. Default is 25 . |
< > showHandles |
Optional | Displays slider handles when true . Default is true . |
< > showLabels |
Optional | Displays slider labels when true . Default is true . |
< > showTicks |
Optional | Displays slider ticks when true . Default is true . |
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(); }
Number[]
> handlesstops
array.[3, 15]
Number
> maxValuemax
property.100
Number
> minValuemin
property.0
Number[]
> valuesminimum
and maximum
.[50]
< > colorStops |
An array of colorStop objects describing the renderer's color ramp with more specificity than just colors. |