Jl. Dr. Setiabudi No.276A, Kota Bandung 40143
UPI-FPIPS-Logo-blok
From Map to Web : MEMBANGUN VISUALISASI SPASIAL INTERAKTIF MELALUI QGIS2WEB DAN BAHASA PEMROGRAMAN

Penulis: Ibrahim (SaIG, 2402175) 

Penyunting: Felicia Syifa’ Hermanu Putri (SaIG, 2504208)

Peta saat ini tidak lagi hanya hadir dalam bentuk lembaran kertas berbentuk 2D  atau tampilan digital yang sekadar memperlihatkan lokasi. Perkembangan teknologi geospasial telah membawa peta menjadi sebuah media interaktif yang dapat diakses dengan mudah melalui browser yang kita gunakan sehari-hari. Data spasial kini dapat dipadukan dengan teknologi web sehingga pengguna tidak hanya melihat informasi, tetapi juga dapat berinteraksi langsung dengan peta yang disajikan.

Dilihat dari perkembangan tersebut, Komunitas SCALE menghadirkan KRK 4: WEBER, sebuah rangkaian Kegiatan Rutin Komunitas yang membahas pemanfaatan teknologi web dalam penyajian informasi geospasial. Pada dua pekan awal, peserta diajak memahami proses transformasi dari proyek QGIS menjadi WebGIS interaktif hingga mengenal dasar-dasar bahasa pemrograman yang menjadi fondasi dalam pengembangan halaman web.

Pekan pertama memperkenalkan QGIS2Web sebagai jembatan antara perangkat lunak SIG dan teknologi web. Sementara itu, pekan kedua melanjutkan pembelajaran dengan memperkenalkan HTML, CSS, dan JavaScript sebagai dasar untuk membangun dan mengatur tampilan sebuah halaman web, dan pekan ketiga mempelajari integrasi bahasa Python dari Google Colaboratory dan Google Earth Engine. Ketiga materi tersebut menjadi tahapan penting untuk memahami bagaimana data spasial dapat dikemas menjadi sebuah visualisasi yang informatif, interaktif, dan mudah diakses. 

Pekan ke-1 (Kamis, 10 September 2026): Dari QGIS ke Web, Mengenal dan Memanfaatkan QGIS2Web 

Kegiatan ini diisi oleh pemateri yang sangat keren pastinya yaitu Gina Febyanti Sudjana (SaIG '25) dan Raditiya Hanif Alauddin (SaIG '25) 

Pada pertemuan pertama ini dilaksanakan di Gedung Garnadi Lt.4 Ruang 52, peserta diperkenalkan pada QGIS2Web, sebuah plugin pada QGIS yang memungkinkan proyek peta dibuat menjadi WebGIS tanpa harus membangun seluruh sistem dari awal menggunakan bahasa pemrograman. Kehadiran QGIS2Web menjadi salah satu cara praktis untuk memperkenalkan konsep WebGIS, terutama bagi pengguna yang sudah terbiasa melakukan pengolahan data spasial di QGIS. Pembahasan dimulai dari proses instalasi dan pengenalan QGIS2Web, kemudian dilanjutkan dengan menyiapkan data spasial yang akan digunakan dalam pembuatan WebGIS. Peserta juga dikenalkan dengan plugin QuickOSM untuk memperoleh data dari OpenStreetMap serta QuickMapServices untuk menambahkan berbagai basemap sebagai latar peta.

Setelah data tersedia, peserta mulai mempelajari bagaimana mengatur tampilan setiap layer. Proses ini mencakup pengaturan simbolisasi, warna, legenda, hingga informasi yang akan muncul pada pop-up ketika suatu objek pada peta dipilih. Tahapan tersebut menjadi penting karena WebGIS bukan hanya mengenai bagaimana data dapat ditampilkan, tetapi juga bagaimana informasi dapat disampaikan secara jelas kepada pengguna.

Salah satu bagian yang menarik dalam kegiatan ini adalah proses ekspor proyek QGIS menjadi WebGIS berbasis Leaflet. Dengan beberapa pengaturan pada QGIS2Web, proyek yang sebelumnya hanya dapat dibuka melalui perangkat lunak SIG dapat diubah menjadi halaman peta interaktif yang dapat dijalankan melalui browser.

Dok. Penulis

Pekan ke-2 (Rabu, 16 September 2026): Visualisasi Web Menggunakan HTML, CSS, dan JavaScript 

Setelah memahami bagaimana proyek QGIS dapat dibawa ke lingkungan web melalui QGIS2Web, pembelajaran dilanjutkan pada pekan kedua dengan materi “Visualisasi Web Menggunakan Bahasa Pemrograman HTML, CSS, dan JavaScript”. Kegiatan ini menghadirkan pemateri pemateri hebat yaitu, Ketua BSOK M. Fadhiil Al-Ghifaary (SaIG '24) dan Ketua Komunitas SCALE Sri Dewi Wahyuni (SaIG '24) sebagai pemateri.

Jika pada pekan sebelumnya peserta lebih banyak berinteraksi dengan QGIS dan plugin, pada pertemuan kedua peserta mulai diperkenalkan dengan dunia pemrograman web. HTML, CSS, dan JavaScript diperkenalkan sebagai tiga komponen penting yang memiliki fungsi berbeda, tetapi saling melengkapi dalam membangun sebuah halaman web.

HTML (HyperText Markup Language) diperkenalkan sebagai struktur dasar sebuah halaman web. Melalui HTML, peserta belajar bagaimana menyusun berbagai elemen yang akan ditampilkan pada halaman, seperti judul, teks, gambar, tombol, maupun bagian-bagian lainnya. Selanjutnya, CSS (Cascading Style Sheets) digunakan untuk mengatur bagaimana elemen-elemen tersebut ditampilkan. Peserta mulai memahami bahwa tampilan sebuah halaman web tidak hanya bergantung pada informasi yang dimuat, tetapi juga pada bagaimana informasi tersebut disusun dan diberikan gaya visual. Sementara itu, JavaScript diperkenalkan sebagai bahasa pemrograman yang dapat membuat halaman web menjadi lebih dinamis dan interaktif. Dengan JavaScript, sebuah halaman tidak hanya menjadi kumpulan informasi yang bersifat statis, tetapi dapat memberikan respons terhadap tindakan pengguna.

Pembelajaran pada pekan kedua menjadi tahap penting karena peserta mulai memahami logika di balik sebuah tampilan web. Jika QGIS2Web memberikan pengalaman bagaimana data spasial dapat diekspor menjadi WebGIS, maka HTML, CSS, dan JavaScript memberikan pemahaman lebih mendalam mengenai bagaimana sebuah halaman web dibangun dan dikembangkan. Pemateri juga menekankan pentingnya menyusun layout dan styling web secara runtut dan komprehensif. Peserta tidak hanya diarahkan untuk membuat halaman yang dapat berjalan, tetapi juga memahami bagaimana struktur dan tampilan halaman dapat dirancang agar lebih terorganisasi.

Dok. Penulis

Sesi praktik menjadi bagian yang tidak kalah menarik. Peserta dapat langsung mencoba konsep yang telah dijelaskan oleh pemateri, kemudian melihat perubahan yang terjadi pada halaman web berdasarkan kode yang ditulis. Proses tersebut membuat materi pemrograman yang pada awalnya terlihat cukup teknis menjadi lebih mudah dipahami karena peserta dapat melihat hubungan langsung antara kode dengan hasil visual yang ditampilkan. 

Dok. Penulis

Pekan ke-3 (Kamis, 24 September 2026): Pembuatan WebGIS Sederhana dengan bahasa Python

Memasuki pekan terakhir KRK 4: WEBER, internal BSOK diajak melangkah lebih jauh dalam memahami pengembangan WebGIS melalui materi “Pembuatan WebGIS Sederhana dengan Bahasa Python”. Kegiatan ini menghadirkan Isfan Fierzan Z.F.K (SaIG '24) dan Sri Dewi Wahyuni (SaIG '24) sebagai pemateri. 

Jika pada pekan pertama peserta belajar mengubah proyek QGIS menjadi WebGIS menggunakan QGIS2Web dan pada pekan kedua mulai mengenal struktur serta tampilan halaman web melalui HTML, CSS, dan JavaScript, maka pekan ketiga menjadi tahap untuk memperkenalkan Python sebagai salah satu bahasa pemrograman yang dapat dimanfaatkan dalam pengembangan WebGIS.

Pada pertemuan ini, peserta diperkenalkan dengan lingkungan Google Colab sebagai media untuk menjalankan kode Python secara daring. Penggunaan Google Colab memberikan pengalaman yang lebih praktis karena peserta tidak perlu melakukan instalasi lingkungan pemrograman yang kompleks pada perangkat masing-masing. Cukup dengan menggunakan akun Google, peserta dapat langsung mengakses notebook, menuliskan kode, menjalankannya, dan melihat hasilnya secara langsung.

Dok. Penulis

Dengan menggunakan Python, peserta mulai melihat bagaimana proses pemanggilan, pengolahan, dan visualisasi data dapat dilakukan melalui kode. Konsep tersebut menjadi pengalaman baru bagi peserta karena proses pembuatan peta tidak hanya dilakukan melalui antarmuka perangkat lunak SIG, tetapi juga dapat dilakukan melalui instruksi pemrograman.

Kegiatan ini juga memperkenalkan keterkaitan antara Google Colab dan Google Earth Engine (GEE). Keduanya dapat menjadi kombinasi yang menarik dalam pengolahan data geospasial berbasis komputasi cloud. Data penginderaan jauh maupun data spasial lainnya yang tersedia secara daring dapat diproses dan kemudian divisualisasikan untuk mendukung kebutuhan WebGIS.

Sesi hands-on menjadi bagian penting dalam pekan terakhir ini. Peserta tidak hanya menyimak penjelasan mengenai Python, tetapi juga mencoba menjalankan kode secara langsung, dan mempublikasikan webgis yang telah dibuat dalam GitHub repository.  Dari proses tersebut, peserta dapat memahami bahwa beberapa baris kode dapat digunakan untuk menghasilkan visualisasi spasial yang sebelumnya membutuhkan beberapa tahapan pengolahan secara manual dan dapat diakses oleh kalangan luas. 

Dok. Penulis

Sebagai rangkaian terakhir dalam perjalanan KRK Komunitas SCALE pada periode ini, WEBER menjadi penutup yang membawa pesan lebih dari sekadar pembelajaran mengenai teknologi. Tiga pekan yang telah dilalui menjadi ruang bagi para kontributor untuk mengenal cara baru dalam mengolah, menyajikan, dan mengembangkan informasi geospasial. Dari QGIS2Web, HTML, CSS, dan JavaScript, hingga Python dan Google Colab, setiap materi memberikan pengalaman yang berbeda sekaligus saling melengkapi. Lebih dari sekadar keterampilan teknis, setiap pertemuan juga menjadi ruang untuk berdiskusi, bertukar pengalaman, dan tumbuh bersama sebagai bagian dari komunitas.

Berakhirnya KRK 4: WEBER sekaligus menjadi penanda berakhirnya rangkaian KRK Komunitas SCALE pada periode ini. Namun, berakhirnya sebuah program kerja bukan berarti berakhirnya perjalanan. Setiap ilmu, pengalaman, diskusi, dan kebersamaan yang telah terbangun akan menjadi bekal untuk melangkah ke tahap berikutnya. Terima kasih kepada seluruh pemateri, kontributor, panitia, dan seluruh pihak yang telah membersamai perjalanan KRK SCALE selama satu periode. Semoga apa yang telah dipelajari tidak berhenti di ruang kelas dan forum komunitas, tetapi terus berkembang menjadi karya dan kontribusi nyata bagi dunia geospasial. Sampai bertemu di perjalanan berikutnya, karena setiap peta yang kita buat selalu memiliki cerita untuk dibawa lebih jauh.

Learning, Planning, Mapping! 

Leave a Reply

Your email address will not be published. Required fields are marked *