Advanced Flash Components

Working with Geocoder

Updated: Jun 6, 2008 Views: 2883

Description: In this tutorial we will go through the steps needed to use geocoding feature in UMap (AS3.0) Component.

The Complete Project

Complete Code:

import com.afcomponents.umap.core.UMap;
import com.afcomponents.umap.display.geocodermanager.*;
import com.afcomponents.umap.events.GeocoderEvent;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.overlays.Layer;

import fl.events.ComponentEvent;

//create instance of UMap
var map:UMap = new UMap();
map.setSize(580, stage.stageHeight);
stage.addChildAt (map,0);

//Create GeocoderManager and addEventListener
var geo:GeocoderManager = new GeocoderManager();

geo.addEventListener(GeocoderEvent.SUCCESS,ready);

//Creates layer for info returned from Geocoder
var layer:Layer;

function ready(event:GeocoderEvent):void
{
   if (layer != null)
       layer.clearOverlays();
   layer = geo.getLayer(event.results);
   map.addOverlay(layer);
   map.setBounds(layer.getBoundsLatLng());
}

//Sets up GeoCoding/Wiki service
search.addEventListener(MouseEvent.CLICK,input);
text_field.addEventListener(ComponentEvent.ENTER,input);

function input(event:*):void
{
   if (wiki.selected)
       GeoNamesService(geo.service).geocodeWikiAddress(text_field.text,20);
   else
       geo.service.geocodeAddress(text_field.text,20,{verbosity:GeoNamesService.FULL});
}

Instantiate UMap to stage

Before we do this please make sure you have the UMap component located inside your library. You can do this by opening in the component panel (Window > Components > AFComponents UMap) and dragging the component into the library (Window > Library). What we are doing here is accessing the component from the library creating a new instance of it and adding the component to stage. We have given it a instance name of map. We have also gone ahead and set the size also. By default the component will get added to location of (0,0).

var map:UMap = new UMap();
map.setSize(580, stage.stageHeight);
stage.addChild (map);

Creating GeoCodeManager

Here we will need to import the class for the Geocoder. Then create a new instance of just like we did with UMap. Once that is complete a event listener is needed so we know that the Geocoder has been created.

var geo:GeocoderManager = new GeocoderManager();

Creating the Geocoder Form
We will need to drag an instance of each of the following default flash components - checkbox, input text field and button from the components . We will need to give then need to give them instance names of checkbox - wiki, button - search, and input text field - text_field

After that has been completed, we will use them to pass info into the Geocoder manager. If the wiki check box is selected it will grab info from wikipedia. We will need to put event listeners on both button and input text field. So it knows when to pass the information inputted over to search the database for matches.

//Sets up GeoCoding/Wiki service
search.addEventListener(MouseEvent.CLICK,input);
text_field.addEventListener(ComponentEvent.ENTER,input);

function input(event:*):void
{
   if (wiki.selected)
       GeoNamesService(geo.service).geocodeWikiAddress(text_field.text,20);
   else
       geo.service.geocodeAddress(text_field.text,20,{verbosity:GeoNamesService.FULL});
}

Adding layer of returned data
After the search has been successful a layer is then created and points plotted onto the layer.

//Creates layer for info returned from Geocoder

var layer:Layer;

function ready(event:GeocoderEvent):void
{
   if (layer != null)
       layer.clearOverlays();
   layer = geo.getLayer(event.results);
   map.addOverlay(layer);
   map.setBounds(layer.getBoundsLatLng());
}
geo.addEventListener(GeocoderEvent.SUCCESS,ready);

Component Info

UMap (AS 3.0)

Knowledge Base

Forum