Day 4 : 노력하는 자에겐 상이...?

2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기

Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기

이 전글도 보고 와주시면 감사하겠습니다!!!

---

오늘도 꾸준히 1시간, ISL 에 투자했습니다.

 

어제의 글처럼 simplemaps.com 에서의 svg는 그대로 사용하지만

위 사이트에서 제공하는 기능은 일일히 구현을 하기로 독한 마음먹고

svg 코드를 분석하는 와중에 특이한 점을 하나 발견했습니다.

 

<path fill="#88a4bc" stroke="#ffffff"
            d="M118.8,379.3L117.7,380.40000000000003L116.5,
            379.50000000000006L117.1,377.70000000000005L116.
            ...중략"
            class="sm_state sm_state_US" 
            opacity="1" 
            stroke-opacity="1" 
            stroke-width="3.78375" 
            stroke-linejoin="round"
            transform="matrix(0.6938,0,0,0.6938,0,0)"
            style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; cursor: pointer; stroke-opacity: 1; stroke-linejoin: round; fill-opacity: 1;"
            fill-opacity="1" />

보이시나요?

class="sm_state sm_state_US"라고 적혀있습니다.

해당 코드는 미국땅에 해당하는 path 태그의 내용인데

 

클래스에 US라는 것이 있는 것으로 보아

이미 path 태그에는 나라를 구분하기 위한 코드가 들어가 있다는 것을

확인할 수 있습니다!

 

그렇다면...?

그렇죠!

전 세계에 존재하는 204개의 나라를 일일이 구분할 필요가

없어졌다는 얘기죠!!

그렇다면 제가 해야 할 것은 구별된 나라에 따른

환경 세팅과 로직 설정입니다.

환경 세팅이란?

환경 세팅이라는 말이 거창하다고 느껴진다면

사실 그냥 json 파일을 만든 것입니다!

제가 작성한 json 파일은 다음과 같습니다.

{
    "settings": {},
    "country_specific": {
        "AF": {
            "name": "Afghanistan",
            "description": "default",
            "color": "default",
            "hover_color": "default",
            "url": "default"
        },
        "AO": {
            "name": "Angola",
            "description": "default",
            "color": "default",
            "hover_color": "default",
            "url": "default"
        },
        "AL": {
            "name": "Albania",
            "description": "default",
            "color": "default",
            "hover_color": "default",
            "url": "default"
        },
   //중략
}

settings는 추후 지도의 설정을 json으로 관리하기 위해 만들었고

country_specific 은 추후 나라별로 다른 css, js 이벤트를 할 수 있도록 만들었습니다.

 

로직 설정이란?

아직은 나라 별 마우스 호버 시 

해당 나라의 색깔에 있어서 차별점은 두지 않았습니다.

 

그래서 모든 svg 태그 내의 path 태그에 대해서

커서가 들어갔을 때의 색깔과 나왔을 때의 색깔을 설정해 주었습니다.

마우스 in/out

TIL

설령 다른 사람의 코드(제 경우 svg이지만)를 가져오더라도

완숙이 이해를 해야 활용도 내가 만든 것처럼 활용이 가능하다!

 

피드백은 언제나 환영입니다!

https://github.com/xpmxf4/ISL

GitHub - xpmxf4/ISL