chart map svg

코로나 라이브 페이지에 접속하면 다음과 같은 화면을 볼 수 있습니다.

 

코로나 라이브 페이지

 

화면의 지도는 네이버 지도나 카카오 지도가 아닌 차트 라이브러리로 그릴 수 있습니다.

 

차트 라이브러리는 많은데 그중에 저는 D3 라이브러리로 그려보겠습니다.

 

예제 코드

 

예제 코드를 보면 첫번째 블럭은 지도를 그리기 위한 초기 정보를 세팅하고 있습니다.

(지도 svg 대상 엘리먼트, 배경 색상, 지도 오프셋, 지도 스케일, 중심 좌표)

 

두번째 블럭은 광역단위 지도 좌표 데이터입니다.

(광역단위 좌표 데이터 및 표출 색상)

 

세번째 블럭은 실제 지도를 그리고 있습니다.

 

결과 화면

 

앞에서 작성한 대로 잘 표출되고 있습니다.

 

딱히 어렵지 않아서 금방 개발할 수 있습니다.

 

참고 필요하시면 예제 파일 다운받으시면 됩니다.

 

test_svg.html

1.31MB