InfographicsCarousel

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:components="com.esri.ags.samples.components.*"
               xmlns:geoEnrichmentClasses="com.esri.ags.tasks.geoEnrichmentClasses.*"
               initialize="application_initializeHandler(event)"
               pageTitle="InfographicsCarousel">
    <!--
    Description:
    The InfographicsCarousel component requests information from the GeoEnrichment service
    to enhance the data of a given location, and presents this information through
    a collection of data visualizations.  This sample allows users to click any location on the map
    and returns the GeoEnrichment data of a 1-mile ring buffer area.
    Use the "previous" and "next" button to switch between different infographics.

    Note:
    To use this sample locally, delete the following line 'proxyURL="https://developers.arcgis.com/sproxy/"'
    from the '<esri:InfographicsCarousel' component.
    Removing the proxyURL will force the IdentityManager to prompt for credentials to access the services.

    Attention:
    GeoEnrichment is a subscription based service available through ArcGIS Online.
    Log-in credentials are always required when executing a GeoEnrichment task.
    For demo purposes, this sample uses a proxy to bypass the login credentials.

    Documentation:
    For more information, see the API documentation.
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/Graphic.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/Infographic.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/IdentityManager.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/InfographicsCarousel.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/events/InfographicEvent.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/events/MapMouseEvent.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/geometry/MapPoint.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/tasks/geoEnrichmentClasses/GeographyLevel.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/tasks/geoEnrichmentClasses/GeometryStudyArea.html

    ArcGIS Developers documentation:
    https://developers.arcgis.com/en/features/geo-enrichment/
    http://resources.arcgis.com/en/help/arcgis-rest-api/index.html#/GeoEnrichment_Service_Overview/02r30000021r000000/
    http://resources.arcgis.com/en/help/arcgis-rest-api/index.html#/Data_collections/02r30000021t000000/

    This sample also uses the following files:
    com\esri\ags\samples\components\GeoEnrichmentBufferOptions.mxml
    com\esri\ags\samples\skins\SimpleNavigationSkin.mxml
    -->

    <s:states>
        <s:State name="normal"/>
        <!-- Normal application state: map without infographics carousel -->
        <s:State name="withCarousel"/>
        <!-- Second application state: show the map with the infographics carousel -->
    </s:states>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace esri "http://www.esri.com/2008/ags";
        
        global
        {
            color: #282828;
        }
       s|BorderContainer
        {
            dropShadowVisible: true;
            borderVisible: false;
            backgroundColor: #F9F9F9;
            backgroundAlpha: 0.8;
        }
        s|DataGrid
        {
            rollOverColor: #EEEEEE;
            selectionColor: #EEEEEE;
        }
        s|DropDownList
        {
            selectionColor: #EEEEEE;
            focusColor: #D3D1D1;
            borderColor: #D3D1D1;
            rollOverColor: #EEEEEE;
            color: #666666;
        }
        s|NumericStepper
        {
           color: #666666;
        }
        mx|ToolTip
        {
            fontSize: 12;
            color: #000000;
            backgroundColor: #F9F9F9;
            paddingLeft: 10; 
            paddingRight: 10; 
            paddingTop: 10;
            paddingBottom: 10;
        }
        esri|Navigation
        {
            skinClass:ClassReference("com.esri.ags.samples.skins.SimpleNavigationSkin");
            left: NaN;
            right: 20; 
            top: 286;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import com.esri.ags.components.IdentityManager;
            import com.esri.ags.events.DrawEvent;
            import com.esri.ags.events.InfographicEvent;
            import com.esri.ags.geometry.Geometry;
            import com.esri.ags.geometry.MapPoint;

            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;

            import spark.events.IndexChangeEvent;

            //--------------------------------------------------------------------------
            //
            //  Properties
            //
            //--------------------------------------------------------------------------

            []
            /**
             * The geometry drawn by the user.
             */
            public var inputGeometry:Geometry;

            []
            /**
             * The geometry from the enrich result.
             */
            public var resultGeometry:Geometry;

            []
            /**
             * Flag set to true when we received result from the carousel.
             */
            public var hasEnrichResult:Boolean = false;

            //--------------------------------------------------------------------------
            //
            //  Methods
            //
            //--------------------------------------------------------------------------

            /**
             * Utility function to center the map on the right.
             */
            private function offsetCenter():void
            {
                var bounds:Rectangle = carousel.getBounds(map);
                var pxTranslation:Number = bounds.width * 0.5 * (map.extent.width / map.width);
                var center:MapPoint = map.center;
                center.x -= pxTranslation;
                map.centerAt(center);
            }

            //--------------------------------------------------------------------------
            //
            //  Event Handlers
            //
            //--------------------------------------------------------------------------

            private function application_initializeHandler(event:FlexEvent):void
            {
                IdentityManager.instance.enabled = true;
            }

            private function carousel_enrichCompleteHandler(event:InfographicEvent):void
            {
                // clear the drawn polygon if the user drew one.
                if (inputGraphicsLayer.numGraphics == 1 &&
                    (inputGraphicsLayer.getChildAt(0) as Graphic).geometry.type == Geometry.POLYGON)
                {
                    inputGraphicsLayer.clear();
                }

                // put the result geometry on the graphics layer.
                resultGeometry = event.studyAreaGraphics[0].geometry;

                // zoom on the geometry
                map.extent = resultGeometry.extent;
                map.level--;
                offsetCenter();

                hasEnrichResult = true;
                infographicCarouselToggleButton.selected = false;
            }

            private function carousel_faultHandler(event:FaultEvent):void
            {
                Alert.show("Something bad happened when attemping to enrich the location." + "\n" + event.fault.faultString, "GeoEnrichment Service error");
                hasEnrichResult = false;
                currentState = "normal";
            }

            private function drawToolbar_changeHandler(event:IndexChangeEvent):void
            {
                if (drawToolbar.selectedItem)
                {
                    //
                    // activate or deactivate options for the buffer.
                    // 
                    var value:String = drawToolbar.selectedItem.value;
                    if (value == DrawTool.POLYLINE)
                    {
                        // drive buffers are not supported for polylines
                        bufferOptions.type = "ring";
                        bufferOptions.enabled = true;
                        bufferOptions.optionTypeList.enabled = false;
                    }
                    else if (value == DrawTool.POLYGON)
                    {
                        // buffers are not supported for polygons
                        bufferOptions.enabled = false;
                    }
                    else
                    {
                        bufferOptions.enabled = true;
                        bufferOptions.optionTypeList.enabled = true;
                    }

                    //
                    // Activate the draw tool
                    // 
                    drawTool.activate(value);
                }
                else
                {
                    drawTool.deactivate();
                }
            }

            private function drawTool_drawEndHandler(event:DrawEvent):void
            {
                inputGraphicsLayer.clear();
                inputGraphicsLayer.add(event.graphic);
                inputGeometry = event.graphic.geometry;

                hasEnrichResult = false;
                resultGeometry = null;
                currentState = "withCarousel";

                //
                // The carousel will find the infographics to create
                // for this inputGeometry, then display the first one.
                // The results will depend on the country.
                //
                carousel.load();
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!--
            The DrawTool to draw the inputGeometry.
            It can be a MapPoint, Polyline or a Polygon.
        -->
        <esri:DrawTool id="drawTool"
                       drawEnd="drawTool_drawEndHandler(event)"
                       map="{map}">
            <esri:markerSymbol>
                <esri:SimpleMarkerSymbol color="#80B1D3" size="10">
                    <esri:SimpleLineSymbol width="2" color="#1F78B4"/>
                </esri:SimpleMarkerSymbol>
            </esri:markerSymbol>
            <esri:fillSymbol>
                <esri:CompositeSymbol>
                    <esri:SimpleFillSymbol alpha="0.5" color="#80B1D3">
                        <esri:SimpleLineSymbol style="none"/>
                    </esri:SimpleFillSymbol>
                    <esri:SimpleFillSymbol alpha="1"
                                           color="#1F78B4"
                                           style="forwarddiagonal">
                        <esri:SimpleLineSymbol width="2"
                                               color="#1F78B4"
                                               style="dash"/>
                    </esri:SimpleFillSymbol>
                </esri:CompositeSymbol>
            </esri:fillSymbol>
            <esri:lineSymbol>
                <esri:SimpleLineSymbol width="2"
                                       color="#1F78B4"
                                       style="dash"/>
            </esri:lineSymbol>
        </esri:DrawTool>
    </fx:Declarations>

    <s:controlBarContent>
        <s:RichText width="100%">
            The InfographicsCarousel component requests information from the GeoEnrichment service 
            to enhance the data of a given location, and presents this information through
            a collection of data visualizations.  This sample allows users to click any location on the map 
            and returns the GeoEnrichment data of a 1-mile ring buffer area.
            Use the "previous" and "next" button to switch between different infographics.
        </s:RichText>
    </s:controlBarContent>

    <esri:Map id="map"
              level="13"
              scaleBarVisible="false"
              wrapAround180="true">
        <esri:center>
            <esri:WebMercatorMapPoint lon="-122.45" lat="37.75"/>
        </esri:center>

        <!--
            //
            //      LAYERS
            //
        -->
        <esri:ArcGISTiledMapServiceLayer url="http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"/>

        <!-- Draw the World Street Map layer only under the result geometry using a mask -->
        <esri:ArcGISTiledMapServiceLayer mask="{maskLayer}" url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="maskLayer" alpha="1">
            <esri:Graphic geometry="{resultGeometry}">
                <esri:symbol>
                    <esri:SimpleFillSymbol alpha="1" color="#FF0000"/>
                </esri:symbol>
            </esri:Graphic>
        </esri:GraphicsLayer>

        <!-- Displays the result geometry -->
        <esri:GraphicsLayer id="resultsGraphicsLayer" alpha="0.5">
            <esri:Graphic geometry="{resultGeometry}">
                <esri:symbol>
                    <esri:CompositeSymbol>
                        <esri:SimpleFillSymbol alpha="0.25" color="#FF0000"/>
                        <esri:SimpleFillSymbol alpha="1"
                                               color="#CC0000"
                                               style="forwarddiagonal">
                            <esri:SimpleLineSymbol width="4" color="#CC0000"/>
                        </esri:SimpleFillSymbol>
                    </esri:CompositeSymbol>
                </esri:symbol>
            </esri:Graphic>
        </esri:GraphicsLayer>

        <!-- Display the input geometry -->
        <esri:GraphicsLayer id="inputGraphicsLayer"/>
    </esri:Map>

    <s:BorderContainer left="20" top="20"
                       visible.withCarousel="false">
        <s:layout>
            <s:VerticalLayout gap="10"
                              paddingBottom="10"
                              paddingLeft="10"
                              paddingRight="0"
                              paddingTop="10"/>
        </s:layout>
        <s:Label color="#1F78B4"
                 fontSize="20"
                 fontWeight="bold"
                 text="Buffer options"/>

        <!--
            // Component to set options on the study area.
        -->
        <components:GeoEnrichmentBufferOptions id="bufferOptions">
            <components:layout>
                <s:FormLayout gap="0"
                              paddingBottom="-10"
                              paddingLeft="-10"
                              paddingRight="-10"
                              paddingTop="-10"/>
            </components:layout>
        </components:GeoEnrichmentBufferOptions>
        <s:Label color="#1F78B4"
                 fontSize="20"
                 fontWeight="bold"
                 text="Explore with a tool"/>

        <!--
            // Available tools to draw on the map.
        -->
        <s:ButtonBar id="drawToolbar" change="drawToolbar_changeHandler(event)">
            <s:ArrayList>
                <fx:Object label="Point" value="mappoint"/>
                <fx:Object label="Polyline" value="polyline"/>
                <fx:Object label="Polygon" value="polygon"/>
            </s:ArrayList>
        </s:ButtonBar>
    </s:BorderContainer>

    <s:BorderContainer width="607"
                       left="20" top="20"
                       includeInLayout="false"
                       includeInLayout.withCarousel="true"
                       visible="false"
                       visible.withCarousel="true">
        <s:layout>
            <s:HorizontalLayout paddingBottom="10"
                                paddingLeft="10"
                                paddingRight="10"
                                paddingTop="10"/>
        </s:layout>

        <!--
            // The carousel component.
            // Note: remove or change the proxyURL if you use arcgis.com authentication.
        -->
        <esri:InfographicsCarousel id="carousel"
                                   complete="carousel_enrichCompleteHandler(event)"
                                   fault="carousel_faultHandler(event)"
                                   proxyURL="https://developers.arcgis.com/sproxy/">

            <!--
                // We use a GeometryStudyArea to send a user input geometry as the study area.
            -->
            <geoEnrichmentClasses:GeometryStudyArea id="geometryStudyArea"
                                                    geometry="{inputGeometry}"
                                                    options="{bufferOptions.studyAreaOptions}"
                                                    returnGeometry="true">
                <!--
                    //  Each country has its own standard geography levels
                    //  The AdminLevels are aliases that correspond to various levels of
                    //  geography for each individual country
                    //
                    //  US: Admin3 (US.Counties), Admin2 (US.States), Admin1 (US.WholeUSA)
                -->
                <geoEnrichmentClasses:comparisonGeographyLevels>
                    <geoEnrichmentClasses:GeographyLevel layerId="Admin3"/>
                    <geoEnrichmentClasses:GeographyLevel layerId="Admin2"/>
                    <geoEnrichmentClasses:GeographyLevel layerId="Admin1"/>
                </geoEnrichmentClasses:comparisonGeographyLevels>
            </geoEnrichmentClasses:GeometryStudyArea>
        </esri:InfographicsCarousel>
    </s:BorderContainer>

    <!--
        // Button to show/hide the carousel.
    -->
    <s:ToggleButton id="infographicCarouselToggleButton"
                    right="20" top="20"
                    click="{infographicCarouselToggleButton.selected ? currentState='normal' : currentState='withCarousel'}"
                    label="{infographicCarouselToggleButton.selected ? 'Show Carousel' : 'Hide Carousel'}"
                    visible="{hasEnrichResult}"/>

</s:Application>