Using the Yahoo! Maps Flash API

Map views: Changing to satellite and hybrid

The API lets you work with satellite and hybrid tiles, in addition to the default map tiles. I'm going to show you three simple ways to display and let your users choose the different kinds of map views to display with the component in your application.

You can set the default map view type when the component first loads. On the Stage, select the component and then look in the Parameter tab to select the map view type. The component collects this parameter when it first is created, providing the best experience for the user.

To set the map view type programmatically, use the setMapViewType method. Note that the map loads first with the default type and then redraws upon initializing, with the new map view type:

import com.yahoo.maps.MapViews;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     myMap.setMapViewType(MapViews.SATELLITE); //for Hybrid use MapViews.HYBRID
}

The API gives you some options for changing the map view type outside the component. By using getMapViewTypes, you get an array ("map", "hybrid", "satellite").

The following example shows how you can build your own set of map view buttons, a custom alternative to the SatelliteControlWidget that I discussed previously, using getMapViewTypes(). Creating or attaching your own buttons, particularly outside the map, lets you control the map with user interface elements consistent with your application. While the SatelliteControlWidget buttons are rather small and tightly designed, putting buttons alongside the map will open up your map area a bit more.

After the map initializes, getMapViewTypes() can be called, giving you the array of all map view types available. Loop through this array and call the makeButton function, passing the iteration value and map view type value:

myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
    var mapViews:Array = myMap.getMapViewTypes();
    for (var i=0;i< mapViews.length;i++) {
        makeButton(i, mapViews[i]);
    }
}

This is where you can attach or create buttons. Coding a function like the makeButton function lets you create some simple, lightweight buttons (see Figure 2). By incrementing the y or x values, you can manage the placement of the buttons either vertically or horizontally. Be sure to set the variable for your y/x value outside the function.

Figure 2. Adding buttons to the map

In this example, I use the _buttonX variable to lay out the buttons across the top of the application. Within the onPress function, you call the setMapViewType with the label value. This changes the map view when the user clicks each button. You can also use a simple conditional to track the state of the buttons. To do this, you will need to use another method, getCurrentMapViewType. The text in the button will be bold when it represents the active map type:

var _buttonX:Number = 0;
var _selButton;
function makeButton(i:Number, mapView:String) {
    var buttonBase:MovieClip = this.createEmptyMovieClip("buttonBase"+I, i);
    buttonBase._x = _buttonX;
    buttonBase.moveTo(0, 0);
    buttonBase.lineStyle(1, 0x000000, 100);
    buttonBase.beginFill(0x999999, 100);
    buttonBase.lineTo(100, 0);
    buttonBase.lineTo(100, 22);
    buttonBase.lineTo(0, 22);
    buttonBase.lineTo(0, 0);
    var buttonLabel:TextField = buttonBase.createTextField("buttonLabel", 1, 0, 0, 100, 22);
    buttonLabel.id = mapView;
    buttonLabel.html = true;
    buttonLabel.selectable = false;
    
    if (mapView == myMap.getCurrentMapViewType()) {
        buttonLabel.htmlText = "<b>" + mapView + "</b>";
        _selButton = buttonLabel;
    } else {
        buttonLabel.htmlText = mapView;
    }

    buttonBase.onPress = function () {
        this._parent.myMap.setMapViewType(buttonLabel.text);
        _selButton.text = _selButton.id;
        buttonLabel.htmlText = "<b>" + buttonLabel.text + "</b>";
        _selButton = buttonLabel;
    }

    _buttonX+=120;
}

Explore the Reference Manual for the Yahoo! Maps Flash APIs to find out how you can use your own buttons to control many other aspects of the map.

Page 3 of 5

Previous Page

Next Page