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