Frudy
6k
2020-11-26 23:19:18 작성 2020-11-26 23:28:34 수정됨
3
1067

react 세계지도 라이브러리 소개


안녕하세요. 

실무에서 의외의 경험을 하게되어 공유하고자 글을 작성합니다.


1. 구현해야했던 기능


음 비슷한 서비스가 생각이 안나서 이렇게 설명드려봅니다.


웹사이트에 저런 세계지도 펼쳐놓고,

저 지도의 특정 국가를 마우스 클릭했을 때 해당 국가의 특정 정보를 보여줘야하는 서비스였습니다.


(예를들어 세계지도에 있는 중국을 클릭하면 중국엔 스타벅스점포가 100개있다 리저브 매장은 몇개있다) 

????? 예시가 좀 황당하긴하지만 이런식으로 국가별 특정정보를 보여줘야했습니다.



시도1. google map API 사용

https://cloud.google.com/maps-platform

구글맵 API가 18년도부터 유료로 바뀌었다고 합니다.

이걸로 세계지도를 웹페이지에 그린다음


https://developers.google.com/maps/documentation/javascript/events

구글맵 API에서 지도의 어느 한 부분을 클릭시 클릭이벤트로


(1) 위도와 경도를 제공하고있습니다.

(2) 이 위도와 경도를 통해 

(3) Google의 Geocoding API로 (이것도 유료에요)

(4) 클릭한 나라를 알아내서 정보를 제공하려고 했어요.


복잡하죠? ㅠㅠㅠ 저도 처음 Google Map써보면서 많이 해맸습니다.



시도2. react-simple-map 이용

https://www.react-simple-maps.io/


이 라이브러리도,

특정 나라를 클릭했을 때 클릭된 나라의 정보를 얻어올 수 있었어요.

한국클릭하면 KR 이런거 얻어오는게 가능했죠.


대신 Google Map처럼 그 외 정보는 얻어올 수는 없었지만,

제가 웹사이트에서 만들고자 했던 기능은 충분히 구현할 수 있었습니다. 훨씬 쉽게요.



2. 백엔드 구현 설계

구현은 다음주 월요일부터 하겠지만, 아마 백엔드 개발자분한테 이렇게 요청드릴거같아요.


(1) DB 구현 추측(?)

PK는 유일해야하는데 국가코드도 유일한거니까

나라별 스벅점포 숫자를 DB에 저장할 수 있을거에요..


(2) API 설계 추측(?)

확인결과 남극이나 북극같은 나라 다 뺴보고 했더니 지도에 표시되는 나라가 177개였어요.


"list": [
{
"name": "Afghanistan",
"iso2": "AF",
"starbucksStoreCount": 123
},
{
"name": "Angola",
"iso2": "AO",
"starbucksStoreCount": 123
},
{
"name": "Albania",
"iso2": "AL",
"starbucksStoreCount": 123
}

이런식으로 모든 나라의 국가코드와 스벅점포숫자를 배열로 받아서,


세계지도의 특정 나라를 클릭했을 때

받아뒀던 점포숫자를 보여주는 방식으로 구현하면 될거같은 각이 나왔어요.


뭐 백엔드 개발은 제가 안하겠지만

지도관련 웹서비스 (프론트앤드 파트) 만들어보는건 저도 처음이라 즐거운 경험 했습니다.


처음 기획서받고 잠깐 벙쪘는데 생각보다 일이 쉽게 풀릴 각이 나왔습니다.

코로나가 얼른 없어졌으면 좋겠네요!

0
  • 댓글 3

  • youngyoung
    1k
    2020-11-27 04:24:51

    잘 해결 하셨다니.다행이네요

    음... 그런데 정말 국가별 숫자만 뿌리는 걸로 끝날려나.. 하는 생각이..

    react native map도 있고 (이것도 결국 google api써야 하지만)

    react-leaflet라는 것도 있으니 나중에 사양 바뀌면 한번 참고해보세요




  • Frudy
    6k
    2020-11-27 08:52:13

    넵감사합니다.

    예제는 정확해요.


    백엔드설계는 다를 수있겠지만

    저는 국가목록 데이터에 점포숫자만 같이받으면되요.

  • ansdbduf
    860
    2020-12-01 18:04:24

    https://openlayers.org/en/latest/examples/hitdetect-vector.html


    이것도 참고해보세요.

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.