인도네시아 GeoJSON 및 TopoJSON 지도 (38개 도)

발행: (2025년 12월 18일 오전 12:34 GMT+9)
4 min read
원문: Dev.to

Source: Dev.to

왜 이것이 중요한가

지도는 단순히 보기 좋은 시각 자료가 아닙니다. 지도는 데이터의 기반입니다.
시도 목록이 정확하지 않다면 시스템 전체가 문제를 일으킵니다: choropleth 지도는 잘못 표시되고, 분석 결과는 실제 지역과 맞지 않으며, 툴팁은 잘못된 이름을 보여줍니다.

인도네시아는 최근에 몇 개의 새로운 주—남파푸아, 중파푸아, 산악파푸아, 남서파푸아—를 추가했으며, 이로 인해 오래된 데이터셋은 더 이상 유효하지 않습니다. 심지어 많은 공개 소스는 아직 34개 주만을 표시하고 있습니다.

범위

전체 데이터

38개 주, 포함:

  • 남파푸아
  • 중파푸아
  • 산악파푸아
  • 남서파푸아

두 가지 포맷

  • GeoJSON – 사용이 쉽고 Leaflet, Mapbox GL, Google Maps 오버레이와 호환됩니다.
  • TopoJSON – 파일 크기가 약 80–90 % 작아 로드 시간이 빠르고, D3.js 및 대규모 시각화에 이상적입니다.

정제·일관성

  • 정규화된 주 이름
  • 데이터 조인을 위한 안정적인 ID
  • 중복 지오메트리 없음
  • 웹 친화적으로 단순화된 경로

GeoJSON vs TopoJSON (요약)

특징GeoJSONTopoJSON
가독성✅ 높음⚠️ 보통
파일 크기❌ 큼✅ 매우 작
브라우저 성능⚠️ 느릴 수 있음✅ 빠름
가장 적합한 용도간단한 지도데이터 시각화, 대시보드
  • 대시보드와 같은 인터랙티브 환경을 구축한다면 TopoJSON이 적합합니다.
  • 플러그‑앤‑플레이가 필요하다면 GeoJSON만으로도 충분합니다.

활용 사례

이 데이터셋은 다음에 이상적입니다:

  • 📊 정부·공공 서비스 대시보드
  • 🌋 재난·홍수 추적
  • 🗳️ 선거·인구통계 지도
  • 🚚 물류·서비스 커버리지 계획
  • 📍 위치 기반 SaaS 제품
  • 📱 모바일‑우선 데이터 시각화

예시: Leaflet과 함께 GeoJSON 사용하기

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

예시: D3.js와 함께 TopoJSON 사용하기

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

// Import file TopoJSON (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);

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

다운로드

다음 저장소에서 데이터셋을 다운로드하세요:

Back to Blog

관련 글

더 보기 »