[React] 우리나라 지도에 색상 표시하기(지도 차트)

대시보드를 구현하던 중,

다른 선형 차트나 파이 차트는

recharts를 이용해 비교적 간단하게 구현할 수 있었다.

(recharts 사용에 대한 글도 작성해볼 예정!)

 

우리나라 지역별 데이터를 표현하고자 했고,

기존의 차트 라이브러리로 구현할 수 없었다.

지도 차트를 구현한 방법을 기록해보려고 한다!

(React를 공부한지 1-2주만에 진행한 내용이라 틀린 내용도 있을 수 있다 🤣)

---

시/도별 데이터를 특정 기준으로

다른 색상 표현을 하는 지도 차트를 구현해보자.

 

지도 이미지를 svg로 구현하기 위해

@svg-maps/south-korea 라이브러리를 사용했다.

@svg-maps/south-korea

npm install --save @svg-maps/south-korea

yarn add @svg-maps/south-korea

 

 

잘 설치해주면 node_modules 폴더에

@svg-maps 폴더가 생긴다.

폴더 내부에 있는 south-korea.svg 파일을

public 폴더 내부에 넣어주자.

 

 

그럼 이제 사용하고자 하는 파일의 component에서

<svg xmlns="south-korea.svg" viewBox="0 0 524 631">
	<path ~~~ />
 	<path ~~~ />
    ~~~
</svg>

svg 태그를 만들어주고,

내부에 south-korea.svg의

svg 태그 내부에 있는 모든 path를 복사해서 넣어준다.

 

이후 className이나 id를 통해 원하는 색상을 추가해주면 된다.

path:hover {
  outline: none;
  fill: black;
}

.rank1 {
  fill: #FAE0E0;
}

.rank2 {
  fill: #F8D3D4;
}

.rank3 {
  fill: #F19B9A;
}

.rank4 {
  fill: #EC5A5A;
}

.rank5 {
  fill: #E13632;
}

각 지역위에 마우스를 올릴 때 border가 생긴다.

이를 outline: none; 으로 설정해주면 사라진다.

 

그리고, 각 지역의 색상은 fill을 이용하면 된다.

 

여기까지 지도를 올리고, 지도위에 색상을 입히는 방법이었다.

---

지금부터는 각 지역마다 다른 색상을 입힌 방법이다.

(지도 표현 이외의 내용은 생략했다.)

 

먼저, Map 내부에 svg 태그를 넣어주고,

원하는 Data를 함께 넣어준다.

const Map = ({ heatmapData }) => {
  return (
    <svg className="heatmap-map" xmlns="south-korea.svg" viewBox="0 0 524 631">
      {heatmapData.map((city) => (
        <>
          <MapCity
            cityId={city.cityId}
            name={city.name}
            rank={city.rank}
            d={city.d}
          />
        </>
      ))}
    </svg>
  );
};

 

mapData의 각 지역마다 path 태그를 포함해준다.

 

const MapCity = ({ cityId, name, rank, d }) => {
  return (
    <path
      id={cityId}
      name={name}
      className={rank}
      d={d}
    ></path>
  );
};

 

Data를 넘겨줄 때, 각 지역에 맞는 className과 id, d 값 등

원하는 property를 포함해서 넘겨주었다.

const heatmapData = cityRatioResList.map(function (el) {
    let obj = {};
    obj["rank"] = cityRank(el.ratio);
    obj["name"] = cityName(el.city);
    obj["id"] = cityId(el.city);
    obj["d"] = cityD(el.city);
    return obj;
  });

 

참고로 한 function을 남겨보았는데,

path의 내부에 필요한 d 속성값을

매칭해주는 function을 만들어주었다.

function cityD(city) {
  switch (city) {
    case "부산":
      return "m ~~";
    case "대구":
      return "m ~~";
    case "대전":
      return "m ~~";
      
    ~~~
    
    default:
      return "none";
  }
}

위 함수처럼 각 className이나 그 외에 필요한 내용을 포함해 Data를 만들면 될 것 같다.

이렇게 원하는 data 값에 따라 지도에 다른 색상을 표현할 수 있다.

 

다음에는 지도 위에 마우스를 올렸을 때,

각 지역에 맞는 값을 알려주는 tooltip 구현 방법을 올릴 예정이다.

만약, tooltip까지 구현해야한다면, 해당 글을 참고해주면 될 것 같다!