Getting Started With Flex Based Yahoo! Maps

The Yahoo! Maps AS3 Component is nothing short of astounding, a clean and powerful Flex component that delivers sophisticated mapping quickly and easily. I needed to add mapping to an app recently and was pleased to see how well this component delivered. If you are interested in adding mapping to your apps, I highly recommend that you take a look at this component. And here are detailed steps to help you get started.
To use the Yahoo! Maps AS3 Component you’ll need your own Yahoo! Developer Network Application ID. If you have one already, then you’re all set. If not, click on the “Get an App ID” link on the component page to obtain one.
Once you have an App ID, you’ll need to download the Flex component itself. There is a download link in the middle of the component page, download the ZIP file, and expand it in a local folder somewhere. There are lots of files in the ZIP file, but the really important file is the YahooMap.swc file. Make sure you know the path to this file, you’ll need it when you create your Flex project.
Then create a new Project in Flex Builder. You can define a Server Technology if needed, although for tinkering the first time you may want to keep the Project as simple as possible. In the 3rd screen in the New Flex Project wizard you can specify Source Paths and Library Paths. Select the “Library path” tab as you’ll need to add the YahooMap.swc. Click the “Add SWC” button, and then browse to the YahooMap.swc file and click “OK”. You should see the YahooMap.swc listed in the “Build path libraries” list. You can then finish creating the Project.
Now let’s create the basic UI. This example will display the map in a large box on the right, and the left will contain simple text boxes, one to enter the map location, and the other to specify map searches. Here’s the MXML code:

The code is pretty simple, and the only really interesting item is the which will be used to display the map. Paste this code into your app, and compile and run it, just to make sure all is working.
Next we’ll add basic mapping. Here is the updated code:

Let’s take a look at the above code. The big change is the

Not a lot of changes here. First, we've added some more needed import statements. We've also added a variable of type Address (to store the set map location). Two functions have been added to the code. setMapLocation() accepts a string (whatever the user typed in the txtLocation box) and then creates an Address object for the passed string. As you are probably noticing, the Yahoo! Maps component is used asynchronously and is thus highly event driven. setMapLocation() sets an event handler that will be called when the Address object has been successfully geocoded, and then it perform the geocode. The geocode operation does not do anything to the map, rather it locates matches and converts them into map locations. The event handler, yahooGeocodeSuccess(), first obtains any results generated by the geocode operation. It is possible for a geocode operation to return multiple results, but this code ignores all but the first match, and then uses that first match to set the map zoom level and location. And finally, setMapLocation() was added to the first and

Once again, more import statements have been added. We've also added a variable of type LocalSearch to perform local searches (searches within the displayed map). The second and

2 responses to “Getting Started With Flex Based Yahoo! Maps”

  1. Andy Powell Avatar
    Andy Powell

    I like the geocoding of the Yahoo! Maps API, but for actually displaying the maps, I prefer the MapQuest API. IMO, the map component is a bit cleaner. I routinely use the Yahoo! geocoder, then plot on the MapQuest map. It just goes to show how interchangeable these components can all be when used together.

  2. Matt Sheehan Avatar
    Matt Sheehan

    The Yahoo map Flex API is cool . Thought it worth mentioning the Modest Maps Flex library. It pulls tiles from Google but allows you to develop a rich application without being tied solely to the yahoo api. I have an example of a ski map mash up at:
    which shows some of the possibilities.

Leave a Reply