Los Angeles Spatial / Location Developers Meetup Group

by James Richards April 02, 2010
image Today I created a new Meetup group for Spatial / Location Developers in Los Angeles.

Here is the group description:

The Los Angeles Spatial / Location Developers Group is for software developers working with any spatial or location enabled platforms. The group aims to be platform and vendor neutral.

Some of the technologies we may discuss include ESRI, Google Maps, Bing Maps, the OSGeo stack, Open Street Map, SimpleGeo, and Social Location APIs from Foursquare, Gowalla, Brightkite, Twitter, Facebook (forthcoming), etc.

All levels of developers are welcome, from seasoned GIS professionals to those new to geospatial or mobile location development.

As this is a new group we will be actively looking for creative input on the direction and focus that members want to see.

Meetup groups organize online and then meet face to face for real world interaction. I've been participating in other groups recently and found them to be fun and helpful. I’m hoping this Meetup group will grow into a place for geospatial and location developers to interact and learn from one another.

If you are in the Los Angeles area and are interested in geospatial or location development, please join the group at:

http://www.meetup.com/laspatial/

If you’re not in LA but know someone here who might be interested, please pass the word along. And if you're really inspired, start a spatial / location developers Meetup group in your own city!

Tags: , , , , , , , , , ,

Meetup

Use Open Source FlashDevelop IDE with Google Maps API for Flash

by James Richards September 30, 2009

This thread on the Google Maps API for Flash Group Forum caught my attention yesterday:

The author outlines the steps required to get FlashDevelop up and running with the Google Maps API for Flash. FlashDevelop is a free and open source IDE with code completion for ActionScript, MXML, XML, and HTML.

image

It provides a compelling alternative to FlexBuilder and is worth a look. Please donate to the project if you use it!

I followed the steps outlined in the thread and everything worked as described. Here are a few extra details that might be useful:

Hope this helps!

Tags: , ,

ActionScript | Flex 3 | Google Maps | Planet GS

How To: Display an ArcGIS Server Cached Tile Layer as a Custom Map Type with the Google Maps API for Flash

by James Richards July 06, 2009

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.

image

image

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

image

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.

image

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”.

image

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).

image

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

Tags: , , ,

ArcGIS Server | Flex 3 | Google Maps | How To | Planet GS | REST

Google Maps API for Flash and ArcGIS Server REST API Integration – Part 2

by James Richards June 15, 2009

Overview

This is the second 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. If you haven’t read the first post yet, I encourage you to do so now.

The first post presented a simple example that demonstrated how to stream features from ArcGIS Server and overlay them on top of Google Maps data. In this second post, we will reorganize the code for better reusability and add some geocoding functionality.

image

I’ll keep this post pretty brief and only cover the major points. Feel free to check out the live example and dive into the source code! [more]

Reorganizing the Code

In the previous post all code was presented in-line in a single mxml file. While this helped illustrate the concepts simply and succinctly, the code was not really reusable other than by the old copy/paste method. In this updated example, all of the feature streaming and drawing code has been placed in its own PolygonOverlay class.

This new class has a number of advantages over the old one. Many of the hard coded values, such as minimum and maximum zoom levels, the tool tip field and symbolization options are now encapsulated in the class definition.

The PolygonOverlay class’s constructor takes a number of these options, making it more flexible. For example:

polygonOverlay = new PolygonOverlay(map, // Google Map
    parcelsUrl,         // Root url of layer in ArcGIS Server REST API
    17,                    // Minimum Zoom Level
    21,                   // Maximum Zoom Level
    "RNO",              // Tool tip field
    transparentFill,  // Default fill style
    greyStroke);     // Default line style

In the previous post, all graphics on the map were erased each time the polygons needed to be redrawn. This is a problem if there are other graphics on the map. Now that we have added geocoding functionality to the sample application, we will draw the geocode results as a marker on the map along with an info window. We don't want these graphics to be erased when the user pans or zooms and the parcel polygons are redrawn.

The new PolygonOverlay class handles this by keeping track of all the Google Polygon objects that it draws on the map. When it needs to redraw the polygons, only the previous polygons are removed from the map, while the other graphics are left on the map. Check out the PolygonOverlay.as class for more details.

Adding Geocode Functionality

The new sample application also adds geocoding using the ClientGeocoder class. The findAddress function sets up the client geocoder and dispatches the request:

private function findAddress():void {
    trace("findAddress() - entered");
    var address:String = addressText.text;
    trace("findAddress() - address: " + address);

    // Constrain geocoder to a viewport that is in/around Portland, Oregon
    var sw:LatLng = new LatLng(-122.76728, 45.45137);
    var ne:LatLng = new LatLng(-122.53211, 45.59233);
    var viewport:LatLngBounds = new LatLngBounds(sw, ne);
    var options:ClientGeocoderOptions = new ClientGeocoderOptions();
    options.viewport = viewport;

    // Setup client geocoder and dispatch request
    var geocoder:ClientGeocoder = new ClientGeocoder();
    geocoder.setOptions(options);
    geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_GeocodingSuccess);
    geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_GeocodingFailure);
    geocoder.geocode(address);
}

One interesting thing that’s happening here is that we’re constraining the geocode request to a viewport that is in/around the Portland, Oregon area. Google’s geocoding service will attempt to find the best match in that area.

I don’t know much about Portland (I’ve never been there) but I do know that it’s home to a number of microbreweries as well as the historic Burnside Skate Park. Try entering these addresses and place names:

  • 206 SW Morrison St (Location of the Rock Bottom Brewery)
  • Burnside Skate Park

One of the interesting things about using the Geocoding Service with a viewport is that many place names get resolved to actual locations without having to go through a confirmation step. This won’t work everywhere for every place name, but it helps narrow things down a bit so Google’s Geocoding Service can work its magic.

Wrap Up

That’s all the detail I’ll cover in the post, but be sure to check out the source code for more goodies like how to add the address marker and pop up an info window.

Stay tuned for future posts, where we will continue to add functionality and improve upon the code.

Live example is here, and source code is here.

Resources

Downloads
Documentation and Sample Servers
Blogs and Forums
Other Items of Interest

Tags: , , , ,

ArcGIS Server | Flex 3 | Google Maps | How To | Planet GS

Google Maps API for Flash and ArcGIS Server REST API Integration – Part 1

by James Richards May 12, 2009

Overview

This is the first post in a series where I will discuss techniques for interacting with the ArcGIS Server REST API from within a Flex 3 application built with the Google Maps API for Flash.

With this post, we start with a simple example that demonstrates how to stream features from ArcGIS Server and overlay them on top of Google Maps data. In this case, we will be working with parcel data.

This first example serves to demonstrate the basic concepts as succinctly as possible. In future posts, I will gradually refactor and improve upon the code to create reusable components. [more]

Background

You may be asking yourself “ESRI has a Flex API, why aren’t we using that?” Yes, ESRI does have an excellent Flex API - but it lacks the ability to show Google Maps data or use the Google Geocode API.

This is probably more of a Google licensing issue than anything else. But as of today, if you want to display your own ArcGIS Server content on top of Google Maps data in a Flex/Flash project, you can’t use the ESRI Flex API to do it without violating the Google Maps Terms of Service.

If Google were to open up its TOS to allow direct access to the map tiles (as many have called for) that would solve part of the problem. But you would still have the issue of being restricted in what you can do with the results of a call to the Geocode API. My understanding is that you are only allowed to display the result(s) on a Google Map, not in any other mapping system.

In my experience, the Google Maps data and Geocode functions are superior to the ArcGIS Online equivalents that are accessible from the ESRI Flex API. If you want to take advantage of Google’s map content and Geocode functionality, it’s worth the effort to integrate the ArcGIS Server REST API with the Google Maps API for Flash .

Don’t take this to mean I don’t like ESRI’s Flex API – it has many strengths which I’ll cover in future posts. In the meantime, if you’re going that route, check out Thunderhead Explorer - an excellent blog by ESRI’s Mansour Raad featuring “Tips and Tricks with ArcGIS Flex Mapping API”.

Sample Application Concepts

Our simple sample application works as follows:

  • The Google Maps API for Flash is embedded in a Flex 3 application.
  • The parcels are served via an ArcGIS Server Map Service, accessible via ArcGIS Server’s REST API.
  • The parcels are displayed at zoom levels 17 - 19.
  • The parcels are fetched via an HTTPService each time the map extent changes.
  • The parcels are returned in JSON format.
  • The JSON response is decoded using the open source JSON decoder in as3corelib.
  • Each parcel’s geometry is converted to a Polygon Overlay and added to the map.
  • Parcels are drawn with dark grey lines when the normal map is selected and white lines when the Satellite or Hybrid map is selected.
  • When the user hovers the mouse over a parcel, it’s parcel number is displayed in a tooltip.

Here are a couple of screenshots:

image

image

Live example is here, and source code is here.

Discussion

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%" >
    <gm:Map id="map"
        width="100%"
        height="100%"
        key="(Your API Key Here)"
        mapevent_mapready="map_mapReady(event)" />

    <mx:Script>
        // Omitted for clarity
    </mx:Script>
</mx:Application>

Next, we declare a few member variables at the top of the script block:

// Parcels URL and parameters
private var parcelsUrl:String = "http://sampleserver1.arcgisonline.com/" +
    "ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer/1/query";
private var wgs84wkid:String = "4236";
private var toolTipField:String = "RNO";

// Parcels map service
private var parcelsService:HTTPService = new HTTPService();

// Parcels symbols
private var transparentFill:FillStyle;
private var greyStroke:StrokeStyle;
private var whiteStroke:StrokeStyle;

With the parcelsUrl variable, we are specifying an endpoint to an ArcGIS Server REST API query function on a Layer in a MapService. See the ESRI ArcGIS Server REST API Reference for more information on the specific URL format for calling this operation.

For this example, we have chosen an ESRI sample server that has a parcels layer available for Portland, Oregon. We can explore this MapService and other sample services using the interactive SDK located at the following URL: http://sampleserver1.arcgisonline.com/arcgis/rest/services

image 

By drilling down into the Portland Folder and MapServices, we can learn about the functionality and data layers that are available for consumption. If we drill down to the layer in question, we can see a few interesting things about it, including the field names and aliases.

We also see that the layer has a spatial reference well known id (wkid) of 102113 – also known as Web Mercator. This is great if you need to overlay the layer as map tiles on Google Maps, because Google’s map tiles are also in Web Mercator. However, streamed geometries with coordinates in the Web Mercator spatial reference will not overlay properly on top of Google Maps. They must be in WGS 84 (Lat/Lon).

Therefore, we have a wgs84wkid variable which holds the well known id for WGS 84. As you will see, the ArcGIS Server REST API allows us to specify input and output spatial references that are different from the spatial reference of the MapService – and it will perform the coordinate conversions on fly.

The map_mapReady function is filled in next:

private function map_mapReady(event:Event):void {
    // Setup parcel symbols
    transparentFill = new FillStyle({
        alpha: 0.0 });
    greyStroke = new StrokeStyle({
        alpha: 1.0,
        thickness: 1.5,
        color: 0x333333 });
    whiteStroke = new StrokeStyle({
        alpha: 1.0,
        thickness: 1.5,
        color: 0xffffff });
   
    // 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);

    // Add event listeners
    map.addEventListener(MapMoveEvent.MOVE_END, map_moveEnd);

    // Initialize map           
    map.setCenter(new LatLng(45.520211, -122.65553), 17,
        MapType.NORMAL_MAP_TYPE);
}

In the map_mapReady function, we setup a transparent fill style and stroke styles for the dark grey and white lines. We also initialize the map controls and add an event listener for the map’s “move end” event. This event is where we will call the ArcGIS Server REST API to get the parcels for the current map extent. Finally, we center the map and zoom in on an area of Portland so that we’ll have something to look at when the application starts.

The map’s “move end” event is where we send an http request to ArcGIS Server to get the parcels:

private function map_moveEnd(event:MapMoveEvent):void {
    // Get zoom level
    var zoom:Number = map.getZoom();
    trace("map_moveEnd - Zoom level: " + zoom.toString());

    // Only draw parcels if zoomed in far enough
    if (zoom < 17) {
        // This just clears the overlays if we're not zoomed in far enough.
        // This would be a problem if there are other overlays besides parcels.
        // We'll deal with that in a future post.
        map.clearOverlays();
        return;
    }

    // Get current extent
    var bnds:LatLngBounds = map.getLatLngBounds();
   
    // An ESRI envelope is configured as xmin, ymin, xmax, ymax
    var envelope:String = bnds.getWest().toString() + "," +
                          bnds.getSouth().toString() + "," +
                          bnds.getEast().toString() + "," +
                          bnds.getNorth().toString();
    trace("map_moveEnd - Envelope: " + envelope);
   
    // Cancel http service in case a request was sent
    // that hasn't come back yet
    parcelsService.cancel();

    // Setup http service and add listeners
    parcelsService.url = parcelsUrl;
    parcelsService.addEventListener(ResultEvent.RESULT, onParcelResult);
    parcelsService.addEventListener(FaultEvent.FAULT, onHttpFault);

    // Setup parameters to pass to the service
    var params:Object = new Object();
    params.geometry = envelope;
    params.geometryType = "esriGeometryEnvelope";
    params.inSR = wgs84wkid;
    params.spatialRel = "esriSpatialRelIntersects";
    params.returnGeometry = "true";
    params.outSR = wgs84wkid;
    params.outFields = toolTipField;
    params.f = "json";

    // Send the request
    parcelsService.send(params);
}

First, we get the current zoom level. If the level is less than 17, we clear all overlays and exit. This is a shortcut to keep the example simple. If we were drawing any other overlays besides parcels, this would obviously be a problem. We’ll look at a better way to handle clearing the parcels in a future post.

Next, we get the LatLngBounds of the map and convert it into a string representation of an ESRI envelope that can be passed to the ArcGIS Server REST API.

Before making a new request through the HTTPService, we cancel it in case a prior request was sent that hasn’t come back yet.

Next we assign the URL endpoint to the HTTP Service and set up the event listeners.

In Flex 3 (like in Javascript), you can create an anonymous object and add properties to it “on the fly”. Here we create a new Object named params and add all of the parameters we want to pass as arguments in the URL query string. See the ESRI ArcGIS Server REST API Reference for more information on what parameters are available when calling the query operation on a layer.

Once the params Object is constructed, it is passed to the send method on the parcelsService (HTTPService). The HTTPService converts each property into a query string argument before sending the request to the REST API for the MapService.

The “on parcel result” event will be fired by the HTTPService when a response is received.

private function onParcelResult(event:ResultEvent):void {
    //trace(event.result as String);

    // Use ascorelib JSON serializer to decode returned object
    var obj:Object = JSON.decode(event.result as String);
    if (obj.error != null) {
        Alert.show('An error occured on the server. The response message returned was:\n\n' +
            event.result, 'Server Error');
        return;
    }

    // Simply clear all the polygons from the map.
    // This would be a problem if there are other overlays.
    // We'll deal with that in a future post.
    map.clearOverlays();

    // Get the features array from the returned JSON
    var features:Array = obj.features as Array;

    // This code breaks multipolygons into a separate polygon for each
    // ring. Not ideal, but necessary at this zoom level because the only
    // way to create multi ringed polygons in GMaps Flash API (as of v 1.9c)
    // is with the Polyline Encoding Algorithm - and this algorithm rounds
    // to 5 decimal places - thus creating choppy looking polygons.
    // We'll discuss this further in a future post.
    for each (var feature:Object in features) {
        for each (var ring:Array in feature.geometry.rings) {
            var points:Array = new Array();
            for each (var point:Array in ring) {
                points.push(new LatLng(point[1], point[0]));
            }

            var polyOpts:PolygonOptions = new PolygonOptions();
            polyOpts.fillStyle = transparentFill;
            polyOpts.strokeStyle =
                (map.getCurrentMapType() == MapType.NORMAL_MAP_TYPE ?
                greyStroke : whiteStroke);
            polyOpts.tooltip = feature.attributes[toolTipField];

            var poly:Polygon = new Polygon(points, polyOpts);
            map.addOverlay(poly);
        }
    }               
}

The ResultEvent’s result property contains the JSON string returned from the server. We use the ascorelib JSON serializer to decode the returned string into an Object. From there, we can access the properties of the result object defined for the ArcGIS Server response.

The JSON Response Syntax is defined as follows:

{
"displayFieldName" : "<displayFieldName>",
"fieldAliases" : {
    "<fieldName1>" : "<fieldAlias1>",
    "<fieldName2>" : "<fieldAlias2>"
},
"geometryType" : "<geometryType>",
"spatialReference" : {<spatialReference>},
"features" : [
    {
    "attributes" : {
        "<fieldName1>" : <fieldValue11>,
        "<fieldName2>" : <fieldValue21>
    },
    "geometry" : {<geometry1>}
    },
    {
    "attributes" : {
        "<fieldName1>" : <fieldValue12>,
        "<fieldName2>" : <fieldValue22>
    },
    "geometry" : {<geometry2>}
    }
]
}

In this case, since we are requesting polygons, the JSON Response Syntax for the geometries is defined as follows:

{
"rings" : [
    [ [<x11>, <y11>], [<x12>, <y12>], ..., [<x11>, <y11>] ],
    [ [<x21>, <y21>], [<x22>, <y22>], ..., [<x21>, <y21>] ]
],
"spatialReference" : {<spatialReference>}
}

Once we get the features array from the Object we iterate each feature, get its attributes and geometry, construct a Google Maps Polygon Overlay, and add it to the map.

When constructing the Polygon, a PolygonOptions object is created to define its look and behavior. We use this object to define the symbology, choosing dark grey lines if the map type is Normal, and white lines if the map type is one of the others such as Satellite or Hybrid. The PolygonOptions object is also used to define the tool tip that will be displayed when the user hovers the mouse over the Polygon.

Note that if the ESRI polygon has multiple rings, we simply create a separate Google Polygon for each ring. This is necessary because the Google Polygon constructor can only take one array of points and does not handle multiple rings.

There is a way to create multi-ringed Google Polygons using the Polygon.fromEncoded() static method, but this turns out to be problematic due to the rounding errors introduced by the encoding algorithm.

Default 500 Feature Limit

ArcGIS Server MapServices have a default limit of 500 features that can be returned from a layer query request. If you Pan/Zoom around the live example application, you might notice missing parcels if you are in a dense area and the limit is reached. The limit can be changed by modifying the MaxRecordCount in the MapService’s configuration file on the server. But since we’re using an ESRI sample server, I can’t very well make that change.

Wrap Up

This simple application has served to demonstrate the basics of communicating with the ArcGIS Server REST API and overlaying the results on a Google Map built with the Google Maps API for Flash.

Stay tuned for future posts, where we will refactor and improve upon the code to create reusable components.

Live example is here, and source code is here.

Resources

Downloads

Documentation and Sample Servers

Blogs and Forums

Tags: , , , ,

ArcGIS Server | Flex 3 | Google Maps | How To | Planet GS

Powered by BlogEngine.NET 1.6.0.0
Theme by Mads Kristensen | Modified by Mooglegiant
Creative Commons License This work is licensed under a Creative Commons Attribution 3.0 United States License.

Welcome

James Richards

Hi, I'm James Richards the CTO and co-founder of Artisan Global LLC. We make location-aware mobile apps with maps. I'm the author of QuakeFeed and I helped launch Zaarly at LASW Feb 2011. I also enjoy surfing, snowboarding, golfing, yoga, and music. I love my family: Linda, Sequoya and our cats Remy and Twiggy. Thanks for stopping by, I hope you find something helpful here.

Subscribe by RSS   Follow me on Twitter   Connect on Facebook   View my profile on LinkedIn


Amazon Associates

Some of my posts may contain Amazon Associates links. I only include these links when it makes sense within the context of the article. If you are in the market for one of these items, please consider clicking on an affiliate link to make your purchase. You still get the same great deal from Amazon and it will help me pay for hosting and bandwidth. Thanks!