Tutorial Menampilkan Area Polygon pada Android Maps V2

Last Updated on 11 years by Mas Herdi

Hey guys. Sebenarnya banyak hal yang bisa kita lakukan pada Android Maps API v2, setelah kemarin kita belajar tentang bagaimana cara menampilkan rute pada Android Maps, maka kali ini kita akan belajar untuk menggambar polygon pada Android Maps. Polygon bisa dikatakan merupakan sebuah area dengan bentuk yang tidak beraturan dan mempunyai batas-batas berupa koordinat.

Android Maps V2 Draw Polygon

Format polygon sendiri yang dicontohkan pada dokumentasi Google Maps Android API V2 adalah seperti berikut :

 GoogleMap map;
 // ... get a map.
 // Add a triangle in the Gulf of Guinea
 Polygon polygon = map.addPolygon(new PolygonOptions()
     .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(0, 0))
     .strokeColor(Color.RED)
     .fillColor(Color.BLUE));

Pada bagian addPolygon() kita diharuskan untuk menambahkan banyak koordinat-koordinat yang nantinya akan digunakan untuk menggambar batas dari polygon tersebut. Tentu kita tidak ingin menambahkan koordinat tersebut satu persatu, atau melakukan random koordinat. Karena itu kalian harus mempunyai akses ke suatu data atau layanan yang akan memberikan ke kalian koordinat-koordinat secara cuma-cuma :D, yang nantinya akan digunakan untuk membuat polygon.

Di kasus ini, saya akan membuat suatu polygon untuk menentukan batas kelurahan dari suatu titik koordinat tertentu, di seluruh Indonesia. Jadi awal mulanya kita akan melakukan long click pada suatu titik di peta, kemudian aplikasi akan mengirimkan data  koordinat tersebut ke server rahasia saya. 😀 Lalu server akan membalasnya dengan mengirimkan balik data batas kelurahan berformat JSON. Berikut ini adalah kode untuk men-set LongClickListener pada peta, dan memunculkan alert dialog

 GoogleMap map;
 // ... get a map.
// Map set on long click listener
map.setOnMapLongClickListener(new OnMapLongClickListener() {
	@Override
	public void onMapLongClick(final LatLng point) {
		builder.setTitle("Mark this place");
		builder.setSingleChoiceItems(items, -1,	new DialogInterface.OnClickListener() {
			public void onClick(DialogInterface dialog, int item) {
				switch (item) {
					// ...
					case 9:
// download polygon from server
		server.downloadPolygon(point.latitude,point.longitude);
						break;
						}
				dialog.dismiss();
			}
		});
		builder.show();
	}
});

Setelah data polygon didapatkan dari server, maka yang harus dilakukan selanjutnya adalah memparsing data polygon yang berupa JSON tersebut ke dalam format yang sesuai untuk Java. Kode parsingnya walaupun saya post di sini, belum tentu kalian mengerti :D. Tapi intinya untuk memasukkan data tersebut ke dalam method addPolygon(PolygonOptions) sesuai format di atas, kode inilah yang saya gunakan.

GoogleMap map;
PolygonOptions rectOptions = new PolygonOptions();
//... parsing code
String[][] coords = new String[jSONPolygon.length][];
//... parsing JSON code
for (int n = 0; n < coords.length; n++) {
	for (int m = 0; m <= 2; m++) {
	// menambahkan koordinat satu persatu ke PolygonOptions
	rectOptions.add(new LatLng(Double.parseDouble(coords[n][1]),
                                   Double.parseDouble(coords[n][0])));
	}
}

// menambahkan warna #AARRGGBB pada polygon dan garis tepi
rectOptions.fillColor(Color.parseColor("#8005B7E8")).strokeWidth(5).strokeColor(Color.CYAN);

// menambahkan polygon yang telah dibuat pada peta
map.addPolygon(rectOptions);

Setelah jSON berhasil di-parse, maka data koordinatnya akan digunakan untuk membuat polygon tersebut. Kemudian untuk mengatur warna polygon, garis tepi, dan sebagainya, digunakan kelas PolygonOptions. Kelas itu juga digunakan untuk menyimpan data koordinat batas kelurahan yang kita dapat dari jSON.

Jika semua data sudah didapat, maka yang terakhir adalah menampilkannya di peta 🙂

Dialog box untuk memilih “dsiplay border”

muncul deh border polygon yang diinginkan 😀

Menampilkan batas kelurahan karet semanggi

Demikian. 🙂 Semoga berguna, asal ada data koordinatnya, maka menampilkan polygon berupa batas kelurahan, kecamatan, dan sebagainya bisa dilakukan.