[팀 프로젝트(EZEN TRIP)] SVG 한국 지도 다운 및 CSS 설정

프로젝트를 계획하면서 구상했던건 [전국 지도로 여행 가고 싶은 지역을 클릭하면 그 지역의 여행코스로 넘어갔으면 좋겠다] 였다.

 

처음엔 이미지를 활용해 직접 위치를 지정해서 구역별로 구분하려고 했으나 아래의 사유로 실패했다.

1. 디자인적인 부분(내가 클릭한 지역이 어디인지 한번에 확인할 수 있길 바람)

2. 코딩 능력의 한계로 이미지 위에 직접적으로 구역을 정해서 좌표 설정하는게 어려웠다

 

결국, 국내의 여행사이트들과 지역 홍보 사이트를 돌며 코드를 뜯다가 SVG 지도를 알게 되었고 이를 정리해 보았다.

 

---

 

Free SVG Maps

위의 사이트에 들어가면 각국의 나라 지도를 무료로 다운받아서 사용할 수 있다.

 

 

이번에 진행하게 된 팀프로젝트 EZEN TRIP은 국내여행을 중점으로 운영하는 사이트로 한국의 지도를 다운받았다.

 

원하는 버전에 맞춰서 다운받으면 된다

 

 

다운받은 파일을 실행시키면 아래와 같은 모습으로 나타난다

 

CSS 작업을 위해 <Path id>를 전부 지역 명으로 변경하였다

 

구성했던  [내가 보고 있는 지역이 어디인지 확실히 알고 싶다] 라는 계획대로 작업을 진행했다.

 

색상 변경은 변경시점을 마우스를 클릭했을 때와 마우스를 올렸을 때 둘 중 하나로 고민했지만 

내가 이용자라면 하나하나 클릭하는 것 보단 마우스를 올렸을때 변경이 되는게 좋을 것이라 생각했다

 

구역 별 색상을 다르게 하면 바로 옆 지역으로 옮겨갔을때 알아차리기 좋을 듯 해서 다른 색상으로 구성했다.

 

 

마우스를 올렸을때 지역명이 나올 수 있게 <title>태그로 작업했다

결과물을 보면 아래와 같다.

 

---

 

 

이렇게 간단하게 지도작업을 완료했다