Learn the fundamentals of the Yahoo! Maps AS-Flash API for use with ActionScript and the Flash IDE. For detailed descriptions of the classes and methods in this version of the API, check out our online AS-Flash API Reference Manual. We also have Previous Version 3 documentation and Previous Version 2 documentation.
The Yahoo! Maps AS-Flash API lets developers embed Yahoo! Maps into their web sites using the Flash IDE and the ActionScript programming language. In the Flash version, maps are generated by Yahoo! servers and placed into a Yahoo! Maps component that developers can manipulate using ActionScript. Yahoo! Maps AS-Flash API's built-in geocoder means that you can specify a physical address or latitude/longitude coordinates for your map's location, as you like.
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.
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, language 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.
Version 3.5.2 - http://developer.yahoo.com/maps/flash/componentEULA.html
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-t81tzss_JXi0usQ5VwLCuQ--"; you cannot use this Application ID and must request one here.
import com.yahoo.maps.tools.PanTool;
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
You can now display satellite or hybrid map views in the API. To specify the Map View Type when your application loads, set the MapViewType option in the component parameters panel.
You can also change the Map View Type at runtime by calling the setMapViewType() method.
import com.yahoo.maps.MapViews;
myMap.addEventListener( com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
function onInitMap(eventData) {
//This line sets the map type to Satellite;
//For Hybrid use MapViews.HYBRID, to change back to Map use MapViews.MAP
myMap.setMapViewType(MapViews.SATELLITE);
}
You also add a SatelliteControlWidget to allow your users to switch between different Map View Types.
import com.yahoo.maps.widgets.SatelliteControlWidget;
myMap.addEventListener( com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap );
function onInitMap(eventData) {
myMap.addWidget(new SatelliteControlWidget());
}
This example demonstrates how you can easily change the maps language. You can change the language at run-time using the Map.setLocale method, or on Parameters tab in the Properties inspector.
Note: The majority of the text labels used in the map reside in the SatelliteControlWidget and some markers.
import com.yahoo.maps.api.Languages;
import com.yahoo.maps.widgets.SatelliteControlWidget;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onMapInit);
function onMapInit(eventObject) {
myMap.setLocale(Languages.fr_FR); //set locale to French.
myMap.addTool( new PanTool(), true );
myMap.addWidget(new SatelliteControlWidget() );
}
Run the example above Download source
Placing a marker on a map requires three pieces of information supplied to the Map.addMarkerByAddress() or Map.addMarkerByLatLon() methods. First, specify type of marker object you want to place on the map; you pass the class name, not an instance of the class. Second, you need to supply specific address or lat/lon on the map. Lastly you need to make an object that will be used to initialize the marker instance. You can create POI (Point Of Interest) markers, waypoint markers, custom image markers, or custom SWF markers. A POI marker is a special type of marker that expands when you click on it to reveal more information about the location. A waypoint marker is a simple marker that is automatically indexed when placed on the map -- you can use ActionScript to cycle through waypoint markers like an array. The code below adds a single POI marker to our map. Note that the address where the marker is displayed is different than the default address we set in the Properties inspector. That will cause the map to display the address set in the Properties inspector first, followed by the address below.
import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.markers.CustomPOIMarker;
myMap.addEventListener("initialize", onInitMap);
function onInitMap(event:Object):Void {
var panTool:PanTool = new PanTool();
myMap.addTool(panTool, true);
var address:String = "4th Ave at Pike St. Seattle, WA";
myMap.setCenterByAddress(address, 0);
var myMarker:Object = {index:'Y!', title:address, description:'Downtown Seattle!', markerColor:0x990099, strokeColor:0xFFFF00};
myMap.addMarkerByAddress(CustomPOIMarker, address, myMarker);
}
Run the example above Download source
Overlays are sets of data points that are displayed on maps. You can define your own overlays or use Yahoo!'s pre-defined overlay classes. A very powerful pre-defined overlay class is LocalSearchOverlay which lets developers automatically plot the results of text searches using the territory defined by a map. To use LocalSearchOverlay, create a new LocalSearchOverlay object, then use the search method to search for a text string. Use the Map.addOverlay() method to display the results on the map. Here we search for "Mexican food" starting at the center of the map. Up to 10 results are plotted starting with result number one.
import com.yahoo.maps.overlays.LocalSearchOverlay;
import com.yahoo.maps.widgets.ZoomBarWidget;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
function onInitMap(event:Object):Void {
var zoom:ZoomBarWidget = new ZoomBarWidget();
myMap.addWidget(zoom);
var pantool:PanTool = new PanTool();
myMap.addTool(pantool,true);
//instantiate a new local search overlay
var localSearch:LocalSearchOverlay = new LocalSearchOverlay();
//add to map overlays
myMap.addOverlay(localSearch);
//search for mexican food at the center, returning the 1st-20th listings
localSearch.search('Mexican Food', myMap.getCenter(), 1, 20);
}
Run the example above Download source
The Flash API also now has a LocalSearchWidget that can be easily added to the map. It integrates several other Yahoo! APIs using LocalSearchOverlay, such as Flickr, Upcoming.org, Yahoo! Weather and Traffic.
import com.yahoo.maps.overlays.LocalSearchOverlay;
myMap.addEventListener( com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
function onInitMap(eventData) {
var localSearch = new LocalSearchOverlay();
myMap.addOverlay(localSearch);
localSearch.addLocalSearchWidget();
}
You can also plot real-time traffic data on the map using the TrafficOverlay class. To use this feature, just instantiate the TrafficOverlay object then add it to the map.
import com.yahoo.maps.overlays.TrafficOverlay;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
function onInitMap(event:Object):Void {
var pantool:PanTool = new PanTool();
myMap.addTool(pantool,true);
var trafficOverlay:TrafficOverlay = new TrafficOverlay();
myMap.addOverlay(trafficOverlay);
}
Run the example above Download source
You can now also draw lines, curves and shapes using the PolylineOverlay class. To use this feature, just instantiate the PolylineOverlay object passing it the url to the XML file, then add it to the map.
import com.yahoo.maps.overlays.PolylineOverlay;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
function onInitMap(event:Object):Void {
var poly:PolylineOverlay = new PolylineOverlay("http://developer.yahoo.com/maps/flash/V3/asGS.06.xml");
myMap.addOverlay(poly);
myMap.addTool(new PanTool(), true);
}
It is also important that when referencing a .xml file hosted on a different server than the one hosting the map .swf, especially when using the JS-Flash API, you will need to have a crossdomain.xml file located on the root of your server, which includes the line:
<allow-access-from domain="maps.yahooapis.com"/>
Run example 1
Download source View XML
Run example 2 Download source View XML
You can easily add widgets (such as the NavigatorWidget, ToolBarWidget, or the SatelliteControlWidget) and tools (such as the PanTool or a CustonSWFTool) to your map to help users navigate or perform other operations. In the following example, the NavigatorWidget, a SatelliteControlWidget, and a PanTool are added to the map.
import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.widgets.NavigatorWidget;
import com.yahoo.maps.widgets.SatelliteControlWidget;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
var navWidget:NavigatorWidget = new NavigatorWidget("open");
var satControl:SatelliteControlWidget = new SatelliteControlWidget(SatelliteControlWidget.HORIZONTAL);
var panTool:PanTool = new PanTool();
function onInitMap(event:Object):Void {
myMap.addWidget(navWidget); //add nav widget
myMap.addWidget(satControl); //add sat control
myMap.addTool(panTool, true); //add pan tool
}
Run the example above Download source
The following example uses an XML file to store the addresses & LatLon data for the markers, this allows you to add markers later on without having to update the swf.
Map:
import com.yahoo.maps.markers.CustomPOIMarker;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInit);
var panTool:PanTool = new PanTool();
var markerXML:XML = new XML(); //create new xml object
markerXML.ignoreWhite = true;
function onInit(event:Object):Void {
myMap.addTool(panTool, true);
markerXML.onLoad = function(success) {
if (success) addMarkers(this);
};
markerXML.load("http://developer.yahoo.com/maps/flash/V3.5/asGS.08.xml"); //load feed
}
function addMarkers(xml:XML):Void {
var addresses = xml.firstChild.childNodes;
for (var i=0; i<addresses.length; i++) { //loop though nodes
var address=addresses[i];
var markerData:Object = {index:'Y!', title:address.attributes.info, description:'Marker Loaded from XML!', markerColor:0x000000, strokeColor:0xFFFFFF};
myMap.addMarkerByAddress(CustomPOIMarker, address.attributes.loc, markerData); //adding POI marker on each node according to address
}
}
<?xml version="1.0" ?>
<locations>
<location loc="San Francisco, CA" info="San Francisco" />
<location loc="Palo Alto, CA" info="Palo Alto" />
<location loc="San Jose, CA" info="San Jose" />
<location loc="Mountain View, CA" info="Mountain View" />
<location loc="2821 Mission College Blvd, Santa Clara, CA" info="Yahoo! MC" />
<location loc="701 1st Ave, Sunnyvale, CA" info="Yahoo! Sunnyvale" />
</locations>
Run the example above Download source
The following example dynamically attaches a Yahoo! Map to your SWF, instead of creating an instance of the map on the stage.
import com.yahoo.maps.LatLon;
import com.yahoo.maps.api.Languages;
import com.yahoo.maps.MapViews;
import com.yahoo.maps.tools.PanTool;
import com.yahoo.maps.widgets.SatelliteControlWidget;
import com.yahoo.maps.widgets.ZoomBarWidget;
var satControl:SatelliteControlWidget = new SatelliteControlWidget(SatelliteControlWidget.HORIZONTAL);
var zoomControl:ZoomBarWidget = new ZoomBarWidget();
var pantool:PanTool = new PanTool();
//Create a map centered on 41.890522, 12.500553, zoom level of 8, hybrid view type and using the Italian language.
var mapdata:Object = { latlon:new LatLon(41.890522,12.500553),
zoomLevelStr:8,
mapViewType:MapViews.HYBRID,
language:Languages.it_IT,
_xscale:2200,
_yscale:1600,
appidStr:"YD-t81tzss_JXi0usQ5VwLCuQ--" };
//create map container movie clip
var mapContainer = this.createEmptyMovieClip("mapContainer", 1 );
//attach map to mapContainer
var map = mapContainer.attachMovie("com.yahoo.maps.api.flash.YahooMap", "map", 1, mapdata);
//add EVENT_INITIALIZE listener
map.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onMapInit);
function onMapInit(event:Object):Void {
//add SatelliteControlWidget with its buttons arranged horizontally
map.addWidget(satControl);
//add zoom control
map.addWidget(zoomControl);
//add pan tool
map.addTool(pantool, true);
}
Run the example above Download source
We've got new advanced Flash samples showing how to make custom SWF overlays and custom SWF tools. Complete Flash sources are included!
New advanced Flash tutorials showing how to make custom overlays, markers and tools. Complete walk-through with source code!
This Getting Started Guide only scratches the surface of what is possible using the Yahoo! Maps AS-Flash API. A small sampling of other things you can do:
For detailed descriptions of all classes and methods, check out our online AS-Flash API Reference Manual. We also have Previous Version 3 documentation and Previous Version 2 documentation.
Join the yws-maps and yws-maps-flash group on Yahoo! Groups.
The Yahoo! Maps Flash APIs are limited to 50,000 queries per IP per day. See information on rate limiting.
Use Yahoo! Maps APIs is governed by the Yahoo! Maps Terms of Use. These Terms of Use supplant the general Yahoo! Developer Network Terms of Use. See also the Usage Policy for more information about acceptable usage of these APIs.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings