Time rendered earthquakes

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:s="library://ns.adobe.com/flex/spark"
               pageTitle="Time rendered earthquakes">
    <!--
    Description:
    This sample demonstrates how to display time aware data using
    the TimeSlider and FeatureLayer.  The earthquakes service used in
    this example is time-aware, the FeatureLayer is used to display the
    earthquake points client-side using a TemporalRenderer, and the
    TimeSlider provides the user interface for manipulating the service
    TimeExtent.

    Note:
    Starting at ArcGIS version 10 time-aware layers have built-in support.

    On the server you can specify a certain field as a special Time field.
    This time field can be used to set time extent and only ask for data
    covering certain times.

    Using a FeatureLayer we get full time extent metadata from the server.

    We're also setting an initial time extent and requesting that data on
    startup (when map loads).  When a user change the chosen time extent
    to display, a new query is sent for the new time range.

    To display the data with symbol markers of different size, a ClassBreaksRenderer
    is used to pick symbol by looking at the "Magnitude" attribute value.

    Additionally, a Temporal Renderer is applied to show Aging.

    Documentation:
    For more information, see the API documentation.
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/TimeSlider.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/TimeSlider.html#createTimeStopsByTimeInterval()
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/events/LayerEvent.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/FeatureLayer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/FeatureLayer.html#mode
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/FeatureLayer.html#MODE_SNAPSHOT
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/GraphicsLayer.html#renderer
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/Layer.html#event:load
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/supportClasses/TimeInfo.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/ClassBreaksRenderer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/supportClasses/ClassBreakInfo.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/TemporalRenderer.html#latestObservationRenderer
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/TemporalRenderer.html#observationRenderer
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/TemporalRenderer.html#observationAger
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/supportClasses/AlphaRange.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/supportClasses/TimeRampAger.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/supportClasses/TimeRampAger.html#alphaRange
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/supportClasses/TimeInfo.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/TemporalRenderer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/symbols/SimpleMarkerSymbol.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/symbols/PictureMarkerSymbol.html

    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/globalization/DateTimeFormatter.html#setDateTimePattern()

    ArcGIS REST API documentation:
    http://resources.arcgis.com/en/help/rest/apiref/mapserver.html

    ArcGIS for Server documentation:
    http://resources.arcgis.com/en/help/main/10.1/index.html#/Serving_time_aware_layers/00sq00000090000000/

    ArcGIS for Desktop documentation:
    http://resources.arcgis.com/en/help/main/10.1/index.html#/About_enabling_time_on_data/005z0000000p000000/
    -->

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";

        mx|ToolTip
        {
            font-size: 14;
            backgroundColor: #EEEEEE;
        }
    </fx:Style>


    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.LayerEvent;
            import com.esri.ags.layers.supportClasses.TimeInfo;

            protected function fLayer_loadHandler(event:LayerEvent):void
            {
                var timeInfo:TimeInfo = fLayer.layerDetails.timeInfo;
                myTimeSlider.createTimeStopsByTimeInterval(timeInfo.timeExtent, timeInfo.timeInterval, timeInfo.timeIntervalUnits);
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:DateTimeFormatter id="myDateFormatter" dateTimePattern="MMMM yyyy"/>
    </fx:Declarations>

    <s:controlBarLayout>
        <s:VerticalLayout gap="10"
                          paddingBottom="7"
                          paddingLeft="10"
                          paddingRight="10"
                          paddingTop="7"/>
    </s:controlBarLayout>
    <s:controlBarContent>
        <s:RichText width="100%">
            This sample demonstrates how to display time aware data using
            the TimeSlider and FeatureLayer.  The earthquakes service used in
            this example is time-aware, the FeatureLayer is used to display the
            earthquake points client-side using a TemporalRenderer, and the
            TimeSlider provides the user interface for manipulating the service
            TimeExtent.
        </s:RichText>
        <esri:TimeSlider id="myTimeSlider"
                         bottom="20"
                         enabled="{fLayer.loaded}"
                         horizontalCenter="0"
                         loop="true"
                         visible="{fLayer.loaded}"/>
    </s:controlBarContent>

    <esri:Map timeSlider="{myTimeSlider}">
        <esri:lods>
            <esri:LOD resolution="39135.7584820001" scale="147914381.897889"/>
            <esri:LOD resolution="19567.8792409999" scale="73957190.948944"/>
            <esri:LOD resolution="9783.93962049996" scale="36978595.474472"/>
            <esri:LOD resolution="4891.96981024998" scale="18489297.737236"/>
            <esri:LOD resolution="2445.98490512499" scale="9244648.868618"/>
            <esri:LOD resolution="1222.99245256249" scale="4622324.434309"/>
            <esri:LOD resolution="611.49622628138" scale="2311162.217155"/>
        </esri:lods>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:FeatureLayer id="fLayer"
                           load="fLayer_loadHandler(event)"
                           mode="snapshot"
                           outFields="[Magnitude]"
                           url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0">
            <esri:renderer>
                <esri:TemporalRenderer>
                    <esri:latestObservationRenderer>
                        <esri:SimpleRenderer>
                            <esri:PictureMarkerSymbol width="60" height="60"
                                                      source="assets/Red_glow.swf"
                                                      xoffset="-17"
                                                      yoffset="18"/>
                        </esri:SimpleRenderer>
                    </esri:latestObservationRenderer>
                    <esri:observationRenderer>
                        <esri:ClassBreaksRenderer field="Magnitude">
                            <esri:ClassBreakInfo maxValue="5">
                                <esri:SimpleMarkerSymbol color="0xFF0000"
                                                         size="8"
                                                         style="triangle"/>
                            </esri:ClassBreakInfo>
                            <esri:ClassBreakInfo maxValue="7" minValue="5">
                                <esri:SimpleMarkerSymbol color="0xFF0000"
                                                         size="12"
                                                         style="triangle"/>
                            </esri:ClassBreakInfo>
                            <esri:ClassBreakInfo minValue="7">
                                <esri:SimpleMarkerSymbol color="0xFF0000"
                                                         size="25"
                                                         style="triangle"/>
                            </esri:ClassBreakInfo>
                        </esri:ClassBreaksRenderer>
                    </esri:observationRenderer>
                    <esri:observationAger>
                        <esri:TimeRampAger>
                            <esri:alphaRange>
                                <esri:AlphaRange fromAlpha="0.05" toAlpha="1.0"/>
                            </esri:alphaRange>
                        </esri:TimeRampAger>
                    </esri:observationAger>
                </esri:TemporalRenderer>
            </esri:renderer>
        </esri:FeatureLayer>
    </esri:Map>

</s:Application>