Skip To Content

Time rendered 5K run (gpx)

<?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:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:samples="com.esri.ags.samples.*"
               pageTitle="Using FeatureCollection and FeatureLayer">
    <!--
    Description:
    This sample demonstrates how to use a FeatureCollection to populate time-aware
    data that is not setup with ArcGIS.  Instead this sample sets up the
    FeatureLayer with a time-aware FeatureCollection using a GPX feed.
    Use the time slider below to view the feed in its entirety.

    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/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#featureCollection
    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/renderers/TemporalRenderer.html#trackRenderer
    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/SizeRange.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/renderers/supportClasses/TimeRampAger.html#sizeRange
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/supportClasses/FeatureCollection.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/supportClasses/LayerDetails.html
    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

    This sample also uses the following files:
    com/esri/ags/samples/GPXFeed.as
    -->

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

            import mx.events.FlexEvent;

            protected function fLyr_initializeHandler(event:FlexEvent):void
            {
                // init feature layer with an empty FeatureCollection and make time aware
                var timeInfo:TimeInfo = new TimeInfo();
                timeInfo.startTimeField = "time";
                var layerDetails:LayerDetails = new LayerDetails();
                layerDetails.timeInfo = timeInfo;
                fLyr.featureCollection = new FeatureCollection(null, layerDetails);
            }

            protected function fLyr_loadHandler(event:LayerEvent):void
            {
                gpxFeed.fetch();
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <samples:GPXFeed id="gpxFeed"
                         featureLayer="{fLyr}"
                         map="{map}"
                         timeSlider="{timeSlider}"
                         url="assets/activity_9067441.gpx"/>
    </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 use a FeatureCollection to populate time-aware
            data that is not setup with ArcGIS.  Instead this sample sets up the
            FeatureLayer with a time-aware FeatureCollection using a GPX feed.
            Use the time slider below to view the feed in its entirety.
        </s:RichText>
        <esri:TimeSlider id="timeSlider"/>
    </s:controlBarContent>

    <esri:Map id="map" timeSlider="{timeSlider}">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:FeatureLayer id="fLyr"
                           initialize="fLyr_initializeHandler(event)"
                           load="fLyr_loadHandler(event)">
            <esri:renderer>
                <esri:TemporalRenderer>
                    <esri:trackRenderer>
                        <esri:SimpleRenderer>
                            <esri:SimpleLineSymbol/>
                        </esri:SimpleRenderer>
                    </esri:trackRenderer>
                    <esri:latestObservationRenderer>
                        <esri:SimpleRenderer>
                            <esri:PictureMarkerSymbol width="32" height="32"
                                                      source="@Embed('assets/runner.png')"/>
                        </esri:SimpleRenderer>
                    </esri:latestObservationRenderer>
                    <esri:observationRenderer>
                        <esri:SimpleRenderer>
                            <esri:SimpleMarkerSymbol color="0xFF0000">
                                <esri:SimpleLineSymbol/>
                            </esri:SimpleMarkerSymbol>
                        </esri:SimpleRenderer>
                    </esri:observationRenderer>
                    <esri:observationAger>
                        <esri:TimeRampAger>
                            <esri:alphaRange>
                                <esri:AlphaRange fromAlpha="0.25" toAlpha="1.0"/>
                            </esri:alphaRange>
                            <esri:sizeRange>
                                <esri:SizeRange fromSize="5" toSize="15"/>
                            </esri:sizeRange>
                        </esri:TimeRampAger>
                    </esri:observationAger>
                </esri:TemporalRenderer>
            </esri:renderer>
        </esri:FeatureLayer>
    </esri:Map>

</s:Application>