leaflet - #9 통계지도 만들기 1편

통계지도 형태 중 하나인 단계구분도(등치맵, choropleth Map)를 이번 예제에서 만들어 보겠습니다. 서울시 구별 데이터를 가지고 지도에 통계지도를 만들어 보도록 하겠습니다.

우선 통계 데이터를 표시할 지도가 필요한데, 통계청이나 공공데이터 포털에서 행정경계 자료를 다운로드 받을 수 있습니다. 이 자료를 적당히 가공(QGIS 또는 Map Shaper)하면 서울시 경계 데이터를 만들 수 있습니다. 만들기 귀찮으신 분은 아래 첨부자료를 참고해 보시기 바랍니다.

 

tutorial09.js

0.13MB

 

이번 글에서는 통계 데이터용 서울시 경계를 지도에 로딩하는 것까지 설명드리겠습니다.

 

 

입니다.

var hanRiverPos = [37.5118, 126.9745];
var map = L.map('map').setView(hanRiverPos, 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var geojson;
var data = {
"type":"FeatureCollection",
"name":"seoul2021",
"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},
"features":[
{"type":"Feature","properties":{"adm_cd":"11010","adm_nm":"종로구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11020","adm_nm":"중구",   ..생략...},
{"type":"Feature","properties":{"adm_cd":"11030","adm_nm":"용산구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11040","adm_nm":"성동구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11050","adm_nm":"광진구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11060","adm_nm":"동대문구"..생략...},
{"type":"Feature","properties":{"adm_cd":"11070","adm_nm":"중랑구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11080","adm_nm":"성북구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11090","adm_nm":"강북구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11100","adm_nm":"도봉구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11110","adm_nm":"노원구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11120","adm_nm":"은평구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11130","adm_nm":"서대문구",.생략...},
{"type":"Feature","properties":{"adm_cd":"11140","adm_nm":"마포구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11150","adm_nm":"양천구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11160","adm_nm":"강서구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11170","adm_nm":"구로구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11180","adm_nm":"금천구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11190","adm_nm":"영등포구",.생략...},
{"type":"Feature","properties":{"adm_cd":"11200","adm_nm":"동작구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11210","adm_nm":"관악구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11220","adm_nm":"서초구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11230","adm_nm":"강남구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11240","adm_nm":"송파구", ..생략...},
{"type":"Feature","properties":{"adm_cd":"11250","adm_nm":"강동구", ..생략...},
]
}
;

geojson = L.geoJson(data).addTo(map);

map.attributionControl.addAttribution('통계청 &copy; <a href="https://sgis.kostat.go.kr/">서울시 행정경계</a>');

주요 부분만 설명드리면

44: 행정경계 geojson 데이터로부터 레이어 생성

46: 화면 하단에 데이터 출처 명시

 

leaflet에서 GeoJSON 레이어를 생성하기 위해서는 GeoJSON 데이터가 필요합니다. 만약 GeoJSON 데이터의 url로 GeoJSON 레이어를 생성하고 싶으시면

$.getJSON("GeoJSON URL 주소", function (data) {
  geojson = L.geoJson(data).addTo(map);
});

jQuery나 기타 다른 방법으로 GeoJSON 데이터를 로딩 후 L.geoJson 레이어를 생성하셔야 합니다.

 

다음 글에서는 통계값을 맵핑하고 통계 값별로 스타일을 주는 방법을 설명드리겠습니다.