Deny Herianto

Posted on Dec 17

GeoJSON & TopoJSON Maps of Indonesia (38 Provinces)

#webdev #javascript #performance #resources

Indonesia officially has 38 provinces, and if you’ve ever tried to build a map-based app or dashboards, election maps, logistics tools, disaster tracking, or data visualizations. You’ve probably felt the pains:

Incomplete province data
Outdated boundaries
Inconsistent naming

Why You Should Care

Maps aren’t just pretty pictures. They’re the backbone of your data.

If your province list is off, you’re in trouble. Choropleth maps end up wrong. Analytics don’t match real regions. Tooltips show the wrong names.

Indonesia’s added new provinces, Papua Selatan, Papua Tengah, Papua Pegunungan, Papua Barat Daya. So older datasets are now out of date. A lot of public sources still only show 34 provinces.

What’s Included

Complete Coverage

38 provinces, including:
- Papua Selatan
- Papua Tengah
- Papua Pegunungan
- Papua Barat Daya

Two Formats

GeoJSON
- Easy to use
- Compatible with Leaflet, Mapbox GL, Google Maps overlays
TopoJSON
- ~80–90% smaller file size
- Faster loading
- Ideal for D3.js and large-scale visualizations

Clean & Consistent

Normalized province names
Stable IDs for data joins
No duplicated geometries
Simplified paths (web-friendly)

GeoJSON vs TopoJSON (Quick Recap)

Feature	GeoJSON	TopoJSON
Readability	✅ High	⚠️ Medium
File Size	❌ Large	✅ Very Small
Browser Performance	⚠️ Can lag	✅ Fast
Best For	Simple maps	Data viz, dashboards

If you’re building interactive dashboards, TopoJSON is your friend.

If you want plug-and-play simplicity, GeoJSON works great.

Common Use Cases

This dataset is ideal for:

📊 Government & civic dashboards
🌋 Disaster & flood tracking
🗳️ Election & demographic maps
🚚 Logistics & coverage planning
📍 Location-based SaaS products
📱 Mobile-first data visualizations

Example: Using GeoJSON with 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);

Example: Using TopoJSON with D3

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

// Import TopoJSON file (Vite / Webpack / Next.js supported)
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);

// Convert 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);

DEV Community