#BelajarGEE10 — Map Layout

Membuat Layout Peta di Google Earth Engine

Peta RBI Lembar 1707–442 (Gilimanuk) Skala 25K dari Inageoportal

Halo Semuanya,

Layouting adalah step terakhir yang dilakukan setelah melalui serangkaian pemrosesan data. Selain sebagai output dari pekerjaan pembuatan peta, layout yang baik dapat memperindah tampilan peta serta membuatnya seolah dapat ‘berbicara’. Sebab, informasi-informasi yang ada di dalam peta mampu diidentifikasi dan diinterpretasi dengan mudah oleh pembaca peta.

Saya akan melanjutkan script dari tulisan mengenai klasifikasi multispektral Google Earth Engine (GEE) disini, pertama-tama atur tata letak panel legenda menggunakan script dibawah ini.

//Ukuran dan Letak Panel legenda
var legenda = ui.Panel({
  style: {
    position: 'bottom-right',
    padding: '8px 25px'
  }
});

Keterangan :

• position : ‘bottom right’ : variabel untuk mengatur posisi panel legenda
• padding :’8px 25px’ : variabel pengaturan ukuran panel legenda

Variabel position dapat dikustomisasi posisinya sesuai dengan kebutuhan seperti pada gambar berikut.

pengaturan posisi panel legenda pada peta (GEE Guides)

Selanjutnya, tulis script berikut untuk membuat judul legenda

//Judul Legenda
var judul_legenda = ui.Label({
  value: 'Legenda',
  style: {
    fontWeight: 'bold',
    fontSize: '18px',
    margin: '0 0 4px 0',
    padding: '0'
    }
});

Keterangan :

• var judul_legenda : variabel nama perintah untuk membuat judul legenda
• value : teks atau label yang ditampilkan, dalam hal ini adalah Legenda. Bisa diubah sesuai dengan kebutuhan
• style : {…} : parameter untuk menentukan styling huruf pada label (font)
• fontWeight : parameter yang mengatur tingkat ketebalan font
• fontSize : kita dapat mengubah ukuran font dengan mengubah parameter ini
• margin : parameter pengaturan jarak antar huruf
• padding : jarak antara teks label Legenda dengan item dalam panel legenda

Lalu masukkan variabel judul legenda ke dalam panel legenda yang telah dibuat sebelumnya dan mengatur ukuran item di dalam legenda.

//Menambahkan Judul Legenda ke Dalam Panel
//Menentukan Styling Legenda
//Mewarnai Panel
//Mengatur Ukuran Item Legenda
legenda.add(judul_legenda);
var stylinglegenda = function(color, name) {
var colorBox = ui.Label({
style: {
backgroundColor: '#' + color,
padding: '8px',
margin: '0 0 4px 0'
}
});

Keterangan :

• legenda.add(judullegenda) : function untuk memasukkan label (judul_legenda) ke dalam panel
• var stylinglegenda = function(color, name) {...}: perintah dan fungsi yang mengatur item serta label dalam panel legenda
• backgroundColor : ‘#’ + color : parameter untuk mengganti warna item legenda, biarkan seperti ini karena nantinya akan ada perintah lebih lanjut
• padding : parameter ukuran item legenda
• margin : parameter lebar jarak item dengan legenda

Berikutnya buat label yang mendeskripsikan keterangan dari setiap item yang ada di dalam legenda.

//Membuat label pada item legenda
var description = ui.Label({
value: name,
style: {margin: '0 0 4px 6px'}
});
//Mengembalikan panel legenda
return ui.Panel({
widgets: [colorBox, description],
layout: ui.Panel.Layout.Flow('horizontal')
});
};

Keterangan :

Sama seperti sebelumnya, parameter margin script ini mengatur jarak antar teks dalam label item. Sedangkan return sederhananya berguna ketika kita memanggil suatu function dalam hal ini adalah ui.Panel, kita ingin mengembalikan nilai dari function tersebut.

Jadi, kedepannya apabila dalam script saya hanya menulis ui.Panel maka function tersebut bernilai sama dengan ui.Panel pada script pembuatan panel legenda paling awal serta ditambahkan parameter widgets dan layout. Selengkapnya mengenai return dalam javascript dapat dilihat pada tautan berikut.

Sekarang kita beri warna serta label pada masing-masing item legenda. Agar menyamakan warna item legenda dengan warna layer atau objek pada peta, buka pengaturan layer lalu copy kode warnanya. Jangan lupa pastikan urutan warna item serta nama label sudah sesuai supaya antara warna dengan keterangan objeknya tidak saling tertukar.

Memasukkan kode warna dan label item ke dalam legenda

//Warna item legenda
var warna_item =['ff0000', '0000ff', 'ffff00', 'ffffff', '008000'];
//Label item legenda
var label_legenda = ['Bangunan','Air','Sawah', 'Awan','Vegetasi'];

Masukkan pengaturan warna dan label ke dalam legenda dengan script berikut.

//Menambahkan warna dan item ke dalam panel legenda
for (var i = 0; i < 5; i++) {
  legenda.add(stylinglegenda(warna_item[i], label_legenda[i]));
  }

Keterangan :

Pada var i terdapat nilai 5 yang menunjukkan jumlah item dalam legenda dan dapat dikustomisasi,

Terakhir, masukkan legenda ke dalam peta, atau opsi kedua kita juga dapat mencetaknya di dalam Console.

//Menambahkan legenda (pilih salah satu saja)
Map.add(legenda); //Mencetak legenda di dalam peta
print(legenda); //Mencetak legenda di dalam Console

Setelah script di eksekusi kemudian akan menampilkan panel legenda yang telah kita buat.

Tampilan legenda pada peta

Tampilan legenda pada Console

Kesimpulan

Masih banyak improvisasi yang dapat diimplementasikan dalam hal layouting peta di GEE, apalagi jika jumlah layer atau objek pada peta cukup banyak. Hal ini membuat tampilan peta cukup kompleks sehingga membutuhkan penjelasan lebih terperinci seperti tambahan jenis legenda ataupun deskripsi lain.

Peta estimasi wilayah tergenang banjir serta kepadatan penduduk yang terdampak genangan Bulan Januari 2020 di Jabodetabek

Script klasifikasi multispektral beserta layouting peta, klik tautan ini untuk akses langsung dalam code editor

Referensi :

• Panels and Layouts | Google Earth Engine | Google Developers
• Widgets | Google Earth Engine | Google developers