Analisis dan Perancangan Sistem Informasi Geografis Berbasis Web untuk Integrasi dan Visualisasi Data Spasial pada Bappeda Kota Surabaya

Paulus Calep Sandria Saputra; Nony Yonindah; Nathanael Kristian Sujarwo; Mochammad Wahyu Aditya; Retno Mumpuni

doi:10.31004/riggs.v5i2.10642

Authors

Paulus Calep Sandria Saputra Universitas Pembangunan Nasional "Veteran" Jawa Timur
Nony Yonindah Universitas Pembangunan Nasional "Veteran" Jawa Timur
Nathanael Kristian Sujarwo Universitas Pembangunan Nasional "Veteran" Jawa Timur
Mochammad Wahyu Aditya Universitas Pembangunan Nasional "Veteran" Jawa Timur
Retno Mumpuni Universitas Pembangunan Nasional "Veteran" Jawa Timur

DOI:

https://doi.org/10.31004/riggs.v5i2.10642

Keywords:

WebGIS, Leaflet.js, Sistem Informasi Spasial, Turf.js, Bappeda Surabaya

Abstract

Sesuai Peraturan Walikota Surabaya Nomor 88 Tahun 2021, Badan Perencanaan Pembangunan Daerah (Bappeda) Kota Surabaya mengemban tugas strategis menyusun dokumen perencanaan pembangunan dan menyediakan informasi kebijakan. Namun, data spasial sektoral penting seperti persebaran fasilitas pendidikan, pengelolaan persampahan, dan infrastruktur perhubungan masih tersebar dan dikelola terpisah oleh Dinas Pendidikan, Dinas Lingkungan Hidup, serta Dinas Perhubungan. Penelitian ini bertujuan untuk mengimplementasikan arsitektur front-end dan visualisasi data spasial berbasis Web-based Geographic Information System (WebGIS) menggunakan Leaflet.js pada platform terpadu bernama SIDAPETA (Sistem Informasi Data Peta) Surabaya. Platform ini dikembangkan secara kolaboratif menggunakan Laravel di sisi backend, serta Leaflet.js, Turf.js, dan ApexCharts di sisi frontend. Sistem ini mengintegrasikan 26 layer data spasial yang dikelompokkan ke dalam 7 kategori, yaitu Batas Wilayah, Infrastruktur Perkotaan, Pendidikan, Persampahan & Lingkungan, Fasilitas Umum, Demografi Kependudukan, serta Pompa & Saluran Air, dan diakses secara on-demand (lazy-loading). Untuk mengatasi isu performa pada browser, diterapkan sistem caching frontend (geoJsonStore) yang berhasil memangkas waktu muat ulang memori hingga 95,38%. Platform ini juga mengintegrasikan komputasi spasial tingkat lanjut di sisi klien (client-side) berbasis Turf.js, meliputi cartographic masking, choropleth map, heatmap kelurahan, dan algoritma K-Means Clustering untuk rekomendasi lokasi fasilitas publik baru dengan penempelan (snapping) ke jaringan jalan. Pengujian unit, lintas peramban (Chrome, Firefox, Edge, Safari), dan User Acceptance Testing (UAT) bersama Bappeda Kota Surabaya menunjukkan status lulus (PASS). WebGIS SIDAPETA telah dideploy ke server produksi Bappeda sebagai instrumen pendukung keputusan perencanaan pembangunan kota berbasis data spasial yang transparan, interaktif.

Downloads

Download data is not yet available.

References

[1] F. Q. Aditya, “Perancangan Sistem WebGIS untuk Visualisasi Data Wilayah, Potensi Daerah, dan Infrastruktur Strategis di Bappeda Sulawesi Tenggara,” vol. 19, no. 2, pp. 305–310, 2024.

[2] A. Spasial, C. Asi, K. Padang, J. R. Mulia, A. Afif, and D. Ortega, “Pemodelan WebGIS Berbasis Simulasi Monte Carlo untuk Prediksi dan,” vol. 12, no. 6, 2025, doi: 10.30865/jurikom.v12i6.9395.

[3] C. Abras, D. Maloney-Krichmar, and J. Preece, “User-centered design,” in Encyclopedia of Human-Computer Interaction, Sage Publications, 2004, pp. 445–456.

[4] S. Agrawal and R. D. Gupta, “Web GIS: Principles and applications,” J. Geomatics, vol. 11, no. 1, pp. 1–10, 2017.

[5] O. Article, “Development of a WebGIS for University Campus Using an Approach Based on User-Centred Design Techniques,” vol. 27, no. 2009, pp. 1–14, 2021, doi: 10.1590/s1982-21702021000100002.

[6] S. T. Atmoko, D. Winarti, and E. Yandani, “Pengembangan Sistem Informasi Geografis untuk Visualisasi Spasial dan Pemantauan Interaktif Kasus Stunting di Kabupaten Dharmasraya Berbasis Website,” vol. 5, no. 2, 2025.

[7] G. Sig and U. Analisis, “Pengembangan sistem informasi,” vol. 7, pp. 4058–4068, 2024.

[8] D. Mirwansyah and D. Mahdiana, “Rancang Bangun Sistem Informasi Geografis Berbasis Web : Tinjauan Literatur Sistematis ( SLR ),” vol. 18, no. 1, 2023.

[9] D. Edler and M. Vetter, “The Simplicity of Modern Audiovisual Web Cartography : An Example with the Open ‑ Source JavaScript Library leaflet . js,” KN - J. Cartogr. Geogr. Inf., vol. 69, no. 1, pp. 51–62, 2019, doi: 10.1007/s42489-019-00006-2.

[10] J. Malczewski and C. Rinner, Multicriteria Decision Analysis in Geographic Information Science. Springer, 2015.

[11] J. Morgan and T. Evans, “Client-side geoprocessing with Turf.js: Advancing browser-based spatial analysis,” Trans. GIS, vol. 23, no. 3, pp. 493–510, 2019.

[12] R. Sharma and V. Kumar, “Interactive dashboards for spatial decision support: Integrating ApexCharts with WebGIS,” Int. J. Geoinformatics, vol. 18, no. 2, pp. 77–86, 2022.

[13] M. Z. Abdillah et al., “Geographic information system (GIS) for mapping Greenpark using Leaflet JS,” vol. 5, no. 2, 2021.

[14] H. Ilmawan and R. A. Mawarni, “Pengembangan Web-SIG sebagai sarana pendukung pengambilan kebijakan pemerintah desa dengan pendekatan user centered design,” vol. 10, no. 2, pp. 1–8, 2024.

[15] M. F. Maulana, N. Aulia, A. Asa, H. Wibowo, M. Irwan, and S. Muh, “Perancangan Sistem Webgis untuk Visualisasi Data Wilayah , Potensi Daerah , dan Infrastruktur Strategis di Bappeda Sulawesi Tenggara sebagai Upaya Mendukung Pengabdian kepada Masyarakat,” pp. 1–7, 2025, doi: 10.51454/anoa.v4i01.1339.