Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. XML

Plotting Points Using Yahoo! Maps and RSS

Read Time:14 minsLanguages:

In this tutorial, I'll show you how to get started with the Yahoo! Maps API in Flash. We'll load a couple of RSS feeds and plot some natural disaster warnings using their longitudes and latitudes.

Step 1: Get an App ID

Go to http://developer.yahoo.com/flash/maps/ and sign up for an App ID.

Step 2: Download the Component

On the Yahoo Map AS3 Component page, download the newest version of the component.

Step 3: Install the Component

When the file is done downloading, extract the zip file. Navigate to the Flash folder and install the MXP file.

Step 4: Move to Flash

Start Flash and open a new ActionScript 3.0 file, then save it in a new folder as "yahoo_map.fla".

Step 5: Set Up the Document

Change the stage size to 640x480. Navigate to the components tab and drag a copy of the YahooMaps component to the stage. Once it's on the stage, delete it. That will put a copy in the library so we can access it from there.

Step 6: The Text Area

Drag a copy of the TextArea from the components tab. In the properties panel, change the size of the TextArea to a width of 640px and a height of 100px. Give it an X position of 0 and a Y position of 330. Finally, give it an instance name of "textArea".

Step 7: The Radio Buttons

Next, drag a copy of the the RadioButton from the components tab. Copy and paste it three times, so that there are four instances of the RadioButton component on the stage. Align them to the top and evenly space them out, so that they're in a straight line right next to one another. Next, drag them below the TextArea component.

Step 8: The Radio Button Parameters

Select the first radio button. Give it an instance name of "radioAll". With the button still selected, switch over to the parameters panel. Give it a group name of "Disasters". Change the label property to "All" and the selected property to "true".

Select the next radio button. Give it an instance name of "radioEarth", the same group name of "Disasters", a label of "Earthquakes" and leave the selected property as "false".

Select the third radio button. Its instance name is "radioTsu", the group name is "Disasters", the label is "Tsunamis", and the selected property is "false".

Finally, select the fourth radio button. It has an instance name of "radioVolcano", its group name is "Disasters", it has a label of "Volcanoes", and selected is "false". Since we want to be able to toggle between the buttons, we gave them the same group name. Space them accordingly, so that they're evenly spaced.

Step 9: The Empty MovieClip

Create a separate layer. Place the layer below the layer with TextArea and RadioButton components. In the library panel, at the bottom, select the new symbol icon. Create a new empty movieclip. Drag an instance onto the stage in the newly created layer, then give it an instance name of "empty". This movie clip will hold our map when it's loaded. Give the empty movie clip an X and Y position of 0. That way it's lined up with the top left corner of the stage.

Step 10: Setting Up the Document Class

Go to file > new and select a new ActionScript File. Save the file in the same directory as your "yahoo_map" FLA file with the name "yahoo_map.as". In your yahoo_map FLA document, in the properties panel, type "yahoo_map" in the Document class field. This will make your actionscript file the Document class for your yahoo_map FLA.

Step 11: The Document Class Skeleton

This is the basic setup for our document class:

Step 12: The Yahoo Maps Import Statements

These are the statements that will drive the YahooMap API

Step 13: The Rest of the Import Statements

Simply add these below the YahooMaps import statement. Make sure that they are above the class declaration.

Step 14: Declaring the Variables

Here we're going to delcare the global variables. We'll need the app id that you got from the YahooMaps page and we're going to need to use some php later to make the feeds load into Flash. That is why we have the CURL constant. Make sure that these are placed below the class declaration but above the main public function.

Step 15: Setting up our Init Function

Here we'll instantiate all of our variables. After searching Google, I found four RSS feeds for tsunami warnings from weather.gov. I loaded those into the tsuArray variable, so that I can load them one at a time. The geo namespace is going to help with getting to the latitude and longitude of all the RSS feeds. Also, there is a new RadioButtonGroup that will handle the toggling of the RadioButton components on the stage. Finally, I call the handleMap function. That will start the map loading process.

Step 16: Setting up our Map

This is where we start working with the map basics and where we'll use our app id. Also, when we call the map.init() method, we dictate the size we want the map to be. The map will be the width of the stage and have a height that touches the top of the TextArea component. We also listen for the MAP_INITALIZE event.

Step 17: The Map is Ready

When the map is initialized, it will fire the onInit function. Here is where we'll add the map to the empty movie clip that was placed on the stage. That way the map will load underneath the TextArea and RadioButton components -- just in case. We then add the zoom, pan, and type widgets. These control the type of map, add the ability to pan the map and add the zoom controls. We'll center the map to 0,0.

The map is looking for a new LatLon variable to which you plug in two numbers. I used 0,0 to set the map at where the Equator and Prime Meridian meet. After, maps zoom level is set. This is set to the highest altitude possible. That way we can see all the natural disaster warnings across the globe. Next we call the function to start loading our RSS feeds.

Step 18: cURLing the Feeds

We have to step out of Flash for a second and do a little PHP. When I started doing this project, I realized that the feeds wouldn't load on my website. A quick and easy way that I by-passed it was be using cURL. I found a useful sample code from Google. I'm not too sure where exactly it came from, but I've been using the same script for some time now. Open a new PHP file, paste in the following code and save it as "curl.php"

Step 19: Back to Flash

Now that we've called the function to start loading our volcano feed, we can take a look at what's going on inside the function. Simply put, we are loading our curl.php page which is loading the RSS feed. We then add a listener for when the page is done loading.

Step 20: The First Feed is Loaded

In the first feed, there are a few interesting features. The most important one is the geo:point. This is the latitude and longitude of the warning. Also, in this feed, there is a color code to show the alert level of the activity. With the feed loaded, there are two xml lists that are going to be loaded. One is for the latitude and longitude. The other is for the color code.

The lists are looped through and the new markers are created on the map. Custom movie clips are added to the markers, these are made using functions I will describe soon. The color of the nested movie clips is controlled by using the "colorTransform" property. After the feed is loaded and the markers are placed, the next RSS feed is set to load. I also pass the description text to the newly created movie clip, so that I can get to it later using the name that was given to the movie clip.

Step 21: Loading the Second Feed

Now it's time to load the earthquakes RSS feed. The functions work pretty much the same way as before.

The differences are that there is no color code for this feed. Instead I just change the color manually to brown. Also, the description of the alert has some html inside it. I used a regular expression that I came across from Google a while back to strip all the HTML out of it. Without doing that, the TextArea component will load an image, which I didn't want.

One more thing to note is that this is a different type of RSS feed. For some reason (in my experience) Atom feeds don't like to parse properly. The way around this was to climb down the child tree to the first item. Also, the item node doesn't always have the same number of children. I added a simple if statement to account for it. Finally, we call the function to load the last of the RSS feeds.

Step 22: The Final Set of Feeds

This is where we start to load the tsunami feeds. We created a tsuCounter so that we can increase the number each time a feed is loaded. When the counter reaches the end of the tsuArray, we'll add the change listeners to the RadioButtonGroup that was created. Since I want to be able to access every marker created in every array, I added tsuCounter to the beginning of the name of the movie clip. That way I'll be able to access the description from 0Tsunami1 and 1Tsunami1.

Finally, when all the feeds have been loaded, we add the event listener to the RadioButtonGroup

Step 23: Other Functions

These are the functions that are adding the markers, controlling the look of the markers, setting the longitude and latitude of the markers and creating the movie clips in the markers. The drawMarker function creates a new marker, adds a drop shadow, then adds the movie clip to it, passes the same name as the movieclip to it, gets the latitude and longitude from the loaded RSS feed and finally adds the event listeners. The marker is added the the markerManager of the map. The drawCircle function just draws a circle 10 pixels wide. The getLatlon function takes the string that is passed to it, breaks it apart and returns the LatLon. The last function, theColor, handles the different colors passed to it through the volcano feed.

Step 24: Event Handling

When the user rolls over the marker, the description of the alert is displayed in the TextArea component. This is handled through the onOver function. The target is cast as a marker using the name that was passed it. Then we receive the description text that was passed to the movieclip nested inside the marker and send it to the TextArea component. The onClick event pans the map to whichever marker was clicked. This is done by using the map.panToLatLon() method.

The final event is the onChange event. This event turns off all the movie clips except the selected buttons. It also pans the map to the most recent alert that was received in the RSS feed.

The Final Code

Here is what the final code looks like.


I've barely scratched the surface for what YahooMaps has under the hood. Read the documentation and go nuts!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.