Peta Pixel Nusantara: peta Indonesia 8-bit untuk dashboard, komunitas, dan game

Peta Pixel Nusantara: peta Indonesia 8-bit yang bisa dipakai untuk dashboard, komunitas, dan game

Peta Indonesia biasanya hadir dalam dua bentuk ekstrem.

Pertama, peta tile modern seperti yang biasa kita lihat di aplikasi maps. Detailnya bagus, tapi bergantung pada jaringan, tile server, library map, dan sering kali terlalu "realistis" untuk kebutuhan visual tertentu.

Kedua, ilustrasi peta statis. Enak untuk desain, tapi tidak bisa di-hover, tidak bisa di-klik, dan sulit dipakai sebagai data interaktif.

Di tengah dua ekstrem itu, ada pendekatan yang lebih unik: Peta Pixel Nusantara.

Repo open-source ini mengubah batas wilayah administratif Indonesia menjadi peta pixel 8-bit yang bisa di-zoom dari 38 provinsi sampai 519 kabupaten/kota. Bukan sekadar gambar. Ini data grid yang bisa dibaca aplikasi.

Apa itu Peta Pixel Nusantara?

Peta Pixel Nusantara adalah peta Indonesia bergaya pixel art yang dibangun dari boundary asli Indonesia.

Boundary wilayah dirasterisasi menjadi grid pixel, lalu dirender di canvas dengan nearest-neighbor agar tetap tajam di berbagai level zoom. Hasil akhirnya terasa seperti peta 8-bit, tapi masih punya struktur data yang bisa dipakai untuk interaksi.

Menurut README repo resminya, proyek ini menyediakan:

• layer 38 provinsi Indonesia,
• layer 519 kabupaten/kota dari geoBoundaries ADM2,
• hubungan kabupaten/kota ke provinsi induk,
• metadata wilayah seperti bounding box, centroid, dan luas sel,
• grid provinsi dan kabupaten/kota yang dikompresi dengan run-length encoding,
• demo interaktif vanilla JavaScript tanpa build step.

Ini menarik karena peta tidak diperlakukan sebagai gambar mati. Peta diperlakukan sebagai data.

Kenapa ini dibuat?

Di repo resminya, Peta Pixel Nusantara disebut dibuat untuk aiclub.id, komunitas AI gratis se-Nusantara yang ingin menampilkan persebaran builder per provinsi dan kota tanpa kehilangan rasa visual pixel.

Ini use case yang masuk akal.

Kalau tujuannya cuma menunjukkan titik lokasi, peta tile biasa cukup. Tapi kalau tujuannya menampilkan persebaran komunitas, chapter, event, venue, atau coverage secara agregat, peta pixel punya rasa yang berbeda.

Lebih ringan. Lebih khas. Lebih gampang di-branding.

Dan karena datanya berbentuk grid, sistem tidak perlu melakukan hit-test polygon berat setiap kali user hover atau klik wilayah.

Bagian teknis yang bikin repo ini menarik

Kunci teknisnya ada di format runtime.

Peta ini memakai grid dengan ukuran W dan H, lalu menyimpan dua layer utama:

• provRle untuk grid provinsi,
• kabRle untuk grid kabupaten/kota.

RLE di sini berarti run-length encoding. Daripada menyimpan setiap sel satu per satu secara mentah, data dikompresi menjadi pasangan nilai dan jumlah pengulangan.

Contoh sederhananya:

function inflate(rle, size, Ctor) {
 const grid = new Ctor(size)
 let offset = 0

 for (let i = 0; i < rle.length; i += 2) {
 const value = rle[i]
 const count = rle[i + 1]
 grid.fill(value, offset, offset + count)
 offset += count
 }

 return grid
}

Setelah grid dibuka kembali di browser, hit-test menjadi sangat murah:

const gx = Math.floor(view.x + (screenX / screenWidth) * view.w)
const gy = Math.floor(view.y + (screenY / screenHeight) * view.h)
const regionIndex = provinceGrid[gy * D.W + gx]

Tidak perlu menghitung apakah titik berada di dalam polygon. Tidak perlu point-in-polygon di runtime. Cukup baca array berdasarkan posisi grid.

Untuk aplikasi interaktif, ini perbedaan besar.

Kenapa bukan langsung pakai GeoJSON?

GeoJSON bagus untuk banyak kebutuhan. Tapi tidak selalu ideal untuk visual ringan yang ingin terasa seperti pixel art.

Kalau kita memakai GeoJSON langsung, browser perlu membaca koordinat polygon, menggambar shape, menangani simplification, lalu menghitung interaksi. Untuk peta Indonesia sampai level kabupaten/kota, itu bisa jadi berat atau terlalu kompleks untuk use case sederhana.

Peta Pixel Nusantara mengambil pendekatan berbeda:

1. Boundary asli diproses di tahap generator.
2. Polygon dirasterisasi ke grid pixel.
3. Metadata wilayah dihitung sekali.
4. Grid dikompresi dengan RLE.
5. Runtime hanya membaca grid dan menggambar persegi/pixel.

Dengan cara ini, peta jadi lebih mudah dipindahkan ke platform lain. README repo bahkan menyebut pendekatan rendering untuk Canvas 2D, WebGL, Flutter, React Native Skia, Unity, dan Godot.

Aturan utamanya sederhana: jangan haluskan pixel.

Di Canvas 2D, misalnya:

ctx.imageSmoothingEnabled = false

Di CSS:

image-rendering: pixelated;

Use case yang paling cocok

Peta ini cocok untuk beberapa skenario.

Komunitas dan chapter map

Misalnya komunitas AI, developer, startup, UMKM, sekolah, atau volunteer network ingin menampilkan persebaran anggota per provinsi/kota.

Alih-alih menampilkan data personal, sistem cukup menampilkan angka agregat per wilayah.

Ini lebih aman untuk privasi dan lebih enak dilihat sebagai heatmap.

Dashboard coverage

Bisnis yang punya coverage layanan per wilayah bisa memakai peta ini sebagai visual sederhana.

Contohnya:

• area yang sudah dilayani,
• jumlah event per provinsi,
• jumlah leads per kabupaten/kota,
• performa campaign per region,
• cabang atau partner aktif per wilayah.

Untuk landing page, dashboard internal, atau report publik, visual pixel seperti ini bisa terasa lebih fresh dibanding peta administratif biasa.

Game dan interactive experience

Karena bentuknya grid, peta ini juga masuk akal untuk game, edukasi, simulasi, atau interactive microsite.

Indonesia punya bentuk geografis yang kompleks. Membuatnya dalam gaya pixel tanpa kehilangan struktur provinsi/kabupaten adalah pekerjaan yang biasanya tidak trivial.

Repo ini memberi starting point yang cukup matang.

Tool internal

Untuk tool internal, yang paling penting sering bukan visual super-detail, tapi interaksi cepat dan data yang gampang dipetakan.

Kalau setiap wilayah punya ID array, nama, centroid, dan relasi provinsi-kabupaten, developer bisa mengikat data bisnis ke wilayah tanpa memulai dari nol.

Hal yang perlu diperhatikan sebelum dipakai produksi

Peta Pixel Nusantara sudah menarik sebagai basis visual dan data, tapi README-nya juga jujur soal batasan.

Layer kabupaten/kota memakai geoBoundaries ADM2 dan berisi 519 unit. Itu lebih lengkap dibanding fallback lama berbasis GADM-derived yang berisi 388 unit, tapi nama dan kode resmi masih perlu dinormalisasi kalau mau dipakai untuk kebutuhan government-grade.

Untuk sistem serius, terutama yang harus match ke kode wilayah resmi, tetap perlu mapping ke data BPS/BIG atau dataset kode wilayah yang valid.

Dengan kata lain: repo ini bagus sebagai base visual dan format interaktif. Untuk data administratif resmi, lakukan normalisasi tambahan.

Lisensi dan atribusi

Bagian ini penting.

Kode dan kerja pixel-rasterization di repo ini memakai lisensi MIT. Tapi data batas wilayah punya lisensi upstream masing-masing.

Menurut ATTRIBUTION.md, sumber batas wilayahnya antara lain:

• provinsi dari denyherianto/indonesia-geojson-topojson-maps-with-38-provinces, lisensi CC-BY-4.0,
• kabupaten/kota dari geoBoundaries, lisensi CC-BY-4.0,
• fallback legacy dari tvalentius/Indonesia-topojson yang diturunkan dari GADM.

Jadi kalau peta atau data turunannya dipakai ulang, sertakan atribusi. Jangan cuma copy file datanya lalu menghapus sumber.

String atribusi yang disarankan repo:

Peta Pixel Nusantara uses province boundary data from denyherianto's Indonesia 38-province TopoJSON dataset and ADM2 boundary data from geoBoundaries. Pixel rasterization and demo code by Rama Aditya.

Kenapa proyek seperti ini penting?

Menurut saya, Peta Pixel Nusantara menarik karena ia menyelesaikan masalah kecil yang sering disepelekan: membuat peta Indonesia yang terasa lokal, ringan, interaktif, dan bisa dipakai ulang.

Kita sering melihat dashboard Indonesia memakai peta generik, tile map berat, atau ilustrasi yang tidak bisa diproses sebagai data. Padahal banyak produk lokal butuh visual wilayah yang lebih sederhana:

• komunitas ingin menampilkan persebaran member,
• brand ingin menampilkan coverage,
• sekolah ingin membuat materi edukasi,
• game ingin memakai bentuk Indonesia,
• dashboard ingin agregasi per wilayah tanpa membuka data individu.

Peta pixel seperti ini memberi opsi tengah: cukup teknis untuk developer, cukup visual untuk designer, dan cukup ringan untuk web.

Quick start

Kalau mau coba, repo ini tidak butuh build step.

Clone repo, lalu buka index.html langsung:

open index.html

Atau jalankan static server kecil:

python3 -m http.server 8080

Lalu buka:

http://localhost:8080

Untuk mengambil data dari browser:

<script src="./data/peta-hd-data.js"></script>
<script>
 const mapData = window.PETA_HD
 console.log(mapData.prov.length) // 38
 console.log(mapData.kab.length) // 519
</script>

Kesimpulan

Peta Pixel Nusantara bukan sekadar proyek visual lucu.

Ia adalah contoh bagaimana data geospasial bisa dibuat lebih ringan, lebih khas, dan lebih mudah dipakai ulang untuk kebutuhan produk lokal.

Kalau kamu sedang membuat landing page komunitas, dashboard coverage, peta event, game edukasi, atau visualisasi agregat berbasis wilayah Indonesia, repo ini layak dicoba.

Apalagi karena formatnya open-source, tidak butuh backend, tidak butuh build step, dan bisa dipahami dari file HTML + data JavaScript biasa.

Sederhana, tapi kepikiran.

Referensi

• Repo Peta Pixel Nusantara
• README Peta Pixel Nusantara
• Atribusi dan lisensi data
• geoBoundaries
• aiclub.id