Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/workers
Class: InfographicsCarousel

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

NameSummary
new InfographicsCarousel(params, srcNodeRef)Creates a new InfographicsCarousel dijit using the given DOM node.

CSS

esri/dijit/geoenrichment/InfographicsCarousel | Download source

Properties

NameTypeSummary
expandedBooleanIf true, the Infographic will be displayed in its expanded state.
optionsInfographicsOptionsDescribes the options used to configure the contents of the carousel.
returnGeometryBooleanWhen true, output geometry will be available as the geometry property in the returned object of the "data-ready" event handler.
selectedIndexNumberThe index of the currently selected InfoGraphic in this InfographicsCarousel.
studyAreaGeometryStudyAreaThe study area for this InfographicsCarousel.
studyAreaTitleStringThe name of the study area to be shown in this InfographicsCarousel.

Methods

NameReturn typeSummary
startup()NoneFinalizes 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

NameEvent ObjectSummary
data-error
{
  error: <Object>
}
Fires if an error occurs in retrieving data for the study area.
data-loadFires when loading data for the study area.
data-ready
{
  provider: <Object>
}
Fires when data for the study area is ready.
resize
{
  size: <Number[]>
}
Fires when the InfographicsCarousel is resized.
Constructor Details

new InfographicsCarousel(params, srcNodeRef)

Creates a new InfographicsCarousel dijit using the given DOM node.
Parameters:
<Object> params 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.
<Node | String> srcNodeRef 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> expanded

If true, the Infographic will be displayed in its expanded state. The default value is true.
Known values: true | false
Default value: true
Describes the options used to configure the contents of the carousel.

<Boolean> returnGeometry

When 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 | false
Default value: false

<Number> selectedIndex

The index of the currently selected InfoGraphic in this InfographicsCarousel.

<GeometryStudyArea> studyArea

The study area for this InfographicsCarousel. Required when constructing an InfographicsCarousel.

<String> studyAreaTitle

The name of the study area to be shown in this InfographicsCarousel.
Method Details

startup()

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 ]

data-error

Fires if an error occurs in retrieving data for the study area. Should be used in favor of onDataRequest.
Event Object Properties:
<Object> error The error message returned by the GeoEnrichment service.

data-load

Fires when loading data for the study area. Should be used in favor of onDataLoad.

data-ready

Fires when data for the study area is ready. Should be used in favor of onDataReady.
Event Object Properties:
<Object> provider 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()));
  });
});

resize

Fires when the InfographicsCarousel is resized. Should be used in favor of onResize.
Event Object Properties:
<Number[]> size The size of the InfographicsCarousel.
[460,106]