Skip To Content

Compare infographics

<?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:geoEnrichmentClasses="com.esri.ags.tasks.geoEnrichmentClasses.*"
               initialize="application_initializeHandler(event)"
               pageTitle="Compare Infographics">

    <!--
    Description:
    This sample demonstrates how to compare multiple infographics outside
    of the InfographicsCarousel.
    It allows users to click any location on the map and returns the GeoEnrichment data of the intersecting US County.

    Note:
    To use this sample locally, delete the following line 'proxyURL="https://developers.arcgis.com/sproxy/"'
    from the '<esri:Infographic' 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.

    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/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/geometry/WebMercatorMapPoint.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
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/tasks/geoEnrichmentClasses/RingBuffer.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/
    Tapestry Descriptions
    http://resources.arcgis.com/en/help/main/10.2/#/Tapestry_Descriptions/000z0000012q000000/
    Tapestry: Versatility in Grouping Segments
    http://resources.arcgis.com/en/help/main/10.2/000z/000z0000012m000000.htm

    This sample also uses the following files:
    com\esri\ags\samples\skins\SimpleNavigationSkin.mxml
    com\esri\ags\samples\skins\geoEnrichmentClasses\SmallChartOneVarSkin.mxml
    com\esri\ags\samples\skins\geoEnrichmentClasses\SmallRelatedVariablesSkin.mxml
    com\esri\ags\samples\skins\geoEnrichmentClasses\SmallTapestrySkin.mxml
    -->

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

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace esri "http://www.esri.com/2008/ags";

        s|BorderContainer
        {
            dropShadowVisible: true;
            borderVisible: false;
            backgroundColor: #F9F9F9;
            backgroundAlpha: 1;
        }
        s|List
        {
            selectionColor: #EEEEEE;
            focusColor: #D3D1D1;
            borderColor: #D3D1D1;
            rollOverColor: #EEEEEE;
            color: #666666;
        }
        s|DataGrid
        {
            rollOverColor: #EEEEEE;
            selectionColor: #EEEEEE;
        }
        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");
        }
        
        /*************************************************
         * 
         *  Define the skins for the Infographics.
         *
        *************************************************/
        /* The Infographic of type OneVar */
        esri|Infographic.OneVar
        {
            skinClass: ClassReference("com.esri.ags.samples.skins.geoEnrichmentClasses.SmallChartOneVarSkin");
        }
        /* The Infographic of type RelatedVariables */
        esri|Infographic.RelatedVariables
        {
            skinClass: ClassReference("com.esri.ags.samples.skins.geoEnrichmentClasses.SmallRelatedVariablesSkin");
        }
        /* The Infographic of type Tapestry */
        esri|Infographic.Tapestry
        {
            skinClass: ClassReference("com.esri.ags.samples.skins.geoEnrichmentClasses.SmallTapestrySkin");
        }
        esri|Infographic.Tapestry #percentageLabel
        {
            fontSize: 26px;
        }
        esri|Infographic.Tapestry #nameLabel
        {
            fontSize: 12px;
        }
    </fx:Style>

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

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

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

            []
            /**
             * The MapPoint clicked by the user.
             */
            public var inputGeometry:MapPoint;

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

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

            protected function map_clickHandler(event:MapMouseEvent):void
            {
                resultGraphicsLayer.clear();
                map.defaultGraphicsLayer.clear();

                inputGeometry = event.mapPoint;
                var graphic:Graphic = new Graphic(inputGeometry, clickLocationCompositeSymbol);
                map.defaultGraphicsLayer.add(graphic);

                currentState = 'withInfographic';
                tapestryInfographic.load();
                relatedVariablesInfographic.load();
                oneVarInfographic.load();
            }

            protected function tapestryInfographic_completeHandler(event:InfographicEvent):void
            {
                map.defaultGraphicsLayer.clear();
                resultGraphicsLayer.graphicProvider = event.studyAreaGraphics;
            }

            private function infographic_faultHandler(event:FaultEvent):void
            {
                Alert.show("Something bad happened when attemping to enrich the location." + "\n" + event.fault.faultString, "GeoEnrichment Service error");
                currentState = 'normal';
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <geoEnrichmentClasses:GeometryStudyArea id="studyArea"
                                                geometry="{inputGeometry}"
                                                returnGeometry="true">
            <geoEnrichmentClasses:options>
                <!--
                    // We use an "IntersectingGeographies" as options.
                    // The service will enrich the intersecting US Admin3 geography level (US.Counties).
                    // Because returnGeometry is set to true, the result graphic will have the county geometry.
                -->
                <geoEnrichmentClasses:IntersectingGeographies>
                    <geoEnrichmentClasses:levels>
                        <geoEnrichmentClasses:GeographyLevel layerId="Admin3" countryId="US"/>
                    </geoEnrichmentClasses:levels>
                </geoEnrichmentClasses:IntersectingGeographies>
            </geoEnrichmentClasses:options>
            <geoEnrichmentClasses:comparisonGeographyLevels>
                <!--
                    //  Each country has its own standard geography levels
                    //  The Admin levels are aliases that correspond to various levels of
                    //  geography for each individual country
                    //
                    //  US: Admin2 (US.States), Admin1 (US.WholeUSA)
                -->
                <geoEnrichmentClasses:GeographyLevel layerId="Admin2"/>
                <geoEnrichmentClasses:GeographyLevel layerId="Admin1"/>
            </geoEnrichmentClasses:comparisonGeographyLevels>
        </geoEnrichmentClasses:GeometryStudyArea>

        <!--
            // We don't request the geometry back for the infographic 2 and 3 to optimize the request time
        -->
        <geoEnrichmentClasses:GeometryStudyArea id="studyAreaNoGeometry"
                                                geometry="{inputGeometry}"
                                                returnGeometry="false">
            <geoEnrichmentClasses:options>
                <geoEnrichmentClasses:IntersectingGeographies>
                    <geoEnrichmentClasses:levels>
                        <geoEnrichmentClasses:GeographyLevel layerId="Admin3" countryId="US"/>
                    </geoEnrichmentClasses:levels>
                </geoEnrichmentClasses:IntersectingGeographies>
            </geoEnrichmentClasses:options>
            <geoEnrichmentClasses:comparisonGeographyLevels>
                <geoEnrichmentClasses:GeographyLevel layerId="Admin2"/>
                <geoEnrichmentClasses:GeographyLevel layerId="Admin1"/>
            </geoEnrichmentClasses:comparisonGeographyLevels>
        </geoEnrichmentClasses:GeometryStudyArea>

        <esri:CompositeSymbol id="clickLocationCompositeSymbol">
            <esri:SimpleMarkerSymbol alpha="0.5"
                                     color="0xCCCCCC"
                                     size="35"
                                     style="circle">
                <esri:outline>
                    <esri:SimpleLineSymbol width="2" color="0x8A8A8A"/>
                </esri:outline>
            </esri:SimpleMarkerSymbol>
            <esri:SimpleMarkerSymbol alpha="0.5"
                                     color="0x999999"
                                     size="20"
                                     style="circle">
                <esri:outline>
                    <esri:SimpleLineSymbol width="2" color="0x7F7F7F"/>
                </esri:outline>
            </esri:SimpleMarkerSymbol>
            <esri:SimpleMarkerSymbol angle="45"
                                     color="0xE6E6E6"
                                     size="8"
                                     style="cross">
                <esri:SimpleLineSymbol width="2" color="0xE6E6E6"/>
            </esri:SimpleMarkerSymbol>
        </esri:CompositeSymbol>
    </fx:Declarations>

    <s:controlBarContent>
        <s:RichText width="100%">
            This sample demonstrates how to compare multiple infographics outside
            of the InfographicsCarousel. Click on the map to get the GeoEnrichment data of the intersecting US County.
        </s:RichText>
    </s:controlBarContent>

    <esri:Map id="map"
              level="10"
              mapClick="map_clickHandler(event)"
              scaleBarVisible="false">
        <esri:center>
            <esri:WebMercatorMapPoint lon="-118.25" lat="34.05"/>
        </esri:center>

        <!-- The basemap layer, World Topo Map -->
        <esri:ArcGISTiledMapServiceLayer/>

        <!-- Displays the result geometry -->
        <esri:GraphicsLayer id="resultGraphicsLayer" alpha="0.5">
            <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:GraphicsLayer>
    </esri:Map>

    <s:Group bottom="20"
             horizontalCenter="0"
             includeInLayout="false"
             includeInLayout.withInfographic="true"
             visible="false"
             visible.withInfographic="true">
        <s:layout>
            <s:TileLayout clipAndEnableScrolling="false"
                          columnWidth="260"
                          horizontalGap="20"
                          requestedColumnCount="3"
                          requestedRowCount="1"
                          rowHeight="180"
                          verticalGap="20"/>
        </s:layout>

        <!--
            // An Infographic displaying the Tapestry segments
        -->
        <s:BorderContainer dropShadowVisible="true">
            <esri:Infographic id="tapestryInfographic"
                              left="10" right="10" top="10" bottom="10"
                              complete="tapestryInfographic_completeHandler(event)"
                              countryId="US"
                              fault="infographic_faultHandler(event)"
                              outSpatialReference="{map.spatialReference}"
                              proxyURL="https://developers.arcgis.com/sproxy/"
                              studyArea="{studyArea}"
                              type="Tapestry"
                              variableIds="[Tapestry.*]">
            </esri:Infographic>
        </s:BorderContainer>

        <!--
            // An Infographic displaying all the variables of the HouseholdsByIncome data collection.
        -->
        <s:BorderContainer dropShadowVisible="true">
            <esri:Infographic id="relatedVariablesInfographic"
                              left="10" right="10" top="10" bottom="10"
                              countryId="US"
                              fault="infographic_faultHandler(event)"
                              outSpatialReference="{map.spatialReference}"
                              proxyURL="https://developers.arcgis.com/sproxy/"
                              studyArea="{studyAreaNoGeometry}"
                              type="RelatedVariables"
                              variableIds="[HouseholdsByIncome.*]">
            </esri:Infographic>
        </s:BorderContainer>

        <!--
            // An Infographic displaying the Average Household Size.
        -->
        <s:BorderContainer dropShadowVisible="true">
            <esri:Infographic id="oneVarInfographic"
                              left="10" right="10" top="10" bottom="10"
                              countryId="US"
                              fault="infographic_faultHandler(event)"
                              outSpatialReference="{map.spatialReference}"
                              proxyURL="https://developers.arcgis.com/sproxy/"
                              studyArea="{studyAreaNoGeometry}"
                              type="OneVar"
                              variableIds="[KeyUSFacts.AVGHHSZ_CY]">
            </esri:Infographic>
        </s:BorderContainer>
    </s:Group>

</s:Application>