How do I get a reference to the timeslider of a map?

596
2
Jump to solution
05-20-2013 06:10 PM
stevemclaughlin
New Contributor III
How do I set the timestops of a timeSlider?
If I only have a reference to the map, how do I set the timestops of the associated timeslider?
EX: From the map, how do I get the timeslider?   Map.timeSlider returns a ITimeslider, not TimeSlider.
I need the TimeSlider so I can set the timestops on the TimeSlider.
thanks,
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
IvanBespalov
Occasional Contributor III
Steve,
it's ESRI developer team sample upgraded to show you the way to get a TimeSlider reference

<?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="Earthquakes 1970-2009">
 
 <!--
 esri dev. team sample http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000001m000000.htm
 -->
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center"
        paddingBottom="10"
        paddingTop="10"/>
 </s:layout>
 
 <fx:Style>
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  @namespace s "library://ns.adobe.com/flex/spark";
  
  /* for the slider tooltip that shows the date as you move the slider */
  mx|ToolTip {
   font-size: 14;
  }
 </fx:Style>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.events.LayerEvent;
   import com.esri.ags.layers.supportClasses.TimeInfo;
   
   import mx.controls.Alert;
   import mx.core.IVisualElement;
   import mx.utils.StringUtil;
   
   import spark.globalization.supportClasses.GlobalizationBase;
   
   protected function fLayer_loadHandler(event:LayerEvent):void
   {
    var timeInfo:TimeInfo = fLayer.layerDetails.timeInfo;
    myTimeSlider.createTimeStopsByTimeInterval(timeInfo.timeExtent, timeInfo.timeInterval, timeInfo.timeIntervalUnits);
    myTimeSlider.play(); // start playing automatically
   }
   
   protected function onGetInfo1(event:MouseEvent):void
   {
    var ts:TimeSlider = esriMap.timeSlider as TimeSlider;
    if (ts != null)
    {
     var message:String = StringUtil.substitute("Id: {0}\nVisible: {1}\nNumber of stops: {2}\n...", 
      ts.id, ts.enabled, ts.timeStops.length);
     Alert.show(message, "TimeSlider info from map");
    }
   }
   
   protected function onGetInfo2(event:MouseEvent):void
   {
    var message:String = StringUtil.substitute("Is playing now: {0}\nVisible: {1}\nNumber of stops: {2}\n...", 
     myTimeSlider.playing, myTimeSlider.enabled, myTimeSlider.timeStops.length);
    Alert.show(message, "Direct TimeSlider info");
   }
   
   protected function onGetInfo3(event:MouseEvent):void
   {
    var ts:TimeSlider;
    for (var i:int; i < numElements-1; i++)
    {
     try
     {
      var element:IVisualElement = this.getElementAt(i)
      if (element is TimeSlider)
      {
       ts = element as TimeSlider;
       break;
      }
     }
     catch (error:Error)
     {
      trace(error.getStackTrace());
     }
    }
    if (ts != null)
    {
     var message:String = StringUtil.substitute("Is playing now: {0}\nVisible: {1}\nNumber of stops: {2}\nId: {3}\n...", 
      ts.playing, myTimeSlider.enabled, myTimeSlider.timeStops.length, ts.id);
     Alert.show(message, "TimeSlider info from application");
    }
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/globalization/DateTimeFormatter.html#setDateTimePattern() -->
  <s:DateTimeFormatter id="myDateFormatter" dateTimePattern="MMMM yyyy"/>
 </fx:Declarations>
 
 <s:Label fontSize="20" text="Major Earthquakes 1970-2009"/>
 <s:Label fontSize="13"
    text="In total {fLayer.numGraphics} earthquakes."
    visible="{fLayer.numGraphics > 0}"/>
 
 <s:Button label="Get information about time slider from map" 
     click="onGetInfo1(event)"/>
 
 <s:Button label="Get information about time slider from application" 
     click="onGetInfo3(event)"/>
 
 <s:Button label="Get information about time slider directly" 
     click="onGetInfo2(event)"/>
 
 <esri:Map id="esriMap" 
     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:ClassBreaksRenderer field="Magnitude">
     <esri:ClassBreakInfo maxValue="5">
      <esri:symbol>
       <esri:SimpleMarkerSymbol alpha="0.8"
              color="0xFF0000"
              size="8"
              style="triangle">
        <esri:SimpleLineSymbol color="0xAA0000"/>
       </esri:SimpleMarkerSymbol>
      </esri:symbol>
     </esri:ClassBreakInfo>
     <esri:ClassBreakInfo maxValue="7" minValue="5">
      <esri:symbol>
       <esri:SimpleMarkerSymbol alpha="0.8"
              color="0xFF0000"
              size="12"
              style="triangle">
        <esri:SimpleLineSymbol color="0xAA0000"/>
       </esri:SimpleMarkerSymbol>
      </esri:symbol>
     </esri:ClassBreakInfo>
     <esri:ClassBreakInfo minValue="7">
      <esri:symbol>
       <esri:SimpleMarkerSymbol alpha="0.8"
              color="0xFF0000"
              size="25"
              style="triangle">
        <esri:SimpleLineSymbol color="0xAA0000"/>
       </esri:SimpleMarkerSymbol>
      </esri:symbol>
     </esri:ClassBreakInfo>
    </esri:ClassBreaksRenderer>
   </esri:renderer>
  </esri:FeatureLayer>
 </esri:Map>
 
 <esri:TimeSlider id="myTimeSlider" enabled="{fLayer.loaded}"/>
 <s:Label fontSize="14"
    fontWeight="bold"
    text="{myDateFormatter.format(myTimeSlider.timeExtent.endTime)}"/>
 <s:Label width="100%" text="This map has one time-aware layer: a feature layer showing earthquakes, which on the client are rendered as triangles of different sizes based on the 'magnitude' of the feature."/>
</s:Application>

View solution in original post

0 Kudos
2 Replies
IvanBespalov
Occasional Contributor III
Steve,
it's ESRI developer team sample upgraded to show you the way to get a TimeSlider reference

<?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="Earthquakes 1970-2009">
 
 <!--
 esri dev. team sample http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000001m000000.htm
 -->
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center"
        paddingBottom="10"
        paddingTop="10"/>
 </s:layout>
 
 <fx:Style>
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  @namespace s "library://ns.adobe.com/flex/spark";
  
  /* for the slider tooltip that shows the date as you move the slider */
  mx|ToolTip {
   font-size: 14;
  }
 </fx:Style>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.events.LayerEvent;
   import com.esri.ags.layers.supportClasses.TimeInfo;
   
   import mx.controls.Alert;
   import mx.core.IVisualElement;
   import mx.utils.StringUtil;
   
   import spark.globalization.supportClasses.GlobalizationBase;
   
   protected function fLayer_loadHandler(event:LayerEvent):void
   {
    var timeInfo:TimeInfo = fLayer.layerDetails.timeInfo;
    myTimeSlider.createTimeStopsByTimeInterval(timeInfo.timeExtent, timeInfo.timeInterval, timeInfo.timeIntervalUnits);
    myTimeSlider.play(); // start playing automatically
   }
   
   protected function onGetInfo1(event:MouseEvent):void
   {
    var ts:TimeSlider = esriMap.timeSlider as TimeSlider;
    if (ts != null)
    {
     var message:String = StringUtil.substitute("Id: {0}\nVisible: {1}\nNumber of stops: {2}\n...", 
      ts.id, ts.enabled, ts.timeStops.length);
     Alert.show(message, "TimeSlider info from map");
    }
   }
   
   protected function onGetInfo2(event:MouseEvent):void
   {
    var message:String = StringUtil.substitute("Is playing now: {0}\nVisible: {1}\nNumber of stops: {2}\n...", 
     myTimeSlider.playing, myTimeSlider.enabled, myTimeSlider.timeStops.length);
    Alert.show(message, "Direct TimeSlider info");
   }
   
   protected function onGetInfo3(event:MouseEvent):void
   {
    var ts:TimeSlider;
    for (var i:int; i < numElements-1; i++)
    {
     try
     {
      var element:IVisualElement = this.getElementAt(i)
      if (element is TimeSlider)
      {
       ts = element as TimeSlider;
       break;
      }
     }
     catch (error:Error)
     {
      trace(error.getStackTrace());
     }
    }
    if (ts != null)
    {
     var message:String = StringUtil.substitute("Is playing now: {0}\nVisible: {1}\nNumber of stops: {2}\nId: {3}\n...", 
      ts.playing, myTimeSlider.enabled, myTimeSlider.timeStops.length, ts.id);
     Alert.show(message, "TimeSlider info from application");
    }
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/globalization/DateTimeFormatter.html#setDateTimePattern() -->
  <s:DateTimeFormatter id="myDateFormatter" dateTimePattern="MMMM yyyy"/>
 </fx:Declarations>
 
 <s:Label fontSize="20" text="Major Earthquakes 1970-2009"/>
 <s:Label fontSize="13"
    text="In total {fLayer.numGraphics} earthquakes."
    visible="{fLayer.numGraphics > 0}"/>
 
 <s:Button label="Get information about time slider from map" 
     click="onGetInfo1(event)"/>
 
 <s:Button label="Get information about time slider from application" 
     click="onGetInfo3(event)"/>
 
 <s:Button label="Get information about time slider directly" 
     click="onGetInfo2(event)"/>
 
 <esri:Map id="esriMap" 
     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:ClassBreaksRenderer field="Magnitude">
     <esri:ClassBreakInfo maxValue="5">
      <esri:symbol>
       <esri:SimpleMarkerSymbol alpha="0.8"
              color="0xFF0000"
              size="8"
              style="triangle">
        <esri:SimpleLineSymbol color="0xAA0000"/>
       </esri:SimpleMarkerSymbol>
      </esri:symbol>
     </esri:ClassBreakInfo>
     <esri:ClassBreakInfo maxValue="7" minValue="5">
      <esri:symbol>
       <esri:SimpleMarkerSymbol alpha="0.8"
              color="0xFF0000"
              size="12"
              style="triangle">
        <esri:SimpleLineSymbol color="0xAA0000"/>
       </esri:SimpleMarkerSymbol>
      </esri:symbol>
     </esri:ClassBreakInfo>
     <esri:ClassBreakInfo minValue="7">
      <esri:symbol>
       <esri:SimpleMarkerSymbol alpha="0.8"
              color="0xFF0000"
              size="25"
              style="triangle">
        <esri:SimpleLineSymbol color="0xAA0000"/>
       </esri:SimpleMarkerSymbol>
      </esri:symbol>
     </esri:ClassBreakInfo>
    </esri:ClassBreaksRenderer>
   </esri:renderer>
  </esri:FeatureLayer>
 </esri:Map>
 
 <esri:TimeSlider id="myTimeSlider" enabled="{fLayer.loaded}"/>
 <s:Label fontSize="14"
    fontWeight="bold"
    text="{myDateFormatter.format(myTimeSlider.timeExtent.endTime)}"/>
 <s:Label width="100%" text="This map has one time-aware layer: a feature layer showing earthquakes, which on the client are rendered as triangles of different sizes based on the 'magnitude' of the feature."/>
</s:Application>
0 Kudos
stevemclaughlin
New Contributor III
Great, thanks!   just what I need
0 Kudos