210808(일) - 지도 완성

1. 지도 완성

---

1. 지도 완성

svg를 단순하게 이용하려 했는데, 이런 방법으로는 데이터의 값에 따라 유동적으로 svg를 구성할 수 없었다. 결국 svg를 컴포넌트화 했다. 어쩌면 이렇게 되는 게 당연한 수순인데, 내가 몰랐던 것 같기도 했다.

데이터는 map으로 순회하여 표현했는데, 지도 부분과 지역 위에 나타나는 네모 박스를 한 번에 해결하고 싶었다. 이 부분은 svg를 표현할 때 가장 바깥을 svg 태그로 감싸야 했기 때문에 결국 다음과 같이 분리해서 코드를 구현할 수 밖에 없었다.

지도 부분 코드

지도 설명 박스 부분은 각 지역에 따라서 직접 위치를 설정했고, 마우스를 올리거나 뗄 경우 색이 변해서 사용자가 쉽게 인지할 수 있도록 했다. 이와 같은 기능은 지도svg에도 같이 적용하여, 지도 상에서 지역이나 설명 박스 부분에 마우스 이벤트가 중복되어 일어나도록 구현했다.

최종 완성 지도