요긴소프트

이번 글에서는 정보와 범례 창을 추가해 보도록 하겠습니다. leaflet은 지도 창 위에 보여지는 요소 중 지도를 제외하고 모두 컨트롤로 취급합니다. 정보와 범례 모두 html 요소 중 div 태그(tag)를 사용한 요소입니다. 정보 컨트롤은 마우스 커서를 해당 구에 올려 놓으면 해당 구의 영역을 하일라이트로 표시하고 구 이름과 통계 지표값(예제에서는 value)을 표시합니다. 범례 컨트롤은 지도 화면 우측 하단에 지표 단계별 색상 목록을 표시합니다. 이전 예제와 다른 점은 우선 브이월드 제공 배경지도 중 회색 배경지도를 사용해 통계가 좀 더 확연히 드러나게 수정했습니다. 첨부한 소스 배경지도 설정 부분에 vworldLayer URL주소에 보시면 2d/Base -> 2d/gray로 바뀐 부분을 참고하시면..

지난 글에서는 통계용 서울시 행정경계 데이터를 로딩하는 방법을 설명했습니다. 이번에는 이 행정경계에 0에서 100사이의 무작위 값(value)을 부여하고, 값의 범위에 따라 색상을 지정하는 방법을 설명드리겠습니다. 결과는 아래와 같습니다. 주요 코드를 설명 드리면, 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: ..