Penggunaan Kepler.gl & Leaflet untuk Visualisasi Interaktif

Pendahuluan

Pada pelajaran ini Anda akan mempelajari cara membuat peta interaktif berkualitas tinggi menggunakan Kepler.gl dan Leaflet, dua platform visualisasi geospasial paling fleksibel dan populer untuk analisis level lanjut. Pelajaran ini fokus pada implementasi nyata dalam sektor perbankan, seperti:

  • Analisis pola transaksi berdasarkan wilayah
  • Penentuan lokasi cabang/ATM prioritas
  • Visualisasi kepadatan pesaing
  • Heatmap nasabah potensial
  • Pemodelan area servis (catchment area)

Prasyarat / Alat yang Dibutuhkan:

  • Dataset geospasial (CSV, GeoJSON, SHP, WKT, atau lat/long)
  • Browser modern (Chrome/Edge)
  • Kepler.gl (versi web atau plugin Jupyter – opsional)
  • Code editor (VS Code)
  • Library Leaflet (via CDN)
  • Pengetahuan dasar HTML/JS (untuk Leaflet)

Langkah-langkah Utama

1. Menyiapkan Data Geospasial untuk Kepler.gl & Leaflet

Instruksi Detail

  1. Kumpulkan data yang akan divisualisasikan
    • Lokasi cabang dan ATM
    • Lokasi kompetitor
    • Poligon batas wilayah (kecamatan/kota)
    • Data transaksi, potensi nasabah, demografi
      (Visual Hint: Tampilan folder dataset dengan format CSV/GeoJSON.)
  2. Standarkan kolom data koordinat
    • Pastikan ada kolom: latitude, longitude, atau geometry
    • Gunakan WGS84 (EPSG:4326)
      (Visual Hint: Spreadsheet dengan kolom latitude/longitude rapi.)
  3. Konversi SHP ke GeoJSON jika diperlukan
    • Gunakan QGIS → Export → Save As GeoJSON
      (Visual Hint: QGIS Save As dialog.)
  4. Bersihkan data dari nilai kosong / duplikasi
    • Hapus titik tanpa koordinat
    • Gabungkan kategori (jenis cabang, segmen, dll.)
      (Visual Hint: PowerQuery atau Excel dengan filtering.)

Tip Penting:
Kepler.gl sangat optimal dengan dataset besar, sedangkan Leaflet cocok untuk peta custom yang ringan dan embed ke website internal bank.

2. Membuat Visualisasi Interaktif di Kepler.gl

Instruksi Detail

  1. Buka Kepler.gl versi web
  2. Import dataset
    • Klik Add Data → Upload File
    • Pilih CSV/GeoJSON Anda
      (Visual Hint: Popup upload Kepler.gl.)
  3. Atur tampilan layer otomatis
    • Kepler.gl otomatis mendeteksi titik vs poligon
    • Sesuaikan warna awal layer
      (Visual Hint: Panel Layer Settings.)
  4. Tambahkan layer baru untuk data tambahan
    • Cabang → Point Layer
    • ATM → Icon Layer
    • Wilayah → Polygon Layer
      (Visual Hint: Diagram berbagai layer.)
  5. Gunakan Filters untuk eksplorasi data
    • Filter berdasarkan: tahun, daerah, segmen nasabah
      (Visual Hint: Panel Filters dengan slider.)

Peringatan:
File GeoJSON yang terlalu berat akan membuat Kepler.gl lambat.
Gunakan simplifikasi geometri 5–10%.

3. Mendesain Layer Peta untuk Analisis Perbankan

Instruksi Detail

  1. Buat Heatmap Transaksi
    • Klik Add Layer → Heatmap
    • Kolom value → jumlah_transaksi
      (Visual Hint: Heatmap dengan warna gradien merah–biru.)
  2. Buat Point Cluster untuk ATM/Cabang
    • Layer Type → Cluster
    • Field → jenis_lokasi
      (Visual Hint: Bubble cluster.)
  3. Buat Area Servis (Catchment Area)
    • Import layer poligon buffer (hasil QGIS)
    • Warna → semi-transparent
      (Visual Hint: Poligon radius melingkar.)
  4. Tambahkan layer pesaing
    • Icon layer berbeda (misal merah)
      (Visual Hint: Peta dengan dua warna ikon berbeda.)
  5. Tampilkan alur perubahan performa cabang (Time Playback)
    • Gunakan Animation → timestamp
    • Cocok untuk analisis trend transaksi per bulan
      (Visual Hint: Video timeline slider Kepler.)

Strategi Profesional:
Pastikan kombinasi layer tidak lebih dari 5–7 agar tetap mudah dibaca dan ringan.

4. Mengekspor & Men-deploy Peta Kepler.gl

Instruksi Detail

  1. Export peta sebagai HTML interaktif
    • Menu → Export → HTML
      (Visual Hint: Dialog Export HTML.)
  2. Export konfigurasi (JSON)
    • Untuk digunakan ulang pada proyek lain
      (Visual Hint: JSON config preview.)
  3. Bagikan peta ke tim
    • Hosting di: Netlify, GitHub Pages, atau server internal bank
      (Visual Hint: File HTML yang dapat dibuka via browser.)

Tip:
HTML Kepler.gl bersifat standalone, sehingga bisa disimpan di server internal tanpa backend.

5. Membangun Peta Web Interaktif Menggunakan Leaflet

Instruksi Detail

  1. Siapkan file HTML dasar <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <div id="map" style="height: 600px;"></div> <script> var map = L.map('map').setView([-6.2, 106.8], 11); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); </script> (Visual Hint: Editor VS Code dengan kode Leaflet.)
  2. Tambahkan marker cabang & ATM L.marker([lat, lon]).addTo(map).bindPopup("Nama Cabang"); (Visual Hint: Peta dengan marker pop-up.)
  3. Tambahkan data GeoJSON untuk wilayah L.geoJSON(dataWilayah, { style: { color: "#1e90ff", weight: 1 } }).addTo(map); (Visual Hint: Layer poligon biru.)
  4. Tambahkan heatmap (menggunakan plugin Leaflet Heat) var heat = L.heatLayer(transaksiPoints, { radius: 25 }).addTo(map); (Visual Hint: Heatmap transparan.)
  5. Tambahkan kontrol filter sederhana map.on('zoomend', () => { /* filter dynamic */ }); (Visual Hint: Dropdown filter di pojok peta.)

Keunggulan Leaflet:
Sangat cocok untuk web lightweight dan integrasi aplikasi internal bank.

6. Mengintegrasikan Data Real-Time (Opsional)

Instruksi Detail

  1. Gunakan API internal bank untuk transaksi
    • Fetch JSON → update marker/heatmap
      (Visual Hint: AJAX request di console browser.)
  2. Gunakan WebSocket untuk update otomatis
    • Cocok untuk monitoring ATM downtime
      (Visual Hint: Notifikasi real-time pada peta.)

Tip Lanjut:
Anda bisa menggabungkan output model prediktif (misalnya dari Python) ke peta Leaflet secara otomatis melalui REST API.

Ringkasan & Tugas

3 Poin Kunci

  1. Kepler.gl ideal untuk eksplorasi cepat, peta 3D, heatmap, dan animasi temporal dataset besar.
  2. Leaflet ideal untuk peta custom yang ringan dan dapat di-embed ke aplikasi web internal bank.
  3. Kombinasi dua platform ini mampu membangun sistem visualisasi geospasial yang kuat untuk analisis jaringan perbankan modern.

Tugas Praktis

Buatlah dua visualisasi berikut:

  1. Peta Interaktif Kepler.gl
    • Layer: ATM, Cabang, Pesaing
    • Heatmap transaksi
    • Poligon kecamatan/kota
    • Animation by month
  2. Web Map Leaflet
    • Tile Layer OSM
    • Marker cabang
    • Poligon wilayah
    • Heatmap transaksi
Previous Lesson
Back to Course
Next Lesson