통계지도3 leaflet - #11 통계지도 만들기 3편 이번 글에서는 정보와 범례 창을 추가해 보도록 하겠습니다. leaflet은 지도 창 위에 보여지는 요소 중 지도를 제외하고 모두 컨트롤로 취급합니다. 정보와 범례 모두 html 요소 중 div 태그(tag)를 사용한 요소입니다. 정보 컨트롤은 마우스 커서를 해당 구에 올려 놓으면 해당 구의 영역을 하일라이트로 표시하고 구 이름과 통계 지표값(예제에서는 value)을 표시합니다. 범례 컨트롤은 지도 화면 우측 하단에 지표 단계별 색상 목록을 표시합니다. 이전 예제와 다른 점은 우선 브이월드 제공 배경지도 중 회색 배경지도를 사용해 통계가 좀 더 확연히 드러나게 수정했습니다. 첨부한 소스 배경지도 설정 부분에 vworldLayer URL주소에 보시면 2d/Base -> 2d/gray로 바뀐 부분을 참고하시면.. 2022. 2. 2. leaflet - #10 통계지도 만들기 2편 지난 글에서는 통계용 서울시 행정경계 데이터를 로딩하는 방법을 설명했습니다. 이번에는 이 행정경계에 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: .. 2022. 2. 2. leaflet - #9 통계지도 만들기 1편 통계지도 형태 중 하나인 단계구분도(등치맵, choropleth Map)를 이번 예제에서 만들어 보겠습니다. 서울시 구별 데이터를 가지고 지도에 통계지도를 만들어 보도록 하겠습니다. 우선 통계 데이터를 표시할 지도가 필요한데, 통계청이나 공공데이터 포털에서 행정경계 자료를 다운로드 받을 수 있습니다. 이 자료를 적당히 가공(QGIS 또는 Map Shaper)하면 서울시 경계 데이터를 만들 수 있습니다. 만들기 귀찮으신 분은 아래 첨부자료를 참고해 보시기 바랍니다. 이번 글에서는 통계 데이터용 서울시 경계를 지도에 로딩하는 것까지 설명드리겠습니다. 입니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 1.. 2022. 2. 1. 이전 1 다음
