Time aware Image Service without the Service?

[stevemclaughlin]

Hi,
I'd like to create a time-aware image service like the sample:
http://resources.arcgis.com/en/help/flex-api/samples/#/Time_aware_Image_service/01nq0000004p000000/
but without a service.
For example, I have 5 png files, I can add them to my map as MapImageLayers, - can I add a time to each of these and
animate thru them using a time slider?  without going to a server?  doing it all on client side?
Thanks a bunch!

[YannCabon · Accepted solution]

Hi Steve,

You can do that by extending the API.
If you want to use the MapImageLayer, extend that class.

Then you can listen to time extent change in your layer and update the displayed image.

In the example below I just update the rotation value of the MapImages, but could actually add or remove them from the mapImageProvider.

public class TimeMapImageLayer extends MapImageLayer {      override protected function addMapListeners():void     {         super.addMapListeners();          if (map)         {             map.addEventListener(TimeExtentEvent.TIME_EXTENT_CHANGE, timeExtentChangeHandler);         }     }      override protected function removeMapListeners():void     {         super.removeMapListeners();          if (map)         {             map.addEventListener(TimeExtentEvent.TIME_EXTENT_CHANGE, timeExtentChangeHandler);         }     }      protected function timeExtentChangeHandler(event:TimeExtentEvent):void     {         // Do stuff on your images...          var mapImages:ArrayCollection = mapImageProvider as ArrayCollection;         var mapImage:MapImage;          for each (mapImage in mapImages)         {             if (isNaN(mapImage.rotation))             {                 mapImage.rotation = 0;             }             mapImage.rotation += 30;         }           invalidateLayer();     }  }

In your map timeSlider you now have to specify the timeStops you want.

    <esri:Map id="map" timeSlider="{timeSlider}">                  <esri:ArcGISTiledMapServiceLayer />                  <local:TimeMapImageLayer>             <esri:MapImage id="image2010" source="2013.jpg">                 <esri:extent>                     <esri:WebMercatorExtent minlat="-70" minlon="-100" maxlat="0" maxlon="90" />                 </esri:extent>             </esri:MapImage>         </local:TimeMapImageLayer>              </esri:Map>      <esri:TimeSlider id="timeSlider" horizontalCenter="0" bottom="10">         <esri:timeStops>             <fx:Date fullYear="2010"/>             <fx:Date fullYear="2011"/>             <fx:Date fullYear="2012"/>             <fx:Date fullYear="2013"/>         </esri:timeStops>     </esri:TimeSlider>

Notice that if you want to access to some Date in the MapImage you can to override the MapImage class too.

[stevemclaughlin]

Awesome!!! thanks,
but I assume you want 'map.removeEventListener' instead of 'map.addEventListener' in the function :

override protected function removeMapListeners():void
    {
        super.removeMapListeners();

        if (map)
        {
            map.addEventListener(

[YannCabon]

Yes, bad copy paste 🙂