leaflet - #10 통계지도 만들기 2편

지난 글에서는 통계용 서울시 행정경계 데이터를 로딩하는 방법을 설명했습니다.

이번에는 이 행정경계에 0에서 100사이의 무작위 값(value)을 부여하고, 값의 범위에 따라 색상을 지정하는 방법을 설명드리겠습니다. 결과는 아래와 같습니다.

tutorial09-2.js

0.13MB

 

주요 코드를 설명 드리면,

for (var i in data.features) {
    var start = 0;
    var end = 100;
	var feature = data.features[i];
	if (!feature.properties) continue;
    feature.properties.value = Math.floor((Math.random() * (end - start + 1)) + start);
}

geojson = L.geoJson(data, {
    style: function (feature) {
        var v = feature.properties.value;
        var fColor = v > 100 ? '#800026' :
            v > 80 ? '#BD0026' :
            v > 60 ? '#E31A1C' :
            v > 40 ? '#FC4E2A' :
            v > 20 ? '#FD8D3C' :
            v > 0 ? '#FEB24C' :
            '#FED976';
        return {
            "fillColor": fColor,
            "weight": 2,
            "opacity": 1,
            "color": 'white',
            "dashArray": '3',
            "fillOpacity": 0.7
        }
    }
}).addTo(map);

1~6: 서울시 구별 feature의 속성에 value를 추가하고 0에서 100사이 무작위 값 설정

11~18: value 값이 0에서 20씩 증가할때마다 다른 색 지정

19~25: 채움색(fillColor), 외곽선굵기(weight), 외곽선 투명도(opacity), 외곽선 색상(color), 외곽선 점선 스타일 길이(dashArray), 채움색 투명도(fillOpacity) 지정

 

이번 예제에서는 value값을 랜덤하게 지정했지만, 이 값을 통계지표로 대체하면 통계값에 따른 단계구분을 표현할 수 있게 됩니다.

 

다음 글에서는 지도 범례와 통계값을 창에 표시해 보겠습니다.