Tunjuk Banyak Titik di Laut Indonesia

Kamas Muhammad <kamas@lc.vlsm.org>


Tidak ada copyright apapun dalam dukumen ini, anda bebas menyalin, mencetak, maupun memodifikasi. Saran, koreksi, kritik, kesalahan ketik, maupun ucapan silakan dikirimkan ke email tersebut diatas. Terima Kasih.

Asal Usulnya

Gerombolan Siberat merupakan grup penjahat hebat yang telah mencuri banyak harta karun. Berpeti-peti emas, perak, dan besi tua telah mereka kumpulkan dalam aksinya di hampir seluruh pesisir pulau Kalimantan. Kawan saya adalah salah satu petugas yang sehari-hari bertugas di salah satu kota di Bali, yang menjadi pusat pengamatan pergerakan gerombolan ini, terutama di kawasan perairan Indonesia. Berdasarkan analisanya (yang mengamati kecepatan angin, tinggi gelombang laut, suhu air laut, dan berbagai macam data lainnya) dia telah berhasil mengumpulkan titik-titik koordinat tempat gerombolan tersebut menyembunyikan peti harta karun hasil rampasannya.

Entah itu dia menganalisa dengan cara ilmiah atau menggunakan ilmu nujum, titik-titik lokasinya cukup membuat saya kagum, karena juga menyertakan perkiraan kondisi peti harta karun yaitu terapung, atau pecah. Sudahlah, nggak penting juga gimana cara dia bisa menentukan kondisi petinya. Yang pasti dia lagi sibuk cari titik-titik yang lain, dan minta tolong kepada saya untuk membuatkan visualisasi titik-titiknya di peta.

Data Tersedia

Saya diberi hak untuk mengakses database perkiraan pergerakan gerombolan itu. Isi tabelnya kurang lebih begini:

Lokasi Lintang Bujur Kondisi
Kalimantan 2.29 109.11 t
Kalimantan -1.76 117.53 t
Kalimantan -4.61 116.33 p
Kalimantan -2.80 117 p

Ya sebenarnya masih banyak data yang lain seIndonesia, tapi ambil yang bagian kalimantan saja lah. Toh ya gerombolan itu tampaknya bergerak menggunakan transportasi air, jadi pasti ndak bisa jauh-jauh dari Kalimantan.

Maunya

Di atas maunya sudah ditulis: Bikin titik-titik di peta supaya gampang dilihat he..he..he..

Solusinya

Bikin peta dan titik-titik pake ArcView? Huahahahha... Aku yang ga bisa :P

Yang aku bisa cuma main-main sedikit PHP dan memanfaatkan API yang disediakan oleh Google Map. Karena jumlah titik yang akan ditampilkan cukup banyak, entah aku yang salah baca atau apa, intinya ndak bisa dengan serta merta semua titik itu ditunjukkan hanya dengan buka url http://maps.google.com/?q=LatLng. Selain itu dengan model asal ketik begitu tidak bisa ada tanda mana peti yang pecah dan mana yang tenggelam.

Segala macam referensinya dari A-Z, 0-9 ada di halaman Google Maps API. Karena itu semua berbau javascript, jadi ya perlu ada sedikit utak utik supaya script PHP ku bisa menuliskan koordinat-koordinat itu ke dalam notasi JavaScript Array. Soal PHP ndak dibahas di sini, lagian isinya ya cuma printf :P

Ada dua bagian penting yang berkaitan dengan pembuatan peta. Yang pertama tentu saja div untuk menampung peta, dan yang kedua adalah javascript yang bertugas menggambar peta di div yang telah disediakan serta menggambarkan seluruh titik-titik yang sudah diambil dari database.

Div-nya kodenya begini:

<div id="map_canvas" style="width:100%; height: 400px;"></div>

Udah, segitu aja cukup. Kalau nama ID ndak cocok, ya silakan ganti yang lain. Soal styling mau inline begitu atau pakai CSS terpisah juga terserah, yang penting ada lebarnya, ada tingginya. Bagian yang lebih penting ada di script di bawah ini. Di masing-masing bagian sudah ada sedikit komentar, mestinya untuk nggambar dikit-dikit udah cukup. Kalau mau dibikin lebih ruwet lagi juga bisa (misal: ikonnya ditambah bayangan, kalo diklik keluar data detil, dsb).

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
	// Ini adalah daftar koordinat peti harta karun yang dijatuhkan dari
	// pesawat. Format datanya adalah [status, lintang, bujur]. Data ini
	// disajikan dalam bentuk JavaScript Array. Di aplikasiku koordinat
	// dan status ini ditulis oleh PHP.
	var lokasi = [
		["t", 2.29, 109.11],["t", -1.76, 117.53],["p", -4.61, 116.33],["p", -2.80, 117.00]
	];
	
	// Dua variabel di bawah adalah URL untuk mengakses gambar pentol.
	// Untuk yang terapung warnanya merah, dan peti yang pecah warnanya biru.
	var iterapung = 'poin-merah.png';
	var ipecah = 'poin-biru.png';
	
	// Variabel 'indonesia', berisi koordinat titik (nyaris) tengah Indonesia.
	// Penentuannya cukup ngawur, klik 1 titik di tengah peta, dan intip data
	// koordinatnya. Semua data koordinat direpresentasikan sebagai js Object
	// LatLng.
	var indonesia = new google.maps.LatLng( -1.889306,114.697266 );
	
	// Variabel myOptions menentukan panel kontrol apa saja yang nanti akan 
	// ditampilkan di peta. Menurut referensi API google maps, yang wajib dise-
	// butkan di sini hanya zoom dan mapTypeId. Sisanya boleh diketik, nggak
	// juga nggak apa-apa.
	var myOptions = {
		center: indonesia,
		panControl: false,
		zoomControl: true,
		mapTypeControl: true,
		scaleControl: true,
		streetViewControl: false,
		overviewMapControl: false,
		zoom: 5,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	
	// Bikin objek peta di halaman kita. "map_canvas" adalah ID div tempat
	// petanya dimunculkan. Selain objek peta buat juga objek LatLngBounds
	// yang dipakai untuk mengumpulkan beberapa LatLng menjadi satu, sehingga
	// titik tengah dan zoom level yang cocok bisa diperhitungkan.
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var latbounds = new google.maps.LatLngBounds();
	
	var marker, i, tulisan;
	var gambar;
	
	// Inisiasi objek infowindow agar titik-titik di peta bisa diklik. Objek ini
	// cukup satu, kemudian dipakai bergantian di masing-masing titik lokasi.
	infowindow = new google.maps.InfoWindow({
		content: "tunggu..."
	});

	// Memproses masing-masing titik yang tersimpan pada array lokasi[].
	for( i = 0; i < lokasi.length; i++ ) {
		// Seperti halnya variabel "indonesia" di atas, masing-masing lokasi
		// dibikin obj LatLng dan disimpan di dalam variabel nnm. Kemudian
		// lihat status jatuhnya peti. Kalau terapung warna titiknya merah,
		// sedangkan kalau pecah warna titiknya biru.
		var nnm = new google.maps.LatLng( lokasi[i][1], lokasi[i][2] );
		if( lokasi[i][0] == 't' ) {
			gambar = iterapung;
			tulisan = 'Di sini peti hartanya terapung';
		} else {
			gambar = ipecah;
			tulisan = 'Di sini peti hartanya pecah';
		}
		
		// Titik-titik di peta diimplementasikan sebagai objek Marker. Buat
		// semua titik menggunakan data-data yang telah diolah di atas.
		marker = new google.maps.Marker({
			position: nnm,
			map: map,
			icon: gambar,
			html: tulisan + '<br>' + nnm.toString()
		});
		
		// Masukkan masing-masing titik ke dalam wadah LatLngBounds untuk
		// diproses setelah seluruh pengolahan titik koordinat selesai.
		latbounds.extend( nnm );
		
		// Buat event listener untuk memunculkan infowindow ketika titik
		// diklik. Isinya diambil dari opsi html ketika membuat marker.
		google.maps.event.addListener(marker, 'click', function () {
			// where I have added .html to the marker object.
			infowindow.setContent(this.html);
			infowindow.open(map, this);
		});
	}
	
	// Nah, di sinilah pengolahan titik-titik itu terjadi. Kumpulan koordinat
	// yang disimpan di LatLngBounds bisa dihitung untuk mencari titik tengah
	// dan zoom yang tepat untuk menampilkan seluruh titik dalam peta. Operasi
	// menengahkan dan mengatur zoom dilakukan oleh objek Map, menggunakan data
	// yang disediakan oleh LatLngBounds.
	map.setCenter( latbounds.getCenter() );
	map.fitBounds( latbounds );
	
	// Kalau penentuan zoom level terlalu tinggi dan hanya ada satu titik,
	// maka titik itu akan tampil sebagai satu titik terasing di tengah warna
	// biru. Agar masih terlihat pulau-pulau di sekitarnya, kurangi zoom level
	// menjadi "7". Silakan coba bereksperimen apa jadinya kalau zoomnya 20 :D
	if( map.getZoom() > 7 ) {
		map.setZoom( 7 );
	}
}

// Panggil peta ketika halaman selesai diload.
window.onload = initialize();
</script> 

Hasilnya mana? Scroll aja ke bawah halaman ini, mestinya ada peta lumayan besar.

Penutup

Jadi, apakah peta harta karun ini berguna untuk mengejar gerombolan siberat? Wah ya ndak tau ya, yang penting petanya sudah jadi. Kalau anda ingin mencoba peruntungan dengan menyelam di titik-titik itu ya terserah. Kalau dimakan hiu saya nggak tanggung!

Kurang Beruntung

Ketika peta ini saya masukkan ke salah satu aplikasi saya yang menggunakan Twitter Bootstrap (berisi CSS framework dan Javascript plugins), InfoWindow masing-masing titik tersebut tampilannya jadi juelek buwanget. Saya berprasangka bahwa aturan-aturan di dalam CSS itu turut mempengaruhi tampilan tulisan di peta. Solusi ngawur yang ada di kepala saya yang belum juga saya buktikan adalah memindahkan peta itu di dalam sebuah iframe. Kalau ada yang punya solusi lebih baik, kalau memang berkenan, mohon saya dikasih bocoran ya, thx

Update: Masalah di atas udah beres. Penyebabnya adalah si bootstrap bikin style max-width: 100% pada komponen img. Dengan sedikit CSS macam #map_canvas img { max-width: none } gambarnya udah jadi lurus manis imut kayak aselinyah.