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 UMapinitPos
, 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 markerlat
&long
: variabel untuk menampung koordinat yang ada di setiap elemen di dalammapData
infoStyle
: objek yang mewakili content style dari popup panel yang muncul waktu marker diklik. Saya gunakan untuk mengaktifkan mode HTML.infoTitle
: teks untuk judul popupinfoString
: 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
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 🙂
@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 🙂