Developer Network Home - Help

Yahoo! Maps Web Services - ActionScript®-Flash® API Getting Started Guide

Version 3.5 - Beta Yahoo! Maps AS-Flash API - CustomSWFMarker Tutorial

Learn the fundamentals of the CustomSWFMarker feature in the Yahoo! Maps AS-Flash API for use with ActionScript and the Flash IDE.

Introduction and Prerequisites

Using the CustomSWFMarker in your application adds a whole new layer of functionality and use to your map. By using an external .swf file as your marker you can pass data back and forth and use anything from simple text to Flash video in your map application. This tutorial will walk through the steps needed to create simple markers and pass city names to the markers dynamically, leaving the door open for a more powerful application.

To create and test applications using the Yahoo! Maps AS-Flash API, you'll need Macromedia® Flash MX 2004® or higher and a browser with Flash Player 7 or higher. You will also need to download the Yahoo! Maps MXP (Macromedia® eXtensions Package) file that will install the appropriate classes onto your machine. An application ID is required to use the AS-Flash API. You can get an application ID here.

For best results, you should launch your web pages from a web server. However, it's possible to run applications directly from your hard drive by double-clicking on them. If you run them from your hard drive, you may see a warning from the Flash Player that your application is trying to access data from a third-party server (Yahoo!). You can remove this warning by adjusting your Flash Player settings.

Displaying a Yahoo! Map using ActionScript and Flash

Once you have agreed to the terms and downloaded the Yahoo! Maps MXP file, double click on it to launch the Macromedia Extension Manager and automatically install the extension. Please make sure that you have the latest version of the Extension Manager installed. You will need to restart the Flash IDE if you have it open in order for the classes to be available. After the extension is loaded, open the Components panel and expand the Yahoo tree where you should now see com.yahoo.maps.api.flash.YahooMap. To use the component, drag com.yahoo.maps.api.flash.YahooMap from the Components panel onto the stage. Resize the component with the Transform tool or Property inspector and test your movie to see the map. To interact with the map you will need to give the component an instance name. For the examples below, myMap is the instance name.

When adding the Map component to the stage, you should specify what the map will display by default as well as enter your Yahoo! application ID. With the component selected, click on the Parameters tab in the Properties inspector. Here you can specify the starting location, default zoom level, and Yahoo! application ID for your map. The starting location can either be an address, taking advantage of our built-in geocoding, or a latitude and longitude. The zoom level can be any integer from 1 to 17. If no zoom level is specified, the map will default to a zoom level of 14 over the specified location. If no location is specified, the map will default to the center of the United States at the specified zoom level.

Making the Map Draggable using ActionScript and Flash

To make your map draggable, import the PanTool and then add it to your map. To add the PanTool to the map, wait for the map to initialize (the EVENT_INITIALIZE event) and then use the Map.addTool() method to add the PanTool to the map. The map will use the default zoom level, application ID, and location that you set in the Properties inspector for the map component.

This example uses the demonstration application ID "YD-h3UhQqw_I36TiJVmNLsQTg--"; you cannot use this Application ID and must request one here.

import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.markers.CustomSWFMarker;
myMap.addEventListener(
  com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE,
  onInitMap);
function onInitMap(eventData) {
  var panTool = new PanTool();
  myMap.addTool(panTool, true);
}  

Run the example above Download source

Creating the marker SWF

By now we have created a very basic map. Our next steps will be creating the custom marker and adding the markers to the map.

When using the CustomSWFMarkers, you have much more power over your map application. Using the features built into Flash 8, you can customize the marker you create with objects such as external images, Flash Video or even simply dynamic text.

Adding the markers

In order to store the various addresses we will create an array which will hold both the address and the title which will show up over the marker. First, below the import at the top of your code, create a new array titled myAddresses.

var myAddresses:Array = new Array();

Our next step will be to push addresses and titles to the array inside the onInitMap function

 myAddresses.push({address:'Gilroy, CA', title:'Gilroy'}, {address:'Concord, CA', title:'Concord'},
{address:'Sacramento, CA', title:'Sacramento'}, {address:'Petaluma, CA', title:'Petaluma'},
{address:'Sacramento, CA', title:'Sacramento'}, {address:'Sunnyvale, CA', title:'Sunnyvale'},
{address:'San Francisco, CA', title:'San Francisco'}, {address:'Fremont, CA', title:'Fremont'});

Directly after, we will create a for loop which will iterate through the array and add each marker to the map.

for(i=0; i<myAddresses.length; i++) {
	myMap.addMarkerByAddress(CustomSWFMarker,myAddresses[i].address, {url:myMarker.url, ref:i});
}

If you compile your map now, and all has gone well, you will see that your .swf markers have been added to the map over each location in the array, but without any titles. Our next steps will be to add an event listener that fires every time a new marker is added then create a new function that will add the title to each marker.

Passing data to the marker

Next, create a new function titled ‘onCustomMarkerLoaded’. This function will be called everytime the EVENT_CUSTOM_MARKER_LOADED event fires, every time a new marker is added to the map. Inside, we will get the reference number passed to the marker when we added it above. Once we have the reference number, we'll use it to go through the myAddresses array again to this time get the title for the marker. After that we'll use callCustomMethod to call the function we created in the marker swf.

function onCustomMarkerLoaded(eventData) {
	marker = eventData.marker;
	markerTitle = myAddresses[eventData.ref].title;
	marker.callCustomMethod("loadTitle", [markerTitle]);
}

In order for the event to fire when each marker is loaded we'll need an event listener to listen for the EVENT_CUSTOM_MARKER_LOADED event. Add this line under the EVENT_INITIALIZE listener.

myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_CUSTOM_MARKER_LOADED, onCustomMarkerLoaded);

Assuming all has gone well, when compiling the map the markers will load and the titles will be shown in the text field. Possible next steps could be to incorporate richer data in the marker, or to use XML as your address data source, or use one of the many components available in Flash. The sky is the limit.

The finished code:

Map

import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.markers.CustomSWFMarker;

var myMarker = {url:'marker.swf'};
var myAddresses:Array = new Array();

myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_CUSTOM_MARKER_LOADED, onCustomMarkerLoaded);

function onInitMap(eventData) {
	var panTool = new PanTool();
	myMap.addTool(panTool, true);

	myAddresses.push({address:'Gilroy, CA', title:'Gilroy'}, {address:'Concord, CA', title:'Concord'},
	{address:'Sacramento, CA', title:'Sacramento'}, {address:'Petaluma, CA', title:'Petaluma'},
	{address:'Sacramento, CA', title:'Sacramento'}, {address:'Sunnyvale, CA', title:'Sunnyvale'},
	{address:'San Francisco, CA', title:'San Francisco'}, {address:'Fremont, CA', title:'Fremont'});

	for (i=0; i<myAddresses.length; i++) {
		myMap.addMarkerByAddress(CustomSWFMarker, myAddresses[i].address, {url:myMarker.url, ref:i});
	}
}
function onCustomMarkerLoaded(eventData) {
	marker = eventData.marker;
	markerTitle = myAddresses[eventData.ref].title;
	marker.callCustomMethod("loadTitle", [markerTitle]);
}

Marker:

stop();
function loadTitle(markerTitle:String) {
	markerText.text = markerTitle;
}

 

Copyright © 2015 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings