Peta Interaktif dengan UMap

Demo kali ini adalah meng­enai pem­buatan aplikasi peta interak­tif dengan meng­gunakan kom­ponen gratisan dari AFCom­ponents yaitu UMap. Di sini saya mem­buat aplikasi untuk menam­pilkan peta Pulau Jawa dan meletakkan mar­kers di kota-kota besar (Jakarta, Surabaya, Semarang, Ban­dung, dan Yogya ) yang jika diklik akan menam­pilkan nama kota dan logonya.

Per­alatan

• UMap , ter­sedia 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 ter­sebut  ke dalam direk­tori “lib/” dan saya tam­bahkan file .swc itu ke dalam library path.

Variabel

Per­tama, saya buat 3 buah variabel yaitu :

• mapData yaitu sum­ber data yang akan ditam­pilkan ber­isi nama kota, logo, dan koordinat ( dari wikipedia )
• map, objek UMap
• initPos, posisi awal map (cen­ter 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 meng­eset ukuran stage, meng­in­stan­siasi objek UMap dan meng­eset onReadyMap() seba­gai event han­dler untuk MapEvent.READY.

onReadyMap() saya gunakan untuk meng­eset ukuran map, disamakan dengan ukuran stage. Kemudian zoom level, posisi awal (cen­ter), dan menam­bahkan kon­trol. Ter­akhir saya pang­gil createMarkers() setelah saya tam­bahkan 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();
}

createMar­kers()

Fun­ction ini adalah yang paling kom­pleks. Di sini saya menam­pilkan data dari mapData seba­gai mar­ker di atas map.

• pos : variabel ber­isi koordinat geografis dalam ben­tuk desimal (latitude & longitude) yang saya gunakan untuk posisi mar­ker
• lat & long : variabel untuk menam­pung koordinat yang ada di setiap elemen di dalam mapData
• infoStyle : objek yang mewakili con­tent style dari popup panel yang mun­cul waktu mar­ker diklik. Saya gunakan untuk meng­ak­tifkan mode HTML.
• infoTitle : teks untuk judul popup
• infoString : isi popup, ber­upa 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

→ UMap Demo Project File

Also in this category …

• » Scat­tered Gallery
• » Trac­king Aplikasi Flash dengan Google Analytics
• » Manipulasi Teks­tur Collada (DAE)
• » Bekerja dengan FlashDevelop, Flex SDK, dan Flash
• » Auto-scroll Text Area

2 Responses to “Peta Interaktif dengan UMap”

1. Adi Nugroho says:

   May 2, 2009 at 9:43 am

   Wah keren tutorial­nya, baru tahu ada kom­ponen ini … thx byk ^^

   Btw, kaget waktu lihat websitenya koq tiba2 jadi putih ter­nyata pin­dahan toh ^^

   Btw mas, waktu saya mau nulis com­ment, di bagian website itu ter­nyata harus ngasih http:// dulu, sy masukkan tanpa itu keluar per­ingatan
2. Anggie Bratadinata says:

   May 2, 2009 at 11:35 am

   @Adi Nugroho
   Iya pin­dah ke WP biar lebih cepet & enak kalo nulis tutorial.

   Com­ment form nanti aku liat lagi. Ga gitu ngerti WP, maklum masih newbie