Using the Yahoo! Maps Flash API

The basics: The YahooMap component

Let's start at the beginning.

Install the component:

1. Download the Yahoo! Maps MXP.
2. Double-click the MXP to launch the Macromedia Extension Manager. You may need to download the latest extension manager. After accepting the installation terms and clicking OK, the API will be fully installed.
3. Obtain an application ID from the Yahoo! Developer Network.
4. Launch the Flash application (Flash MX 2004 or later) and expand the Components window (Control + F7). You should see the YahooMap component listed in the Components panel.

Set the stage:

1. Create a new Flash file.
2. Drag the YahooMap component to your Stage and keep it selected.
3. In the Properties panel, with the YahooMap component on the Stage selected, name the instance of the YahooMap component myMap. (All the code excerpts in this article refer to the map instance as "myMap".)
4. Resize the component to 500 x 400 pixels, either in the Properties panel or by using the Free Transform Tool (Q).
5. Back in the Properties panel, select the Parameters tab. Enter the AppID you registered with the Yahoo! Developer Network.

See the world:

1. Compile the FLA file (Control + Enter).
2. Continue to read and explore this article and learn how you can change the world that you have created with the Yahoo! Maps API.

Tools and widgets: Controlling the map

Tools are a set of behaviors you can add to the map to give your users more control over the displayed content. Panning is probably the most frequent user action when it comes to maps interaction. Importing the PanTool class and creating an instance of it once the map initializes lets your users click and drag the map in all directions. The panning class adds click and double-click capabilities, which center the map on a certain point and zoom in on a specific point, respectively:

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); 
}

Reminder: Start each section with a new FLA file. This is how I wrote each example in this tutorial. It helps to have a clean slate to understand the unique functionality being presented for each section.

The NavigatorWidget is a very sleek interface, combining the essential zoom bar with the super "minimap" navigation tool. The minimap replicates the very large map data and scales it into a much smaller window. The minimap provides precision navigation of the big map, like a voodoo doll.

In the center of the minimap is a draggable box (some call it the "hockey puck"). When a user drags the box up, the larger map pans up too, and so on. The box in the center of the minimap also scales to the displayed proportions of the component as a whole. This widget appears in the top right of the map:

import com.yahoo.maps.widgets.NavigatorWidget;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     var navWidget = new NavigatorWidget("open"); 
     myMap.addWidget(navWidget); 
}

The NavigatorWidget has two states, open and closed, which you can controll by passing the initial state when creating the instance. When it's closed, the Navigator shows only the vertical zoom bar. Even when it's open, the user can still close the Navigator by clicking the little white arrow (see Figure 1). The sleek widget, in Flash fashion, animates between states.

Figure 1. NavigatorWidget with the minimap that a user can use to zoom in on a region

While I will go into more detail on changing the map view in the next set of examples, adding the SatelliteControlWidget is a quick way of providing your users with a cool way to toggle the map view. The SatelliteControlWidget consists of three buttons (one for each map view type) and displays in the top-left corner of your map.

This example shows that you can create an instance of a widget without saving it to a variable. This saves a line of code, but will make it harder to call methods on this widget. Unlike the Navigator, the Satellite Control has no open/closed states:

import com.yahoo.maps.widgets.SatelliteControlWidget; 
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
     function onInitMap(eventData) { 
     myMap.addWidget(new SatelliteControlWidget());
}

Page 2 of 5

Previous Page

Next Page