Flexで地図表示

先日海外版Yahooで地図を表示させてみましたが、海外版のためどうしても日本の地図の詳細が弱い。
ってことで、今度はUMAPっというものを使ってみました。
UMAP(AS3.0)
http://www.afcomponents.com/components/umap_as3/
ActionScript3.0で動作するっとのことですので、Flexで動かしてみました。
http://moeten.info/flex/20080404_gmapTest/bin-release/main.html

やりかた
コンポーネントをサイトからダウンロード(会員登録が必要)
http://www.afcomponents.com/components/umap_as3/

You must agree to End User License Agreement
in order to proceed.

ページ右部分に表示されるチェックボタンをチェックして、会員登録すればOKです。
設定
ダウンロードして得られるSWCファイルをFlexプロジェクトのlibフォルダへコピーでOK

あとはチュートリアルを見ながらやると簡単です(ただし英語・・・
http://www.afcomponents.com/tutorials/umap_as3/?sort=most_recent&page=1
非常にわかりやすく簡単に設置できますので、読んでおく価値は十分にあります。
マイサンプル
アイコンを設置してウィンドウを表示。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import com.afcomponents.umap.events.OverlayEvent;
import com.afcomponents.umap.display.InfoWindow;
import com.afcomponents.umap.core.UMap;
import com.afcomponents.umap.styles.MarkerStyle;
import com.afcomponents.umap.styles.GeometryStyle;
import com.afcomponents.umap.display.markermanager.MarkerManager;
import com.afcomponents.umap.display.markermanager.ExpandedGroupPattern;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.overlays.Layer;
import com.afcomponents.umap.overlays.Polyline;
import com.afcomponents.umap.styles.GeometryStyle;
import com.afcomponents.umap.events.OverlayEvent;
//初期化関数
private function init():void{
    //地図の作成
    var umap:UMap = new UMap();
    //東京を中心に表示
    umap.setCenter( new LatLng( 35.68627 ,139.69487  ) , 14 );
    umap.setSize(900, 900);
    myUI.addChild( umap );
    //マーカーの設定
    var markMan:MarkerManager = new MarkerManager();
    markMan.expandedGroupRadius = 50;
    markMan.groupRadius         = 50;
    markMan.markerActualSize    = 10;
    markMan.markerZoomScale     = 0.9;
    markMan.fading              = true;
    markMan.autoClose           = true;
    markMan.animation           = true;
    //マーカーの設置
    var style:MarkerStyle = new MarkerStyle( { fill:GeometryStyle.RGB , fillRGB:0xFF0000 } );
    var tokyo:Marker      = new Marker( { position:new LatLng( 35.68627 ,139.69487 ) , index:"T" , name:"東京", autoInfo:false } , style );
    var japan:Layer       = new Layer();
    japan.addOverlay( tokyo );
    umap.addManager( markMan );
    umap.addOverlay( japan );
    markMan.addLayer( japan );
    //マーカークリック時イベント
    tokyo.addEventListener(OverlayEvent.CLICK, handleOver);
    function handleOver(event:Event=null):void {
           event.target.openInfoWindow({title: event.target.name +"だよ", autoCloseInfo: true});
    }
    //ラインを引く(お遊び
    var style2:GeometryStyle = new GeometryStyle();
    style2.stroke            = GeometryStyle.RGB;
    style2.strokeRGB         = 0xFF0000;
    style2.strokeAlpha       = .5;
    style2.strokeThickness   = 10;
    param        = new Object();
    param.points = new Array();
    param.points.push(new LatLng(35.68627 ,139.69487));
    param.points.push(new LatLng(35.68927 ,139.69977));
    param.name = "新宿駅から";
    var myLine:Polyline = new Polyline(param, style2);
    umap.addOverlay(myLine);
    //ウィンドウの設定(お遊び
    var param:Object = new Object();
    param.title       = "UMAPのテストだよ";
    param.content     = "コンテンツだよ";
    param.position    = new LatLng( 35.68927 ,139.69987 );
    var myWindow:InfoWindow = new InfoWindow(param);
    umap.addOverlay(myWindow);
    myWindow.open();
}
]]>
</mx:Script>
<mx:UIComponent id="myUI" width="100%" height="100%"/>
</mx:Application>