Juknis — Membuat Peta Choropleth Offline Kabupaten Sintang

Juknis — Membuat Peta Choropleth Offline

Kabupaten Sintang · Berbasis batas desa & data PBH

📘 Versi 1.0 ⏱️ 30–60 menit 👤 Pemula

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.json di folder kerja

⚠️ Wajib: CRS harus EPSG:4326 (WGS84). Kalau aslinya UTM, konversi dulu di QGIS:
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
dir

Pastikan 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 python tidak jalan tapi py jalan → normal di Windows, pakai py

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.1

Kalau 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:8080

Tekan 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.1

Buka 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 + C

Alternatif 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 MB Update data = edit manual HTML Tidak bisa dipakai untuk data dinamis

Cara minta: tulis pesan "buatkan versi 1 file self-contained" di obrolan.

Juknis — Peta Choropleth Offline Kabupaten Sintang · Versi 1.0
Simpan sebagai referensi. Kalau ada perubahan data PBH atau penyesuaian tampilan, cukup edit index.html lalu refresh Chrome (Ctrl + F5).

Yugo Hyu

Tab Menu hyu

Juknis Singkat — Membuat Peta Choropleth Offline Kabupaten Sintang

Juknis — Membuat Peta Choropleth Offline

1. Ringkasan Alur

2. Prasyarat

1Konversi Shapefile ke GeoJSON

Langkah:

2Siapkan File Leaflet (Lokal)

3Buat `index.html`

Isi `index.html` terdiri dari 3 bagian:

4Struktur Folder Final

Cek dengan CMD:

5Verifikasi Python

6Jalankan Server Lokal

Kenapa `--bind 127.0.0.1`?

7Buka Peta di Browser

Yang akan muncul:

8Hentikan Server

Cara Buka Peta Lagi (Sesi Berikutnya)

Bagian yang Bisa Disesuaikan

Ganti ke data asli:

Troubleshooting Umum

Catatan Keamanan

Ringkasan Perintah Penting

Alternatif Tanpa Python / CMD

yugohyu.blogspot.com

Tab Menu hyu

Juknis Singkat — Membuat Peta Choropleth Offline Kabupaten Sintang

1. Ringkasan Alur

2. Prasyarat

1Konversi Shapefile ke GeoJSON

Langkah:

2Siapkan File Leaflet (Lokal)

3Buat index.html

Isi index.html terdiri dari 3 bagian:

4Struktur Folder Final

Cek dengan CMD:

5Verifikasi Python

6Jalankan Server Lokal

Kenapa --bind 127.0.0.1?

7Buka Peta di Browser

Yang akan muncul:

8Hentikan Server

Cara Buka Peta Lagi (Sesi Berikutnya)

Bagian yang Bisa Disesuaikan

Ganti ke data asli:

Troubleshooting Umum

Catatan Keamanan

Ringkasan Perintah Penting

Alternatif Tanpa Python / CMD

yugohyu.blogspot.com

3Buat `index.html`

Isi `index.html` terdiri dari 3 bagian:

Kenapa `--bind 127.0.0.1`?