Juknis — Membuat Peta Choropleth Offline
Kabupaten Sintang · Berbasis batas desa & data PBH
1. Ringkasan Alur
Secara garis besar, peta dibuat melalui 4 tahapan berikut:
Shapefile (.shp + .dbf + .prj)
↓ konversi
GeoJSON (EPSG:4326)
↓ + Leaflet lokal
index.html + leaflet.css + leaflet.js
↓ jalankan server lokal
Peta offline di browser
2. Prasyarat
| Kebutuhan | Keterangan |
|---|---|
| File batas wilayah | .shp, .dbf, .prj, .shx, .cpg (satu set) |
| Alat konversi | mapshaper.org (online) atau QGIS (offline) |
| Browser | Chrome / Edge / Firefox |
| Python | Python 3.x terinstall + centang "Add to PATH" saat install |
| Folder kerja | Mis. C:\Users\<nama>\Desktop\peta-sintang |
1Konversi Shapefile ke GeoJSON
Tujuan: Mengubah Shapefile menjadi GeoJSON yang bisa dibaca Leaflet.
Langkah:
- Buka mapshaper.org
- Drag semua file Shapefile sekaligus ke halaman itu:
.shp— geometri utama.dbf— data atribut.prj— proyeksi.shx,.cpg— pendukung
- Klik Import
- Klik Export → pilih GeoJSON
- Simpan sebagai
Kab._Sintang_BIG.jsondi folder kerja
⚠️ Wajib: CRS harus EPSG:4326 (WGS84). Kalau aslinya UTM, konversi dulu di QGIS:
Export → Save Features As → CRS: EPSG:4326
Export → Save Features As → CRS: EPSG:4326
💡 Alternatif tanpa konversi: Unduh GeoJSON siap pakai dari Peta Nusa (petanusa.web.id) atau
github.com/alf-anas/batas-administrasi-indonesia.
2Siapkan File Leaflet (Lokal)
Tujuan: Agar peta bisa berjalan tanpa internet.
Unduh 2 file berikut, simpan di folder kerja:
| File | Link unduh |
|---|---|
leaflet.css | https://unpkg.com/leaflet@1.9.4/dist/leaflet.css |
leaflet.js | https://unpkg.com/leaflet@1.9.4/dist/leaflet.js |
Cara unduh: buka link → klik kanan → Save As → simpan tanpa rename.
3Buat index.html
Tujuan: File utama yang menampilkan peta.
- Buka Notepad atau VS Code
- Salin kode
index.html(versi utuh dari panduan sebelumnya) - File → Save As
- Di bagian "Save as type", pilih All Files
- Nama:
index.html - Simpan di folder kerja
Isi index.html terdiri dari 3 bagian:
| Bagian | Fungsi |
|---|---|
<style> | Tampilan peta, panel, legenda |
<div id="map"> | Area peta |
<script> | Load GeoJSON + generate data dummy + render choropleth |
4Struktur Folder Final
Folder kerja harus berisi 4 file:
📁 peta-sintang/
├── index.html
├── leaflet.css
├── leaflet.js
└── Kab._Sintang_BIG.json
Cek dengan CMD:
cd Desktop\peta-sintang
dirPastikan 4 file itu muncul.
5Verifikasi Python
Tujuan: Memastikan Python bisa dijalankan.
Buka CMD baru, ketik:
py --version- Kalau muncul versi (misal
Python 3.13.15) → lanjut OK - Kalau muncul
'py' is not recognized→ install Python dari python.org/downloads dengan mencentang "Add Python to PATH" - Kalau
pythontidak jalan tapipyjalan → normal di Windows, pakaipy
6Jalankan Server Lokal
Tujuan: fetch() tidak bisa berjalan di protokol file://, jadi perlu server lokal.
Di CMD, ketik:
cd Desktop\peta-sintang
py -m http.server 8080 --bind 127.0.0.1Kalau berhasil, muncul:
Serving HTTP on 127.0.0.1 port 8080 (http://127.0.0.1:8080/) ...
🚫 JANGAN tutup CMD ini selama peta dipakai.
Kenapa --bind 127.0.0.1?
Supaya server hanya bisa diakses dari komputer sendiri, tidak bocor ke WiFi/LAN.
7Buka Peta di Browser
- Buka Chrome
- Ketik di kolom alamat:
http://127.0.0.1:8080Tekan Enter.
Yang akan muncul:
- Peta Sintang dengan desa berwarna sesuai nilai PBH (biru muda = rendah, biru tua = tinggi)
- Panel kanan: statistik + legenda + slider filter
- Klik desa → info detail muncul di pojok kanan atas
- Hover desa → tooltip kecil
8Hentikan Server
Setelah selesai:
- Balik ke CMD
- Tekan Ctrl + C
- Server berhenti, CMD bisa ditutup
Cara Buka Peta Lagi (Sesi Berikutnya)
Tidak perlu install ulang. Cukup:
cd Desktop\peta-sintang
py -m http.server 8080 --bind 127.0.0.1Buka Chrome → http://127.0.0.1:8080.
💡 Tips: Simpan 2 baris perintah ini di Notepad agar tinggal copy-paste.
Bagian yang Bisa Disesuaikan
| Bagian | Lokasi di index.html | Cara ubah |
|---|---|---|
| Warna choropleth | Array CLASSES | Ganti nilai color |
| Range nilai | CLASSES[].max | Ganti angka batas kelas |
| Nilai dummy | Fungsi dummyPBH() | Ganti isi fungsi dengan data asli |
| Judul header | <header><h1> | Ubah teks |
| Data asli PBH | Ganti dummyPBH() dengan lookup dataAsli[props.KDEPUM] | Lihat contoh di bawah |
Ganti ke data asli:
const dataAsli = {
"61.05.04.2002": { nilai: 87, status: 'Proses', tahun: 2024 },
// ...
};
f.properties._pbh = dataAsli[f.properties.KDEPUM]
|| { nilai: 0, status: 'Belum Salur', tahun: '-' };Troubleshooting Umum
| Masalah | Penyebab | Solusi |
|---|---|---|
python tidak dikenali, tapi py jalan |
App execution alias Windows | Pakai py bukan python |
Python was not found; run without arguments... |
Alias mengarah ke Microsoft Store | Matikan di Settings → Apps → Advanced → App execution aliases → toggle python.exe OFF |
| Halaman putih kosong | Nama file GeoJSON salah | Cek dir, pastikan nama file persis |
| Muncul "Gagal memuat GeoJSON" | Buka via file:// bukan http:// |
Wajib pakai server lokal |
| Peta muncul tapi tanpa warna | File GeoJSON besar, masih parsing | Tunggu 2–5 detik |
| CMD ditutup lalu peta tidak bisa dibuka | Server mati | Jalankan ulang py -m http.server 8080 |
Browser tidak bisa akses http://127.0.0.1:8080 |
Port dipakai aplikasi lain | Ganti 8080 jadi 8081, 8082, dst. |
Catatan Keamanan
| Hal | Keterangan |
|---|---|
| Server lokal aman? | ✅ Ya, asal pakai --bind 127.0.0.1 (hanya bisa diakses komputer sendiri) |
| Data dikirim ke internet? | ❌ Tidak — semua proses di sisi klien |
| File GeoJSON publik? | ✅ Ya, dari BIG (Badan Informasi Geospasial), sumber resmi |
| Perlu installer/virus scan? | ❌ Tidak — Python, Leaflet, dan GeoJSON semua open-source & resmi |
Ringkasan Perintah Penting
:: Masuk folder kerja
cd Desktop\peta-sintang
:: Cek isi folder (harus ada 4 file)
dir
:: Jalankan server
py -m http.server 8080 --bind 127.0.0.1
:: Buka di Chrome
http://127.0.0.1:8080
:: Hentikan server
Ctrl + CAlternatif Tanpa Python / CMD
Kalau tidak ingin repot dengan CMD dan Python:
Versi 1 file self-contained — semua data GeoJSON ditanam di dalam index.html, cukup dobel klik untuk membuka.
| Kelebihan | Kekurangan |
|---|---|
|
Tanpa Python Tanpa CMD Tanpa server Cukup 1 file |
File index.html ± 4 MBUpdate data = edit manual HTML Tidak bisa dipakai untuk data dinamis |
Cara minta: tulis pesan "buatkan versi 1 file self-contained" di obrolan.
