Extending tiled layers in the ArcGIS API for Flex

The ArcGIS API for Flex supports access to layer types not included with the API. Depending on what you are trying to connect to (or do), you might want to extend TiledMapServiceLayer, DynamicMapServiceLayer or Layer.

• Extend DynamicMapServiceLayer if you want to connect to a service that returns one complete image, usually created on the fly (for example, WMS).
• Extend TiledMapServiceLayer if you want to connect to some system of (usually pre-created and cached) tiles (for example, an ArcGIS Server virtual cache directory). This is especially useful if you want to access 9.2 services, since 9.2 doesn't have REST support and thus isn't supported using the out-of-the-box ArcGIS API for Flex.

Today I will show how to create an example application that extends TiledMapServiceLayer to access tiles created in either ArcGIS 9.2 or 9.3 and which have been made available on the Web server (usually /arcgiscache/).

Extending TiledMapServiceLayer follows the same inheritance as the out-of-the-box ArcGISTiledMapServiceLayer.

In Flex API: ArcGISTiledMapServiceLayer -> TiledMapServiceLayer -> Layer -> mx.core.UIComponent

This sample: PortlandTiledMapServiceLayer -> TiledMapServiceLayer -> Layer -> mx.core.UIComponent

For simplicity, in this sample, we will hard-code configuration settings such as extents and spatial reference. This is a little different from the out-of-the-box ArcGIS layers which retrieve these settings from the REST Services Directory.

Tutorial

This tutorial shows how to extend tiled layers in the ArcGIS API for Flex to support tiles available outside the REST endpoint. The live application and its source code are also available.

Follow these three steps in Flex Builder:

1. Create new ActionScript class to extend the TiledMapServiceLayer class
   • Add a new ActionScript class
   • Set the package to "com.esri.ags.samples"
   • Set the name to "PortlandTiledMapServiceLayer"
   • Set the superclass to "com.esri.ags.layers.TiledMapServiceLayer"
   • Click Finish
   This will create PortlandTiledMapServiceLayer.as in com/esri/ags/samples/.
2. Edit the new PortlandTiledMapServiceLayer class
   • Override the required TiledMapServiceLayer functions, fullExtent() and tileInfo() and have them return the specified values, for example:

     override public function get fullExtent():Extent
         {
             return new Extent(-123.596895130725,
                               44.297575737946,
                               -121.553757125519,
                               46.3683237161949,
                               new SpatialReference(4326));
         }

   • Override the TiledMapServiceLayer getTileURL() function to give us the appropriate tiles and have the map place them in the right place.

     private var _baseURL:String = "http://sampleserver1.arcgisonline.com/arcgiscache/Portland_Portland_ESRI_LandBase_AGO/Portland/_alllayers";
     override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest
     {
         var url:String = _baseURL
             + "/L" + padString(String(level), 2, "0")
             + "/R" + padString(row.toString(16), 8, "0")
             + "/C" + padString(col.toString(16), 8, "0") + ".jpg";
         return new URLRequest(url);
     }

   • Inside the public function PortlandTiledMapServiceLayer(), add

     buildTileInfo(); // to create our hardcoded tileInfo
     setLoaded(true); // Map will only use loaded layers

   • Optionally, as a best practice, similarly override the following properties from the Layer class: initialExtent, spatialReference and units. This is needed if this is the first layer added to the map and the map property hasn't been set yet. For example:

     override public function get initialExtent():Extent
         {
             return new Extent(-122.539, 45.500, -122.540, 45.501, new SpatialReference(4326));
         }

3. Use it with either MXML or ActionScript.

   <esri:Map id="myMap">
        <samples:PortlandTiledMapServiceLayer  id="virtualTiles" fadeInFrameCount="15"/>
   </esri:Map>

   or actionscript

   var myMap:Map = new Map;
   this.addChild(myMap);
   var myLayer:PortlandTiledMapServiceLayer = new PortlandTiledMapServiceLayer();
   myMap.addLayer(myLayer);

Note: If the web server hosting the tile images doesn't have a crossdomain file your application will still work, but while developing you will see a warning ("Warning: Failed to load policy file"), as well as security sandbox violations for each tile.

Resources

• Application source code
• Live application
• Using ActionScript - Adobe Flex 3 Help.
• Part 1 and part 2 about deconstructing the map cache tiling scheme.
• TiledMapServiceLayer in the API Reference.

This shows how easy it is to extend a layer to add support for additional types of layers within the ArcGIS API for Flex.

Contributed by Bjorn Svensson of the ArcGIS API for Flex team.