Demo kali ini adalah mengenai pembuatan aplikasi peta interaktif dengan menggunakan komponen gratisan dari AFComponents yaitu UMap. Di sini saya membuat aplikasi untuk menampilkan peta Pulau Jawa dan meletakkan markers di kota-kota besar (Jakarta, Surabaya, Semarang, Bandung, dan Yogya ) yang jika diklik akan menampilkan nama kota dan logonya.

Peralatan

• UMap , tersedia versi Flash (.mxp) dan Flex (.swc)
• Flex SDK
• FlashDevelop

Project Setup

Setelah saya unduh UMap_Flex.swc, saya buat project di FlashDevelop lalu saya kopi file swc tersebut  ke dalam direktori “lib/” dan saya tambahkan file .swc itu ke dalam library path.

Variabel

Pertama, saya buat 3 buah variabel yaitu :

• mapData yaitu sumber data yang akan ditampilkan berisi nama kota, logo, dan koordinat ( dari wikipedia )
• map, objek UMap
• initPos, posisi awal map (center point)

public var map:UMap;

public var mapData:Array = [
	{kota:"Surabaya",logo:"logo/surabaya.jpg",loc:"-7.233333, 112.733333"},
	{kota:"Jakarta", logo:"logo/jakarta.jpg",loc:"-6.266667, 106.8"},
	{kota:"Bandung", logo:"logo/bandung.jpg",loc:"-6.95, 107.566667"},
	{kota:"Yogyakarta", logo:"logo/yogyakarta.jpg",loc:"-7.801389, 110.364444" },
	{kota:"Semarang",logo:"logo/semarang.jpg",loc:"-6.966667, 110.416667"}
]

//center map to semarang
public var initPos:LatLng = new LatLng( -6.966667, 110.416667);

public function Main():void {
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
}

init() & onReadyMap()

Di dalam init() saya mengeset ukuran stage, menginstansiasi objek UMap dan mengeset onReadyMap() sebagai event handler untuk MapEvent.READY.

onReadyMap() saya gunakan untuk mengeset ukuran map, disamakan dengan ukuran stage. Kemudian zoom level, posisi awal (center), dan menambahkan kontrol. Terakhir saya panggil createMarkers() setelah saya tambahkan map ke dalam DisplayList.

private function init(e:Event = null):void{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	// entry point
	
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.stageWidth = 600;
	stage.stageHeight = 400;
	
	map = new UMap();			
	map.addEventListener(MapEvent.READY, onReadyMap);
	
}

private function onReadyMap(e:MapEvent):void {
	
	map.setSize(stage.stageWidth, stage.stageHeight);
	map.setZoom(6);
	map.setCenter(initPos);
	map.addControl( new ZoomControl());
	map.addControl( new PositionControl());
	map.addControl( new MapTypeControl());
	
	addChild(map);
	
	createMarkers();
}

createMarkers()

Function ini adalah yang paling kompleks. Di sini saya menampilkan data dari mapData sebagai marker di atas map.

• pos : variabel berisi koordinat geografis dalam bentuk desimal (latitude & longitude) yang saya gunakan untuk posisi marker
• lat & long : variabel untuk menampung koordinat yang ada di setiap elemen di dalam mapData
• infoStyle : objek yang mewakili content style dari popup panel yang muncul waktu marker diklik. Saya gunakan untuk mengaktifkan mode HTML.
• infoTitle : teks untuk judul popup
• infoString : isi popup, berupa teks html

private function createMarkers():void {
	
	var marker:Marker;
	var pos:LatLng;
	var lat:Number;
	var long:Number;
	
	//info popup
	var infoTitle:String;
	var infoContent:String;
	//enable HTML content
	var infoStyle:InfoWindowStyle = new InfoWindowStyle();
	infoStyle.contentStyle.html = true;
	
	var i:int = mapData.length;
	
	while (i--) {
		lat = Number(String(mapData[i]['loc']).split(",")[0]);
		long = Number(String(mapData[i]['loc']).split(",")[1]);
		pos = new LatLng(lat, long);
		
		//create new marker
		marker = new Marker();
		marker.position = pos;
		marker.buttonMode = marker.useHandCursor = true;
		marker.infoStyle = infoStyle;
		
		infoTitle = mapData[i]['kota'];
		infoContent = "";
		
		marker.infoParam = {title:infoTitle, content:infoContent };
		
		map.addOverlay(marker);
	}
	
}

Download

[download id=”1″]

Also in this category ...

• » Easy Undo & Redo in ActionScript
• » AS3Isolib Game : Veer
• » Class Generator Flash Extension
• » Isometric Helper Flash Extension
• » as3isolib on playbook, first look