Membuat Web App “Hasil” Mapping Area

Padangsidimpuan, 02 Juli 2026.

Silahkan akses ke Hasil Mapping Area. Hasil Mapping Area ini merupakan hasil pengolahan data dari Web App Mapping Area kita sebelumnya. Saat ini, Hasil Mapping Area berbentuk web ini sudah dibuat bersifat publik dan dapat Anda akses tanpa username dan password. Namun tidak disediakan atau diatur untuk mode mobile (layar kecil). Kami sarankan buka web app Hasil Mapping area ini di Personal Computer (PC) Anda untuk pengalaman UI yang baik. Harap Maklum.

Fitur Hasil Mapping Area

Kali ini, data yang disajikan adalah murni hasil kegiatan Mapping Area yang diolah dalam code backend dan frontend untuk ditampilkan di web app. Peta Leaflet dari OpenStreetMap digunakan sebagai Dasar Peta. Kemudian mengubah data array of object (data dari kolom Polygon) menjadi array of array untuk dibaca oleh web app (juga dikenali leaflet) dan diubah menjadi kotak dan informasi lain yang dapat Anda lihat di layar. Termasuk data Perimeter yang Anda lihat di panel sebelah kiri. Jika Anda ingin melakukan pengukuran jarak antara 1 titik dengan titik lain saja, Anda juga sudah diberikan tool untuk melihat jaraknya. Artinya, saya telah menambahkan fitur jarak. Singkatnya, Hasil Mapping Area ini memiliki;

  1. Adanya panel di sebelah kiri untuk dipilih secara langsung area yang sudah di mapping.
  2. Fitur “pengukuran jarak” interaktif.
  3. Informasi Perimeter (jarak keliling) di bagian panel.
  4. Shortcut Keyboard. Jika anda membukanya di PC, Anda dapat menekan tombol M di keyboard Anda untuk mengaktifkan/menonaktifkan mode pengukuran. Menekan tombol Esc di keyboard akan membatalkan pengukuran.

Disclaimer.

Aplikasi ini tidak berafiliasi dengan perusahaan manapun dan tidak bermaksud meniru fasilitas dan fungsi dari aplikasi berbayar atau aplikasi gratis manapun. Web App ini sengaja dibuat menurut penafsiran penulis untuk kebutuhan penyajian data hasil olahan dari kegiatan Mapping Area yang sesuai dengan kebutuhan penulis.

Pembuatan Web App “Hasil” Mapping Area.

  1. Buatlah File Spreadsheet baru.
  2. Di dalam Spreadsheet tersebut, buat Sheet bernama Polygon.
  3. Isi Sheet Polygon. Copy seluruh isi data kolom Polygon dari Spreadsheet Mapping Area ke Sheet Polygon di File Baru ini. Bagi Anda yang telah melakukan pembuatan Web App Mapping Area sebagaimana tulisan sebelumnya, Anda dapat mengcopy seluruh isi data. Bagi yang belum, saya tidak menyarankan untuk menggunakan code yang disediakan di judul tulisan ini. Kenapa harus file baru?. Karena file lama akan terpengaruh code apps script yang kita buat. Jika Anda mampu menggabungkannya ke Aplikasi Mapping Area silahkan saja.
  4. Di Spreadsheet, cari menu Ekstensi, klik dan kemudian pilih Apps Script. Anda akan dibukakan Tab baru / Halaman baru yang merupakan halaman pengalihan ke Aplikasi Google Apps Script Editor.
  5. Di Apps Script, klik Kode.gs (sebagian akan melihat Code.gs di bagian kiri, tergantung bahasa akun google Anda). Hapus semua kode bawaan yang ada di dalam Kode.gs dan ganti dengan code dari file Kode.gs.
  6. Masih di Apps Script, buatlah File baru dengan mengklik tanda “+” dan pilih HTML, kemudian beri nama index (jangan tambahkan “.html” karena akan otomatis dibuatkan google, cukup “index”). Pada halaman Login.html yang muncul, hapus seluruh kode bawaan yang sudah ada di dalamnya dan ganti dengan code dari file index.html.
  7. Jangan lupa simpan seluruh kode yang telah Anda copy-paste.
  8. Pada tampilan Apps Script, klik tombol Terapkan (Deploy) di kanan atas, kemudian pilih Terapkan baru (New Deployment).
  9. Klik ikon roda gigi (Jenis konfigurasi), kemudian pilih Aplikasi web. Lakukan pengisian dan pengaturan di jendela yang muncul sebagai berikut.
    • Deskripsi : versi 1.0 (bisa anda namai secara bebas).
    • Jalankan sebagai: Diri Anda sendiri (Email Anda).
    • Yang memiliki akses: Pilih Siapa saja / Anyone (agar pengguna lain/HP lain bisa membuka tautan login).
  10. Klik Terapkan. Sistem akan meminta otorisasi akses data spreadsheet Anda pertama kali. Pilih akun Google Anda, klik Advanced / Lanjutan, Klik Go to… (unsafe) / Buka… (tidak aman), lalu klik Allow / Izinkan.
  11. Setelah sukses, Anda akan mendapatkan URL Aplikasi Web (Bukan Library yang di copy ya..!). Salin URL Aplikasi Web tersebut dan jalankan di browser laptop atau PC Anda.

Pengujian.

Kegiatan pengujian dimaksudkan untuk memastikan code yang Anda copy-paste benar-benar dapat dieksekusi sebagaimana mestinya. Sehingga, ketika anda membuka link dan diarahkan ke halaman web app berjalan lancar dan menampilkan data sebagaimana direncanakan dalam code. Lakukan pengujian di PC Anda untuk pengalaman yang lebih baik.

Penutup.

  1. Silahkan gunakan dan modifikasi code yang ada sesuai kebutuhan jika Anda memiliki kemampuan Google Apps Script Developer. Seluruh code yang ada di dalam dan/atau dikaitkan dengan tulisan ini bersifat gratis dan tidak mengikat. Oleh sebab itu, segala KEUNTUNGAN DAN KERUGIAN penggunaan, pemanfaatan dan sebagainya di luar tanggung jawab saya selaku penulis.
  2. Jika Anda tidak mengisi Spreasheet Anda dengan data yang benar, maka halaman mungkin tidak berfungsi sebagaimana mestinya.
  3. Web App ini bersifat publik, artinya, siapa saja bisa melihat tampilan web tanpa perlu login sama sekali, selama mereka memiliki Link URL Apps Script atau link pengalihannya.
  4. Selaku penulis, saya dibebaskan dari segala tuntutan terkait seluruh tulisan saya di artikel ini dan seluruh artikel saya di web ini, sebagaimana Anda dibebaskan dari segala tuntutan karena belajar atau tidak dari seluruh tulisan saya.
Scroll to Top