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: SizeInfoSlider
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/SizeInfoSlider"], function(SizeInfoSlider) { /* code goes here */ });
Description
(Added at v3.13)
A widget to assist with managing size with a renderer.Samples
Search for samples that use this class.Class hierarchy
esri/dijit/RendererSlider |_esri/dijit/SizeInfoSlider
Constructors
| Name | Summary |
|---|---|
| new SizeInfoSlider(params, srcNodeRef) | Creates a new SizeInfoSlider widget. |
CSS
esri/dijit/SizeInfoSlider | 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 |
|---|---|---|
| handles | Number[] | Required: Handles identified by their index values within the stops array. |
| histogram | Object | Optional: Represents the histogram data object. |
| histogramWidth | Number | Optional: Width of the histogram in pixels. |
| maxValue | Number | Optional: The absolute maximum value of the slider. |
| minValue | Number | Optional: The absolute minimum value of the slider. |
| primaryHandle | Number | Optional: The handle identified by its index value within the stops array. |
| rampWidth | Number | Optional: Represents the width of the SVG ramp in pixels. |
| showHandles | Boolean | Optional: Indicates whether to display slider handles. |
| showHistogram | Boolean | Optional: Indicates whether to display the histogram. |
| showLabels | Boolean | Optional: Indicates whether to display the slider labels. |
| showTicks | Boolean | Optional: Indicates whether to display the slider tick marks. |
| sizeInfo | Object | Required: Defines the size of the symbol where feature size is proportional to data value. |
| statistics | Object | Optional: Represents the statistics data object. |
| symbol | SimpleMarkerSymbol | SimpleLineSymbol | Required: The SimpleLineSymbol or SimpleMarkerSymbol used with the widget. |
| values | Number[] | Required: Handle positions represented as numbers that fall between minimum and maximum. |
| zoomOptions | Object | Optional: Additional options to customize slider. |
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 |
|---|---|---|
| data-change | {
maxValue: < | Fires during slide and slide stop, and when a handle or the minValue or maxValue of the SizeInfoSlider are updated via text box. |
| data-value-change | {
maxValue: < | Fires when minValue or maxValue of the SizeInfoSlider changes. |
| handle-value-change | {
sizeInfo: < | Fires on slide stop and when a handle is updated via textbox. |
| zoomed | {
zoomed: < | Fires when the zoom state changes. |
Constructor Details
Creates a new
SizeInfoSlider widget.Parameters:
< |
Required | Set of parameters used to specify the SizeInfoSlider widget options. |
< |
Required | Reference or ID of the HTMLElement where the widget should be rendered. |
params properties: < |
Required | Handles identified by their index values within the stops array. |
< |
Optional | Represents the histogram data object. Access this from the FeatureLayerStatistics.getHistogram response. Default value is null. See the object specifications table below for the structure of the returned histogram object. |
< |
Optional | Width of the histogram in pixels. Default is 100. |
< |
Optional | The absolute maximum value of the slider. NOTE: This value overrides the statistics max property. Default value is 100. |
< |
Optional | The absolute minimum value of the slider. NOTE: This value overrides the statistics min property. Default value is 0. |
< |
Optional | The handle identified by its index value within the stops array. This value must also be in handles array. Default value is null. |
< |
Optional | Represents the width of the SVG ramp in pixels. Default is 26. |
< |
Optional | Displays slider handles when true. Default is true. |
< |
Optional | Displays the histogram when true. Default is true. |
< |
Optional | Displays labels when true. Default is true. |
< |
Optional | Displays slider ticks when true. Default is true. |
< |
Required | Defines the size of the symbol where feature size is proportional to data value. See Renderer.sizeInfo for additional information. |
< |
Optional | Represents the statistics data object. Use the renderer.statistics from smartMapping.createSizeRenderer response. |
< |
Required | The SimpleLineSymbol or SimpleMarkerSymbol used with the widget. Note that only these two symbol types are supported. Default is a SimpleMarkerSymbol displaying a half circle. NOTE: This property is only used to switch between marker and line modes. |
< |
Optional | Additional options to customize slider. For example, if the slider has a range between 0 and 100 with two handles at 10 and 20, it is possible to pass in zoomOptions with 0 and 30 for the minSliderValue and maxSliderValue. The slider would be cut off at the top and zoomed to a ramp that can move from 0 through 30. Default value is null.
See the zoomOptions table below for additional information. |
Sample:
require(["esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/symbols/SimpleLineSymbol", "esri/dijit/SizeInfoSlider"], function (SimpleMarkerSymbol, Color, SimpleLineSymbol, SizeInfoSlider) {
var mySymbol = new SimpleMarkerSymbol()
.setColor(new Color([227,139,79,0.8]))
.setOutline(new SimpleLineSymbol()
.setColor(new Color([255,255,255]))
.setWidth(0.5));
sizeInfoSliderDiv = new SizeInfoSlider({
symbol: mySymbol,
statistics: {
avg: 287.34912394549,
count: 1541,
max: 8215,
min: 1,
stddev: 573.17608985492
},
zoomOptions: {
minSliderValue: 1,
maxSliderValue: 1467,
},
sizeInfo: {
minSize: 5,
maxSize: 50,
maxDataValue: 1188,
minDataValue: 308
}
}, "sizeInfoSliderDiv");
sizeInfoSliderDiv.startup();
}
Property Details
<Number[]
Number[]Required: Handles identified by their index values within the
stops array.Default value:
[]<Object
ObjectOptional: Represents the
histogram data object. Access this from the FeatureLayerStatistics.getHistogram response. See the object specifications table below for the structure of the returned histogram object.Default value:
nullObject Specifications:
<
histogram>< |
Required | An array of objects indicating bins in the histogram. It contains the number of features that fall into each of the disjoint categories in the histogram.
The object includes the following properties:
|
< |
Required | Maximum value captured by the histogram. This is optional if statistics are passed in. |
< |
Required | Minimum value captured by the histogram. This is optional if statistics are passed in. |
< |
Optional | Sum of all data values used to normalize data. Available only when normalizationType is percent-of-total. |
<Number
NumberOptional: The absolute maximum value of the slider. NOTE: This value overrides the statistics
max property.Default value:
100<Number
NumberOptional: The absolute minimum value of the slider. NOTE: This value overrides the statistics
min property. Default value:
0<Number
NumberOptional: The handle identified by its index value within the
stops array. This value must also be in handles array.Default value:
null<Boolean
BooleanOptional: Indicates whether to display slider handles.
Known values:
true | falseDefault value:
true<Boolean
BooleanOptional: Indicates whether to display the histogram.
Known values:
true | falseDefault value:
true<Boolean
BooleanOptional: Indicates whether to display the slider labels.
Known values:
true | falseDefault value:
true<Boolean
BooleanOptional: Indicates whether to display the slider tick marks.
Known values:
true | falseDefault value:
true<Object
ObjectRequired: Defines the size of the symbol where feature size is proportional to data value. See
Renderer.sizeInfo for additional information.Default value:
null<Object
ObjectOptional: Represents the
statistics data object. Use the renderer.statistics from smartMapping.createSizeRenderer response.Default value:
nullSample:
smartStyling.createColorRenderer({
layer: layer,
field: "POP1999",
basemap: "topo"
}).then(function(response){
var colorInfo = response.renderer.visualVariables[0];
var bottomHandlerValue = colorInfo.stops[0].value;
var topHandlerValue = colorInfo.stops[4].value;
var stats = response.statistics;
});
<SimpleMarkerSymbol | SimpleLineSymbol
SimpleMarkerSymbol | SimpleLineSymbolRequired: The SimpleLineSymbol or SimpleMarkerSymbol used with the widget. Note that only these two symbol types are supported. Default is a
SimpleMarkerSymbol displaying a half circle. NOTE: This property is only used to switch between marker and line modes.Default value:
SimpleMarkerSymbol<Number[]
Number[]Required: Handle positions represented as numbers that fall between
minimum and maximum.Default value:
[50]<Object
ObjectOptional: Additional options to customize slider. For example, if the slider has a range between 0 and 100 with two handles at 10 and 20, it is possible to pass in
zoomOptions with 0 and 30 for the minSliderValue and maxSliderValue. The slider would be cut off at the top and zoomed to a ramp that can move from 0 through 30.
See the zoomOptions table below for additional information.Default value:
nullObject Specifications:
<
zoomOptions>< |
Required | Histogram data object. |
< |
Required | Maximum value of slider. It represents the absolute maximum value when the slider is zoomed. |
< |
Required | Minimum value of the slider. It represents the absolute minimum value when the slider is zoomed. |
Method Details
Event Details
[ On Style Events | Connect Style Event ]
Fires on slide stop and when a handle is updated via textbox.
Fires when the zoom state changes. (Added at v3.15)
Event Object Properties:
< |
Indicates whether the slider is currently in a zoomed state. |