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: InfographicsCarousel
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/geoenrichment/InfographicsCarousel"], function(InfographicsCarousel) { /* code goes here */ });
Description
(Added at v3.6)
Displays a set of Infographic dijits in a carousel.
Note that a css stylesheet needs to be included:
<link rel="stylesheet" href="//js.arcgis.com/3.11/esri/dijit/geoenrichment/themes/common/main.css">
Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new InfographicsCarousel(params, srcNodeRef) | Creates a new InfographicsCarousel dijit using the given DOM node. |
CSS
esri/dijit/geoenrichment/InfographicsCarousel | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| expanded | Boolean | If true, the Infographic will be displayed in its expanded state. |
| options | InfographicsOptions | Describes the options used to configure the contents of the carousel. |
| returnGeometry | Boolean | When true, output geometry will be available as the geometry property in the returned object of the "data-ready" event handler. |
| selectedIndex | Number | The index of the currently selected InfoGraphic in this InfographicsCarousel. |
| studyArea | GeometryStudyArea | The study area for this InfographicsCarousel. |
| studyAreaTitle | String | The name of the study area to be shown in this InfographicsCarousel. |
Methods
| Name | Return type | Summary |
|---|---|---|
| startup() | None | Finalizes the creation of this dijit. |
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-error | {
error: < | Fires if an error occurs in retrieving data for the study area. |
| data-load | Fires when loading data for the study area. | |
| data-ready | {
provider: < | Fires when data for the study area is ready. |
| resize | {
size: < | Fires when the InfographicsCarousel is resized. |
Constructor Details
Creates a new
InfographicsCarousel dijit using the given DOM node.Parameters:
< |
Required | Various optional parameters that can be used to configure the dijit. All properties can be passed into the constructor as options. studyArea is required when constructing an InfographicsCarousel. |
< |
Required | Reference or id of an HTML element where the Directions widget should be rendered. |
Sample:
require([
"esri/dijit/geoenrichment/InfographicsCarousel",
"esri/geometry/Point",
"esri/tasks/geoenrichment/GeometryStudyArea",
"esri/tasks/geoenrichment/DriveBuffer", "dojo/domReady!"
], function(InfographicsCarousel, Point, GeometryStudyArea, DriveBuffer){
var infographics = new InfographicsCarousel({
returnGeometry: true,
studyArea: new GeometryStudyArea({ geometry: new Point(-120.44,34.95) }),
}, "infographics");
infographics.startup();
});Property Details
<Boolean
BooleanIf true, the
Infographic will be displayed in its expanded state. The default value is true.Known values:
true | falseDefault value:
true<InfographicsOptions
InfographicsOptionsDescribes the options used to configure the contents of the carousel.
<Boolean
BooleanWhen true, output geometry will be available as the
geometry property in the returned object of the "data-ready" event handler. If you do not intend to add the output geometry to the map, set it to false to improve performance.Known values:
true | falseDefault value:
false<Number
NumberThe index of the currently selected
InfoGraphic in this InfographicsCarousel.<GeometryStudyArea
GeometryStudyAreaThe study area for this
InfographicsCarousel. Required when constructing an InfographicsCarousel.<String
StringThe name of the study area to be shown in this
InfographicsCarousel.Method Details
Finalizes the creation of this dijit. This method should be called after the constructor for this dijit is called and before letting the users interact with it.
Event Details
[ On Style Events | Connect Style Event ]
Fires if an error occurs in retrieving data for the study area. Should be used in favor of onDataRequest.
Event Object Properties:
< |
The error message returned by the GeoEnrichment service. |
Fires when data for the study area is ready. Should be used in favor of onDataReady.
Event Object Properties:
< |
A provider object containing GeoEnrichment results. When returnGeometry is set to true, you may use the provider.getGeometry() to get the returned geometry. |
Sample:
require([
"esri/graphic", "esri/symbols/SimpleFillSymbol", ...
], function(Graphic, SimpleFillSymbol, ... ){
infographics.on("data-ready", function (evt) {
map.graphics.add(new Graphic(evt.provider.geometry, new SimpleFillSymbol()));
});
});Fires when the
InfographicsCarousel is resized. Should be used in favor of onResize.Event Object Properties:
< |
The size of the InfographicsCarousel.[460,106] |