Using the Yahoo! Maps Flash API

マップビュー：サテライト・ハイブリッドとの切り替え

Yahoo! Maps Flash APIには、デフォルトの地図タイルに加え、サテライトタイルとハイブリッドタイルも用意されています。ここでは、３つのマップビューを表示・切り替えるための、手軽な３つの方法を紹介することにします。

マップのデフォルトビューは、コンポーネントが初めて読み込まれた段階で設定できます。ステージ上に配置したコンポーネントを選択してから「パラメータ」タブを開き、「Map View Type」のリストから、使用したいビューを選択します。コンポーネントは、初めて作成される段階で、このパラメータの値を読み取り、ユーザに設定通りの体験を提供します。

マップビュータイプをプログラミングで制御したい場合は、 setMapViewType メソッドを使用します。この場合、地図は一旦デフォルトのタイプで読み込まれてから、初期化時に指定しておいたマップビュータイプで再描画されます。

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
}

APIには、コンポーネント外部からマップビュータイプを切り替えるためのオプションも用意されています。 getMapViewTypesを呼び出すと、"map", "hybrid", "satellite"の配列が返されます。

次のサンプルでは、すでに紹介した SatelliteControlWidget の代わりに、 getMapViewTypes()を使ってオリジナルのマップビューボタンを作成する方法を紹介します。オリジナルのボタンを作成・添付すれば、アプリケーションの地図以外の部分との統一がとれたユーザインタフェース要素を利用して地図を制御できます。前出の SatelliteControlWidget ボタンはコンパクトにデザインされていますが、ボタンを地図の外に出すことで、より大きな地図表示領域が確保できます。

地図を初期化した後、 getMapViewTypes() を呼び出すと、利用可能なすべてのマップビュータイプを含む配列が返されます。この配列に対してループ処理を行います。ループ処理の中では、カウンタの値とマップビュータイプを引数に makeButton 関数を呼び出します。

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

この場面で、オリジナルのボタンを作成・添付します。次に示す makeButton のような関数をコーディングすれば、コンパクトで軽量なボタンが作成できます（図２参照）。 yまたはxの値を増加させれば、ボタンの縦または横方向の配置が調整できます。この際、関数の外でy、x変数の値を設定することを忘れないようにしてください。

図２．地図に対するボタンの追加

このサンプルにおいて筆者は、 _buttonX 変数を利用してアプリケーションの上部を横断するようにボタンをレイアウトしています。そして、 onPress 関数では、ラベルの値を引数として setMapViewType を呼び出しています。こうすることで、ユーザがボタンをクリックすると、それぞれに対応したマップビューに切り替わります。なお、ボタンの状態は簡単な条件文を利用しても追跡可能です。この場合は、別の getCurrentMapViewTypeメソッドを使用する必要があります。選択されたマップビュータイプは、そのボタンのテキストが太字で表示されます。

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

オリジナルボタンを利用して、他の地図機能を制御する方法について詳しくは、Yahoo! Maps Flash APIリファレンスマニュアル*を参照してください。

A–C

D–H

I–Z

プロジェクトセンター

コミュニティーリソース

ブログ

製品ドキュメンテーション

ダウンロード

サンプル

トレーニング＆書籍

ニュースレター

アーカイブ

ADC プログラム

追加リソース

目次

Using the Yahoo! Maps Flash API

マップビュー：サテライト・ハイブリッドとの切り替え