leaflet - #11 통계지도 만들기 3편

이번 글에서는 정보와 범례 창을 추가해 보도록 하겠습니다.

leaflet은 지도 창 위에 보여지는 요소 중 지도를 제외하고 모두 컨트롤로 취급합니다. 정보와 범례 모두 html 요소 중 div 태그(tag)를 사용한 요소입니다.

정보 컨트롤은 마우스 커서를 해당 구에 올려 놓으면 해당 구의 영역을 하일라이트로 표시하고 구 이름과 통계 지표값(예제에서는 value)을 표시합니다.  범례 컨트롤은 지도 화면 우측 하단에 지표 단계별 색상 목록을 표시합니다.

이전 예제와 다른 점은 우선 브이월드 제공 배경지도 중 회색 배경지도를 사용해 통계가 좀 더 확연히 드러나게 수정했습니다. 첨부한 소스 배경지도 설정 부분에 vworldLayer URL주소에 보시면 2d/Base -> 2d/gray로 바뀐 부분을 참고하시면 됩니다. Base, gray 외에도 midnight(야간), Hybrid(하이브리드), Satellite(항공사진)을 배경지도로 제공하고 있습니다.

tutorial09-3.js

0.14MB

 

주요 자바스크립트 소스는 아래와 같습니다.

function getColor(v) {
	return v > 100 ? '#800026' :
	v > 80 ? '#BD0026' :
	v > 60 ? '#E31A1C' :
	v > 40 ? '#FC4E2A' :
	v > 20 ? '#FD8D3C' :
	v > 0 ? '#FEB24C' :
	'#FED976';
}

geojson = L.geoJson(data, {
    style: function (feature) {
        var v = feature.properties.value;
        var fColor = getColor(v);
        return {
            "fillColor": fColor,
            "weight": 2,
            "opacity": 1,
            "color": 'white',
            "dashArray": '3',
            "fillOpacity": 0.7
        }
    },
	onEachFeature: function(feature, layer) {
		layer.on({
			"mouseover": function(e) {
				var layer = e.target;

				layer.setStyle({
					weight: 5,
					color: '#1AA160',
					dashArray: '',
					fillOpacity: 0.7
				});

				if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
					layer.bringToFront();
				}

				info.update(layer.feature.properties);
			},
			"mouseout":function(e) {
				geojson.resetStyle(e.target);
				info.update();				
			},
			"click":function(e) {
				map.fitBounds(e.target.getBounds());
			}
		});
	}
}).addTo(map);

// 정보 표시 컨트롤 추가
var info = L.control();
	
info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
	this._div.style = 'padding: 6px 8px;font: 14px/16px Arial, Helvetica, sans-serif;background: white;background: rgba(255,255,255,0.8);box-shadow: 0 0 15px rgba(0,0,0,0.2);border-radius: 5px;';
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4 style="margin: 0 0 5px;color: #777;">서울시 구별 통계</h4>' +  (props ?
        '<b>' + props.adm_nm + '</b><br />' + props.value + '%'
        : '마우스를 올려보세요.');
};

info.addTo(map);

// 범례 표시 컨트롤 추가
var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [0, 20, 40, 60, 80, 100],
        labels = [];
	div.style = "padding: 6px 8px;background: white;background: rgba(255,255,255,0.8);line-height: 18px;color: #555;";

    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            '<i style="width: 18px;height: 18px;float: left;margin-right: 8px;opacity: 0.7;background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '%<br>' : '+');
    }

    return div;
};

legend.addTo(map);

소스코드를 대략적으로 설명 드리면,

1~9: 값에 따른 색상값 리턴

24~50: 서울 시 구별로 마우스 커서를 올렸을 때, 빠졌을 때, 클릭했을 때 action을 정의

53~70: 지도 오른쪽 상단에 표시할 정보 창(컨트롤) 추가

72~91: 지도 오른쪽 하단에 범례 창(컨트롤) 추가

 

이번 통계지도는 leaflet 홈페이지에 있는 통계지도 샘플을 기초로 만들었으면, 배경지도는 오픈플랫폼, 행정구역 경계는 통계청 자료를 참고해서 만들었습니다. 다른 샘플, 데이터, 예제는 해당 사이트를 참고하시면 되겠습니다.