Introducing Yahoo! Maps JS-Flash API: Creating Web Applications Using Scriptable Flash Objects

Putting It All Together

You now have plenty of raw material to create a web application using the JS-Flash API. This application, the Food Finder, will display a map of any location in the United States, and then plot the locations of various restaurants within the current location. As an added bonus, you'll also be able to plot ATMs, parking spaces, and public transportation as well. The application uses the power of the LocalSearchOverlay class which uses Yahoo!'s Local Search engine to find businesses within a given area based on text string searches.

The GUI of the application is the map div plus a form field for entering the location and a series of radio buttons, which the user can click to overlay food data on the map:

<div id="header">
  <form id="aform" name="aform" method="" onsubmit="return false;">    
    <input id="tfield" type="text"  name="theaddress" value="" /><br />
    <input  type="button" value="Change  location" onclick="changeloc();" />
  </form>
</div>
<div id="ourMap"></div>
<div>
  <form id="bform" name="bform" method="">
    <input type="radio" name="foodtypes" onclick="show_overlay(0);" />Cajun</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(1);" />Chinese</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(2);" />French</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(3);" />Greek</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(4);" />Indian</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(5);" />Italian</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(6);" />Japanese</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(7);" />Mexican</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(8);" />Thai</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(9);" />Vietnamese</input>
      <br /><br /><br /><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(10);" />Nearby parking</input><br />
    <input type="radio" name="foodtypes" onclick="show_overlay(11);" />Public transportation</input><br />  
    <input type="radio" name="foodtypes" onclick="show_overlay(12);" />ATMs</input>
  </form>
</div>
		

Once I add the JS-Flash code and actually run the application, the default map will be displayed (in this case, I've chose Austin, Texas) along with the Navigator widget. The user will see this when they run the application:

Figure 5. Running the sample application

The top box is a text field that the user can edit to change the location of the map. When they press Return/Enter, the location will change. When the user clicks a radio button along the right side, an overlay of POI markers will appear identifying the locations (if any) for those types of restaurants.

The food types and services are indexed in an array and made globally available to the application:

var foods = new Array(13)
foods[0]="Cajun food";
foods[1]="Chinese food";
foods[2]="French food";
foods[3]="Greek food";
foods[4]="Indian food";
foods[5]="Italian food";
foods[6]="Japanese food";
foods[7]="Mexican food";
foods[8]="Thai food";
foods[9]="Vietnamese food";
foods[10]="parking";
foods[11]="public transportation";
foods[12]="ATM";

When a user clicks a radio button, my JavaScript function, show_overlay, is executed and the index of the food is passed as a parameter into the function:

<input type="radio"  name="foodtypes"  onclick="show_overlay(7);" />Mexican</input>

In this case, the number 7 indexes into the foods array above. The function show_overlay, takes the index and creates the corresponding overlay (if it hasn't already been created) using the LocalSearchOverlay class.

function show_overlay(foodindex) {	
    // Hide the currently displayed overlay, if necessary
  if ((foodSelected != foodindex) && (foodSelected != null)) {
    overlay[foodSelected].hide();
    foodSelected = foodindex;
  }
	
    // Save the currently selected radio button to foodSelected
  if (foodSelected != foodindex && foodSelected == null) {
    foodSelected = foodindex;
  }
	
    // Generate and display the overlay, if necessary
  if ( overlay[foodindex] == null ) {
    overlay[foodindex] = new LocalSearchOverlay(); 
    overlay[foodindex].search(foods[foodindex], map.getCenter(), 1, 20);
    map.addOverlay(overlay[foodindex]);
  } else {
    overlay[foodindex].show();
}

The variable foodSelected holds the index of the previously selected radio button. If an overlay already exists, I use the hide() and show() methods to simply toggle the display of the overlay on and off. Actually creating and displaying an overlay requires only three lines:

overlay[foodindex] = new LocalSearchOverlay();         
overlay[foodindex].search(foods[foodindex], map.getCenter(), 1, 20);
map.addOverlay(overlay[foodindex]);

I maintain a JavaScript array of the overlays in an array called overlay. So, I first create an overlay, then I use the search() method to search for the type of food and then I actually display the overlay on the map using the addOverlay() method. The Overlay.search() method has a number of parameters that I don't use here. In the search() method call above, the “1” is the index of the first result to display and the “20” is the maximum number of results to plot.

When the user types in the location box and changes the map location, I use onsubmit="return false;" to keep the form from posting and onchange="changeloc();" in the form field to call my JavaScript function when the user presses Return/Enter. The function changeloc() clears all the values currently in use and then changes the map to the new location using the Map.setCenterByAddress() method.

    
  function  changeloc() {
    //  Set the new address
    newval  = document.aform.theaddress.value;
    document.aform.theaddress.value  = newval;
    //  Clear any currently selected values
    if  (foodSelected != null) {
        overlay[foodSelected].clear();
        document.bform.foodtypes[foodSelected].checked  = false;
    }
    //  Move the map to the new location
    map.setCenterByAddress(document.aform.theaddress.value,  0);
    //  Clear out more values
    overlay  = new Array(num_buttons);
    foodSelected  = null;
    return  true;
    }

What's left? Just the initialization code, which looks very much like the code from samples in previous sections:

  // Default address for map
document.aform.theaddress.value = "Austin, Texas";

  // Instantiate the map
map = new Map("ourMap", "YahooDemo", document.aform.theaddress.value, 4);

  // Wait for the map to initialize before going on
map.addEventListener(Map.EVENT_INITIALIZE, onInitMap, this);
	
  // Run this function after map initializes
function onInitMap (event) {
    // Make the map draggable
  map.addTool( new PanTool(), true );
    // Add the navigation widget
  navWidget = new NavigatorWidget();
  map.addWidget(navWidget);
}

The code sets the value of the location field to the default value and then creates the map at that location. I wait for the map to initialize and then add the PanTool and NavigatorWidget. And that's it! Experience the completed application here.

Note: Only United States locations will work.

Where to Go from Here

This tutorial just touches on the myriad possibilities available to developers using the Yahoo! Maps JS-Flash API. Here are some ideas to enhance the sample application:

• Use checkboxes instead of radio buttons so that the user can see two or more overlays on the map at the same time. Create custom images or SWF markers so that each overlay has a unique looking marker.
• Listen for events and notify the user whether the location they entered can be found or whether the LocalSearchOverlay class successfully found any restaurants in the location.
• Provide a visual cue (like a “loading…” message) so that users know when an overlay is loading. This will make a better user experience for users on dial-up networks and mobile devices.
• Use the TrafficOverlay class to overlay traffic incident data on the map.
• Dig deeper in the LocalSearchOverlay class. Use the companion LocalSearchFilter and LocalSearchResults classes to add extra features to the overlay output.
• Let the user decide how many results they want to plot from a LocalSearchOverlay search.
• If you're a Flash developer, use the CustomSWFMarker, CustomSWFOverlay, and CustomSWFTool classes to create your own markers, overlays, and navigation widgets using Flash and then add them to the map.

Would you do everything in Flash? Try our companion Yahoo! Maps AS-Flash API, which lets you use an almost identical API within the Flash 8 IDE to create maps within your SWF applications. Or maybe you'd rather use Macromedia Flex? We have the Yahoo! Maps Flex API as well.

Check out our various APIs and web services at http://developer.yahoo.net. Also, Yahoo! really wants to see what people are creating with the Maps APIs. Check out what others have created at http://developer.yahoo.net/maps/applications.html, or submit your work by sending an e-mail to: ydn-halloffame@yahoo-inc.com.

Page 3 of 3

Previous Page