LINK WEBGIS : https://adinda27j03.github.io/Bandung-GO/

LINK GITHUB : https://github.com/Adinda27j03/Bandung-GO.git

Penulis : Adinda Dwi Yulianto

ABSTRAK

Kata Kunci: WebGIS, Sistem Informasi Geografis, Destinasi Kota Bandung, Pemetaan, Informasi Lokasi

LATAR BELAKANG

Kota Bandung memiliki berbagai pilihan tempat yang dapat dikunjungi untuk memenuhi kebutuhan masyarakat maupun wisatawan. Beragam cafe, coffee shop, tempat kuliner, hotel, penginapan, dan destinasi tersebar di berbagai wilayah Kota Bandung. Banyaknya pilihan tersebut memberikan keuntungan berupa keberagaman tempat, tetapi di sisi lain pengguna membutuhkan waktu untuk mencari, membandingkan, dan menentukan lokasi yang ingin dikunjungi.

Informasi mengenai tempat-tempat tersebut umumnya tersebar pada berbagai platform digital. Pengguna dapat mencari suatu tempat melalui mesin pencarian, media sosial, maupun aplikasi peta. Namun, informasi tersebut belum tentu tersaji dalam satu media yang secara khusus mengelompokkan berbagai jenis tempat sekaligus menampilkan persebarannya secara visual dalam konteks wilayah Kota Bandung.

Pemanfaatan Sistem Informasi Geografis berbasis web atau WebGIS dapat menjadi salah satu solusi dalam menyajikan informasi lokasi secara lebih interaktif. Melalui peta digital, pengguna tidak hanya dapat melihat daftar tempat, tetapi juga mengetahui posisi dan persebaran setiap lokasi secara spasial. Hal ini dapat membantu proses pencarian tempat menjadi lebih visual, sederhana, dan sesuai dengan kebutuhan pengguna.

Berdasarkan hal tersebut, dikembangkan Bandung—GO, yaitu WebGIS interaktif yang berfungsi sebagai panduan digital untuk menjelajahi berbagai tempat di Kota Bandung. WebGIS ini mengintegrasikan informasi lokasi ke dalam lima kategori utama dan menampilkannya dalam peta interaktif. Pengguna dapat memanfaatkan Bandung—GO untuk menemukan tempat baru, melihat pilihan berdasarkan kategori, mengetahui lokasi suatu tempat, serta menentukan tujuan berikutnya dengan lebih mudah.

TUJUAN

Pengembangan WebGIS Bandung—GO bertujuan untuk menyediakan platform berbasis geospasial yang membantu pengguna dalam menemukan, mengeksplorasi, dan menganalisis berbagai lokasi di Kota Bandung secara interaktif. Secara khusus, tujuan pengembangan Bandung—GO adalah:

1. 1.
   Menyajikan informasi persebaran lokasi di Kota Bandung yang mencakup pariwisata, cafe dan coffee shop, tempat kuliner, penginapan, dan halte transportasi dalam bentuk peta interaktif.

1. 2.
   Mempermudah pengguna dalam mencari lokasi berdasarkan kategori dan kebutuhan melalui fitur Filter, sehingga pengguna dapat menampilkan jenis tempat tertentu pada peta secara lebih terarah.

1. 3.
   Membantu pengguna menemukan hotel atau penginapan di sekitar lokasi tertentu melalui fitur Buffer, dengan menampilkan area jangkauan berdasarkan radius yang ditentukan dari suatu titik wisata atau lokasi pilihan.

1. 4.
   Membantu pengguna menganalisis keterjangkauan suatu wilayah berdasarkan waktu tempuh melalui fitur Isochrone, sehingga pengguna dapat mengetahui destinasi atau lokasi yang dapat dijangkau dari suatu hub transportasi dalam durasi tertentu.

1. 5.
   Memberikan visualisasi informasi geospasial secara interaktif agar pengguna tidak hanya mengetahui daftar lokasi, tetapi juga dapat memahami posisi, persebaran, kedekatan, dan keterjangkauan antar lokasi.

1. 6.
   Menerapkan analisis spasial sederhana dalam WebGIS sebagai sarana pendukung dalam pengambilan keputusan pengguna untuk menentukan tempat atau tujuan yang sesuai dengan kebutuhan.

MANFAAT

1. Manfaat bagi Pengguna

Bandung—GO memberikan manfaat bagi pengguna dalam menemukan dan merencanakan kunjungan ke berbagai lokasi di Kota Bandung secara lebih mudah dan terarah.

• Memudahkan pencarian lokasi

• Membantu mencari penginapan di sekitar lokasi

• Membantu memahami keterjangkauan berdasarkan waktu

• Membantu perencanaan perjalanan

2. Manfaat dalam Bidang Geospasial

Bandung—GO menunjukkan penerapan konsep Sistem Informasi Geografis dalam penyajian dan analisis informasi berbasis lokasi. Data titik tidak hanya ditampilkan sebagai lokasi pada peta, tetapi juga dapat digunakan untuk melakukan eksplorasi dan analisis spasial sederhana.

Manfaat geospasial yang diterapkan meliputi:

• Visualisasi persebaran berbagai kategori lokasi di Kota Bandung.

• Seleksi data berdasarkan atribut melalui fitur Filter.

• Analisis kedekatan/proximity analysis melalui fitur Buffer.

• Analisis keterjangkauan/accessibility analysis berdasarkan waktu tempuh melalui fitur Isochrone.

• Analisis spasial berbasis lokasi untuk membantu pengguna memahami hubungan antara suatu tempat dengan lokasi di sekitarnya.

Dengan demikian, Bandung—GO tidak hanya berfungsi sebagai peta digital untuk melihat titik lokasi, tetapi juga sebagai media eksplorasi yang memanfaatkan analisis spasial.

3. Manfaat bagi Pengembangan WebGIS

Bandung—GO dapat menjadi contoh penerapan WebGIS yang menggabungkan visualisasi data geospasial dan fitur analisis spasial interaktif dalam satu platform.

Pengembangan ini menunjukkan bahwa WebGIS dapat digunakan untuk:

• Menyajikan data lokasi secara interaktif.

• Membantu pengguna melakukan pencarian berdasarkan kategori.

• Melakukan analisis kedekatan suatu lokasi melalui Buffer.

• Memahami keterjangkauan lokasi berdasarkan waktu melalui Isochrone.

• Mendukung pengguna dalam menentukan pilihan dan merencanakan perjalanan berdasarkan informasi spasial.

METODE

Pengembangan WebGIS Bandung—GO dilakukan melalui beberapa tahapan sebagai berikut:

1. Pengumpulan dan Pengolahan Data Lokasi

Tahap awal dilakukan dengan mengumpulkan informasi lokasi berbagai tempat di Kota Bandung.

Setiap lokasi dikumpulkan berdasarkan informasi posisi geografis agar dapat disajikan sebagai data titik pada peta. Data lokasi yang telah dikumpulkan kemudian diolah dan dikelompokkan berdasarkan kategori. Kategori utama yang digunakan dalam Bandung—GO meliputi:

Pariwisata

• Wisata Budaya

• Wisata Alam

Cafe dan Coffe Shop

• Cafe

• Coffee Shop

Kuliner

• Restaurant

• Fast Food Restaurant

• Bakery

• Food Court

Pada Panel Tampilkan Layer

• Hotel dan Penginapan

• Halte/Transportasi

• Batas Adminitrasi Kota Bandung

Pengelompokan ini bertujuan untuk mempermudah pengelolaan data dan membantu pengguna dalam memilih jenis tempat yang ingin dicari.

2. Pengolahan Data Geospasial

Data lokasi selanjutnya dipersiapkan sebagai data geospasial yang memiliki informasi koordinat. Data tersebut kemudian digunakan sebagai sumber informasi untuk menampilkan titik-titik lokasi pada peta digital. Pada tahap ini dilakukan pengelolaan data spasial agar setiap lokasi dapat ditempatkan pada posisi yang sesuai dan dikelompokkan berdasarkan kategorinya.

Sumber data dan layanan yang digunakan dalam pengembangan Bandung—GO adalah sebagai berikut:

a. MAPID GeoServer Endpoint/Asset:

Kegunaan: POI wisata, coffee, kuliner, hotel, transportasi, dan batas kecamatan.

b. OpenStreetMap Endpoint/Asset:

tile.openstreetmap.org

Kegunaan: Basemap Street.

c. Esri World Imagery Endpoint/Asset:

Kegunaan: Basemap Satellite.

d. CARTO Dark Endpoint/Asset:

Kegunaan: Basemap alternatif dengan tampilan dark.

e. OpenRouteService Endpoint/Asset:

Kegunaan: Analisis isochrone untuk perjalanan berjalan kaki, bersepeda, dan berkendara.

f. Turf.js (CDN) Endpoint/Asset: @turf/turf@7 Kegunaan: Pembuatan polygon buffer dan spatial query.

g. Leaflet Endpoint/Asset: CDN Kegunaan: Rendering peta dan marker.

h. Font Awesome Endpoint/Asset: CDN Kegunaan: Ikon marker dan antarmuka pengguna.

Layer MAPID yang dikonfigurasi pada js/config.js terdiri atas:

• tourism — destinasi wisata.

• coffee dan coffee2 — cafe dan coffee shop.

• culinary — restaurant, bakery, food court, dan lainnya.

• hotel — hotel dan penginapan.

• transport — hub transportasi.

• admin — batas administrasi kecamatan.

3. Architecture WebGIS

Sistem Bandung—GO menggunakan arsitektur berbasis client-side, yaitu seluruh proses utama berjalan pada browser pengguna tanpa menggunakan backend sendiri.

Struktur arsitektur sistem dapat dijelaskan sebagai berikut:

Browser (Static HTML/CSS/JS)

│

├── index.html → Landing Page (Informasi Web)

│

└── map.html → Map / Peta Interaktif

│

├── js/config.js → Konfigurasi API (MAPID + ORS)

├── js/map.js → Logika peta & analisis

│

▼

• External Data & Services

• MAPID GeoServer Open API

• OpenRouteService (isochrone)

• OpenStreetMap / Esri / CARTO tiles

4. Analisis Buffer (client-side)

Input: titik sumber (marker/pencarian/klik peta) + radius (200 m – 10 km)

Proses:

• turf.buffer() membuat polygon lingkaran

• turf.pointsWithinPolygon() filter hotel dalam radius

• Sort by jarak dari titik sumber

Response (UI panel #bufferResult):

5.Analisis Isochrone (via OpenRouteService)

Input: titik transport hub + moda (walking/cycling/driving) + durasi (10–90 menit)

Request ke ORS:

Response (UI panel #isoResult):

6. Project Structure

Bandung-GO/

├── index.html # Landing page portfolio

├── map.html # Halaman WebGIS interaktif

├── README.md # Singkat: "Explore Bandung City..."

├── css/

│ ├── style.css # Style landing page + shared navbar

│ └── map.css # Style halaman peta, panel, marker, popup

├── js/

│ ├── config.js # Konfigurasi MAPID URLs + ORS API key

│ ├── map.js # Core WebGIS (~3800 baris)

│ └── script.js # Smooth scroll + mobile menu landing

└── assets/

├── README.txt # Dokumentasi arsitektur WebGIS

└── img/ # Gambar landing (tidak ada di repo git saat ini)

HASIL DAN OUPUT PROYEK

Aspek Hasil

Produk akhir Website WebGIS interaktif untuk eksplorasi Bandung

Landing page Halaman presentasi dengan hero, deskripsi, gallery foto,

dan CTA ke peta

Peta Ribuan POI Bandung (wisata, kuliner, hotel, transport)

sebagai marker berikon dan berwarna

Analisis Buffer Daftar hotel terdekat dari titik wisata dan visualisasi

lingkaran di peta

Analisis Isochrone Area jangkauan dan daftar destinasi dari stasiun/bandara

Popup Detail tempat, link Google Maps, dan shortcut

"Analisis Buffer"

Batas admin Polygon kecamatan Bandung dengan tooltip hover