Overview
This is the third post in a series where I discuss techniques for interacting with the ArcGIS Server REST API from within a Flex 3 application built with the Google Maps API for Flash. The first and second posts presented and refined an example that demonstrated how to stream features from ArcGIS Server and overlay them on top of Google Maps data. This post demonstrates how to display an ArcGIS Server cached tile layer as a custom map type with the Google Maps API for Flash.
Sample Application Concepts
The sample application works as follows:
- The Google Maps API for Flash is embedded in a Flex 3 application.
- A cached tile layer representing Land Base features for Portland, Oregon is served via an ArcGIS Server Map Service, accessible via ArcGIS Server’s REST API.
- The cached tile layer appears as a custom map type in the Google Maps API for Flash User Interface.
- The cached tile layer is displayed at zoom levels 0 - 19.
Here are a couple of screen shots of the sample application. The first shows the application with the custom “Land Base” map type selected. The second shows the application with the normal map type selected.
Live example is here, and source code is here. [more]
Discussion
MXML File
Starting with a basic Flex Application, we have a single map with a specified “map ready” event:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:gm="com.google.maps.*"
backgroundGradientColors="[0xFFFFFF, 0xAAAAAA]"
height="100%" width="100%" viewSourceURL="srcview/index.html">
<gm:Map id="map"
width="100%"
height="100%"
key="(Your API Key)"
mapevent_mapready="map_mapReady(event)" />
<mx:Script>
// Omitted for clarity
</mx:Script>
</mx:Application>
In the map_mapReady function we create an instance of the custom tile layer, specifying the URL endpoint of the cached tiles, the minimum and maximum zoom levels, and the copyright text. Then we create a new map type using the custom tile layer instance. Next we add the usual map controls, and finally we initialize the map using the new map type.
private function map_mapReady(event:Event):void {
// Create custom tile layer
var baseUrl:String = http://sampleserver1.arcgisonline.com/ +
"ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer";
var copyright:String = "Taxlots, Zoning © Oregon METRO RLIS; " +
"Buildings © City of Portland Planning";
var tileLayer:TileLayer = new TileLayer(baseUrl, 0, 19, copyright);
// Create custom map type and add to map
var mapType:IMapType = new MapType([tileLayer], map.MERCATOR_PROJECTION, "Land Base");
map.addMapType(mapType);
// Add map controls
var mtc:MapTypeControl = new MapTypeControl();
map.addControl(mtc);
var pc:PositionControl = new PositionControl();
map.addControl(pc);
var zc:ZoomControl = new ZoomControl();
map.addControl(zc);
var sc:ScaleControl = new ScaleControl();
map.addControl(sc);
var omc:OverviewMapControl = new OverviewMapControl();
map.addControl(omc);
// Initialize map. Use custom tile layer for the initial map type
map.setCenter(new LatLng(45.520211, -122.65553), 17, mapType);
}
The custom tile layer is implemented with the reusable TileLayer class and its companion Tile utility class. The basic design for these classes comes from Pamela Fox’s custom tile layer sample in the Google Maps API for Flash Demo Gallery.
The TileLayer constructor takes four arguments: the URL endpoint of the cached tiles, the minimum zoom level, the maximum zoom level, and the copyright text. Our example uses an ESRI sample server that has a Land Base cached tile service for Portland, Oregon.
We determine the appropriate values for the constructor’s arguments by exploring the MapServer REST API using the interactive SDK . The MapServer is hosted at: http://sampleserver1.arcgisonline.com/arcgis/rest/services
By drilling down into the Portland Folder and the associated MapServices, we learn about the functionality and data layers that are available for consumption. If we drill down to the Portland/ESRI_LandBase_WebMercator MapServer, we can gather the information we need to fill in the above mentioned TileLayer constructor.
First, we need to check to make sure that the MapServer is cached. Look at the Single Fused Map Cache property and make sure it is set to true. Next, verify that the MapServer uses the Google Maps (and Virtual Earth) tiling scheme by making sure the Spatial Reference is set to 102113 (Web Mercator), the Width and Height are 256 pixels, and the DPI is 96.
If you are designing your own map cache to overlay on top of Google Maps, be sure to read the following information in the ESRI online documentation (depending on your platform):
To determine the base URL constructor argument, look at the URL in the browser’s address bar. The URL should end with “MapServer”.
To determine the minimum and maximum zoom levels, scroll down and look at the Tile Info - Levels of Detail section. The first Level ID in the list is the minimum zoom level (in this case 0) and the last Level ID is the maximum zoom level (in this case 19).
Finally, the copyright parameter can be anything you deem appropriate. In this case, I abbreviated the information found in the Copyright Text property of the MapServer.
TileLayer Class Implementation
Moving on to the TileLayer class implementation, here is the code:
// Custom tile layer for displaying ArcGIS Server cached tiles
// in a Google Maps API for Flash application.
public class TileLayer extends TileLayerBase
{
private var baseUrl:String;
private var minResolution:Number;
private var maxResolution:Number;
// Constructor
public function TileLayer(baseUrl:String, minResolution:Number,
maxResolution:Number, copyright:String) {
// Save the options
this.baseUrl = baseUrl;
this.minResolution = minResolution;
this.maxResolution = maxResolution;
// Add copyright information.
var copyrightCollection:CopyrightCollection = new CopyrightCollection();
copyrightCollection.addCopyright(new Copyright("TileLayer",
new LatLngBounds(new LatLng(-180, 90), new LatLng(180, -90)),
0, copyright));
super(copyrightCollection);
}
// Return the coarsest zoom level. Provides information necessary
// to adjust the boundaries of the zoom level control when this
// layer is included in a custom map type.
public override function getMinResolution():Number {
return minResolution;
}
// Return the finest zoom level. Provides information necessary to
// adjust the boundaries of the zoom level control when this layer
// is included in a custom map type.
public override function getMaxResolution():Number {
return maxResolution;
}
// Creates and loads a tile (x, y) at the given zoom level.
public override function loadTile(tilePos:Point, zoom:Number):DisplayObject {
return new Tile(baseUrl, tilePos, zoom);
}
}
As you can see, the class is pretty simple. It extends the Google Maps API’s TileLayerBase abstract base class, which does most of the work. According to the Google Maps API for Flash Documentation, sub-classes must override the loadTile() method; however, overriding the other methods is optional. The loadTile() method must return a DisplayObject that represents the tile.
Tile Class Implementation
In the loadTile() method implementation, we defer to the Tile utility class, which is defined as follows:
// Custom tile for displaying ArcGIS Server cached tiles
// in a Google Maps API for Flash application.
public class Tile extends Sprite
{
// Constructor
public function Tile(baseUrl:String, tilePos: Point, zoom:Number)
{
// Construct the url to the ArcGIS Server tile:
// http://<path to map service>/tile/<zoom level>/<y>/<x>
var tileUrl:String = baseUrl + "/tile/" + zoom.toString() + "/" +
tilePos.y.toString() + "/" + tilePos.x.toString();
trace(tileUrl);
// Load the tile and add it to the sprite as a child
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loader.load(new URLRequest(tileUrl));
addChild(loader);
}
// Error handler when a tile cannot be loaded by the loader.
public function ioErrorHandler(event:IOErrorEvent):void {
// If the tile was not found, just load an empty sprite
// so nothing draws.
addChild(new Sprite());
}
}
The Tile class extends Sprite, which in turn inherits from DisplayObject. Therefore, we can return an instance of the Tile class from the loadTile() method in the TileLayer class. The Tile class’s constructor builds a URL to the tile as served by the ArcGIS Server REST API. The URL pattern for accessing tiles through the REST API is: http://<path to map service>/tile/<zoom level>/<y>/<x>
Once the URL string is created, a flash Loader is used in concert with a URLRequest object to load the tile image and add it as a child to the Sprite. If the tile is not found and an error is thrown, we simply add an empty Sprite instead so nothing draws. Alternatively, we could load some kind of "tile not found" graphic, as shown by Pamela Fox’s custom tile layer sample in the Google Maps API for Flash Demo Gallery.
Wrap Up
This post has demonstrated how to display an ArcGIS Server cached tile layer as a custom map type with the Google Maps API for Flash. The TileLayer and Tile classes are reusable. To add an ArcGIS Server cached tile layer to your project, simply copy the classes as-is and modify the code shown in the map_mapReady event to use your cached MapServer.
Live example is here, and source code is here.
Resources
Downloads
Documentation and Sample Servers
Blogs, Forums and Code Galleries
