Peta GeoJSON & TopoJSON Indonesia (38 Provinsi)

#data #javascript #performance #resources

Indonesia secara resmi kini memiliki 38 provinsi, dan jika Anda pernah mencoba membangun aplikasi berbasis peta, seperti dashboard, peta pemilu, alat logistik, pelacakan bencana, atau visualisasi data. Besar kemungkinan Anda pernah merasakan masalah berikut:

Data provinsi tidak lengkap
Batas wilayah yang sudah tidak relevan
Penamaan yang tidak konsisten

Mengapa Ini Penting

Peta bukan sekadar visual yang menarik. Peta adalah fondasi dari data Anda.

Jika daftar provinsi tidak akurat, maka seluruh sistem ikut bermasalah. Peta choropleth menjadi keliru. Analitik tidak sesuai dengan wilayah sebenarnya. Tooltip menampilkan nama yang salah.

Indonesia telah menambah beberapa provinsi baru, Papua Selatan, Papua Tengah, Papua Pegunungan, dan Papua Barat Daya. Sehingga banyak dataset lama kini sudah tidak relevan. Bahkan, banyak sumber publik masih hanya menampilkan 34 provinsi.

Cakupan

Data Lengkap

38 provinsi, termasuk:
- Papua Selatan
- Papua Tengah
- Papua Pegunungan
- Papua Barat Daya

Dua Tipe Format

GeoJSON
- Mudah digunakan
- Kompatibel dengan Leaflet, Mapbox GL, dan overlay Google Maps
TopoJSON
- Ukuran file ~80–90% lebih kecil
- Waktu muat lebih cepat
- Ideal untuk D3.js dan visualisasi skala besar

Bersih & Konsisten

Nama provinsi yang telah dinormalisasi
ID stabil untuk proses data join
Tidak ada geometri duplikat
Jalur (path) yang telah disederhanakan dan ramah web

GeoJSON vs TopoJSON (Ringkasan)

Fitur	GeoJSON	TopoJSON
Keterbacaan	✅ Tinggi	⚠️ Sedang
Ukuran File	❌ Besar	✅ Sangat Kecil
Performa Browser	⚠️ Bisa lambat	✅ Cepat
Paling Cocok Untuk	Peta sederhana	Visualisasi data, dashboard

Jika Anda membangun dashboard interaktif, TopoJSON adalah pilihan yang tepat.

Jika Anda butuh yang plug-and-play, GeoJSON sudah sangat memadai.

Contoh Kasus Penggunaan

Dataset ini ideal untuk:

📊 Dashboard pemerintahan & layanan publik
🌋 Pelacakan bencana & banjir
🗳️ Peta pemilu & demografi
🚚 Perencanaan logistik & cakupan layanan
📍 Produk SaaS berbasis lokasi
📱 Visualisasi data yang mobile-first

Contoh: Menggunakan GeoJSON dengan Leaflet

import L from "leaflet";
import indonesiaProvinces from "./indonesia-38-provinces.geojson";

L.geoJSON(indonesiaProvinces, {
  style: {
    color: "#1e40af",
    weight: 1,
    fillOpacity: 0.6,
  },
  onEachFeature: (feature, layer) => {
    layer.bindPopup(feature.properties.province);
  },
}).addTo(map);

Contoh: Menggunakan TopoJSON dengan D3.js

import * as d3 from "d3";
import { feature } from "topojson-client";

// Import file TopoJSON (mendukung Vite / Webpack / Next.js)
import topoData from "./indonesia-38-provinces.topo.json";

const width = 800;
const height = 600;

const svg = d3
  .select("#map")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const projection = d3
  .geoMercator()
  .fitSize([width, height], feature(topoData, topoData.objects.indonesia_provinces));

const path = d3.geoPath().projection(projection);

// Konversi TopoJSON → GeoJSON
const provinces = feature(
  topoData,
  topoData.objects.indonesia_provinces
);

svg
  .selectAll("path")
  .data(provinces.features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("fill", "#60a5fa")
  .attr("stroke", "#1e3a8a")
  .append("title")
  .text(d => d.properties.province);