Peta Interaktif dengan UMap

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.

UMap Demo

Click to see the demo

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.

fd-project

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

→ UMap Demo Project File

Also in this category ...


2 Comments

  1. Wah keren tutorialnya, baru tahu ada komponen ini … thx byk ^^

    Btw, kaget waktu lihat websitenya koq tiba2 jadi putih 🙂 ternyata pindahan toh ^^

    Btw mas, waktu saya mau nulis comment, di bagian website itu ternyata harus ngasih http:// dulu, sy masukkan tanpa itu keluar peringatan 🙂

  2. @Adi Nugroho
    Iya pindah ke WP biar lebih cepet & enak kalo nulis tutorial.

    Comment form nanti aku liat lagi. Ga gitu ngerti WP, maklum masih newbie 🙂

Comments are closed.