Kmap-Geocaching - 다음지도/네이버지도 기반 지오캐싱지도

지오캐싱 2014.01.09 12:23 Posted by 드론의 미래가 궁금한 푸른하늘이

한 몇달쯤 시간날 때마다 조금씩 만들어온 사이트가 완성되었습니다. 한마디로 요약하자면 우리나라 지도(구글/다음/네이버지도)를 기반으로 한 지오캐싱 지도입니다.


http://360vr.kr/gpx2/kmap_geocaching.html


지오캐싱이란 GPS를 사용한 첨단 보물찾기 게임입니다. geocaching.com 에 가입을 한 뒤, 등록된 지오캐시를 다운로드 받아 찾아가고, 찾은 후에는 방명록에 사인을 하고 geocaching.com 에 찾았다는 기록을 올리는 방식입니다.


주소를 바꿨습니다. (디렉토리만 gpx에서 gpx2로 변경했습니다. 원래 자리에는 geocaching.com API를 사용하여 개발할 예정입니다.


저는 꽤 오래전부터 운동삼아!!! 지오캐싱을 해왔는데요, 지오캐싱 지도가 구글맵에만 표시된다는 불편이 있었습니다. 특히 산간지역으로 들어가면 구글맵에는 아무것도 나타나지 않아, 높이가 얼마쯤 되는지도 알 수 없고, 등산로에서 얼마나 떨어져 있는지도 알 수 없거든요. 그래서 우리나라 지오캐셔분들은 다음지도나 네이버지도에 지오캐시를 표시할 수 있었으면 좋겠다 하는 바램이 있었습니다. 저도 마찬가지구요. 


사실 제 전공이 이쪽이라서 어떻게 만들면 만들 수 있는지는 개략 알고 있었지만, 하도 오래전에 프로그램 짜른 걸 손을 놓은지라 그냥 누군가 만들어주면 좋겠다고 생각만 하고 있었습니다. 그러다가 작년에, 뭔가 재미있는 일이 없을까... 고민하다가, 그리고 360도 파노라마 뷰어를 만들다가 느낀 한계를 극복하기 위해서는 웹 프로그램에 대해 좀 알아야겠다는 생각이 문득 들었고, 그래서 Javascript와 HTML5, CSS 등에 대해 공부하기 시작했습니다. 그러다가 실습삼아 개발하기 시작한 게 바로 이 사이트였습니다.


제가 개발한 내용에 대해 간략하게 정리해보겠습니다.

geocaching.com의 지오캐시를 다음지도/네이버지도에 표시. 


서두에 말씀드린 것처럼 이게 가장 중요한 목적입니다. 이를 위해 먼저 구글맵/다음지도/네이버지도에 대한 API를 공부해서 지도를 그리는 것부터 시작했습니다. 


대략 지도를 생성하고, 지오캐싱 파일을 읽어들이고, 이것을 마커(Marker)로 생성한 후 좌표를 계산해서 모두가 보이도록 화면을 조정해서 표시했습니다. 클릭하면 Geocaching.com에서 표시되는 것과 비슷한 형태로 infowindow가 뜨도록 했고요.


아래는 다음지도위에 지오캐시를 표시한 겁니다. 스마일 표시는 제가 찾은 지오캐시, 별표는 제가 숨긴 것, 그리고 나머지 상자모양이 아직 찾지 못한, 앞으로 찾아야 할 지오캐시들입니다.



처음에는 세가지 지도를 따로따로 보여주도록 처리하려다가, 이왕이면 한꺼번에 보여주는 게 좋겠다고 생각해서 각각의 지도 영역을 서로 겹치게 화면 전체를 사용하도록 하되, 선택한 지도만 보이고 다른 지도는 보이지 않도록 처리하는 방법을 사용하기로 했습니다. 이러다보니 화면에는 한개의 지도만 보이지만, 실제로는 지도를 3번씩 그리게 되어서 약간 성능이 떨어지는 기계에서 보면 버벅거리는 현상이 나타납니다. 


또 한가지 문제점이 있습니다. 원래대로라면, geocaching.com 의 아이디와 패스워드만 입력하면, geocaching.com에 있는 데이터베이스를 끌고와서 표시해야 합니다. 이를 위해서는 geocaching.com에서 제공하는 API를 사용하면 되는데, geocaching.com에서는 더이상 API를 제공하지 않고 있습니다. 아마 API를 제공해서 재미를 못본 모양이겠죠. 


아무튼 그래서 프리미엄 유저만 사용할 수 있는 기능이긴 한데, 지오캐시를 GPX 파일로 다운로드 받아서 이를 올릴 수 있도록 했습니다. 결국 제가 만든 프로그램은 GPX 파일 뷰어가 되어버린 셈입니다. 


구글지도/다음지도/네이버지도를 연동


이 세가지 지도를 모두 띄우는 것은 그다지 어렵지 않았습니다. 각 사이트 별로 예제들이 있으니까, 그걸 보면서 적당히 수정해 주면 되니까요. 


그런데, 세가지 지도가 따로 놀아서는 효용이 거의 없구요, 그래서 이 세지도를 연동시키는 방법을 고민했습니다. 이 세가지 지도 모두 지도가 표시되는 범위가 변화하면 발생하는 이벤트(event)가 있는데, 이를 이용해서 처리를 했습니다. 



그 결과가 위에 있는 GIF 파일과 같습니다. 어느 지도이든 관계없이 원하는 위치로 확대/축소/이동하면 백그라운드로 다른 지도들도 동일한 위치로 이동되므로, 버튼만 누르면 언제든지 동일한 위치를 볼 수 있게 되었습니다. 이렇게 만들고 나니, 세개의 지도를 손쉽게 비교할 수 있게 되었는데, 적어도 등산지도로 사용할 경우에는 네이버지도가 훨씬 나은 것 같습니다.


스마트폰 지원


원래 이 사이트는 당연히 PC에서 보는 게 정상입니다만, 현장에 나가서도 불편하나마 지도를 확인할 수 있도록 하고 싶었습니다. 스마트 폰으로 그냥 띄워보면 해상도가 맞지않아서 글씨들이 아주 작게 표시되는데 이것만 해결하니 그다지 큰 문제 없이 볼 수 있어 다행이었습니다. 


그리고... "현재위치로"라는 버튼을 하나 두어서 이걸 누르면 현재위치가 화면 중심이 되도록 해 뒀습니다. 이것도 그다지 어렵지 않게 해결.


====

지오캐싱을 하시는 분중에서 이 사이트를 이용하시고 싶은 분은 (일반 멤버도 가능하긴 하지만, 일반 멤버는 포켓쿼리를 만들 수 없으니, 실질적으로는 프리미엄 회원만 사용할 수 있습니다.) 제게 이메일로 지오캐싱 id와 사용하실 비밀번호를 알려주셔야 합니다. 아직 회원가입 기능이 없거든요. 패스워드는 뭘로하셔도 관계없으나, 아이디는 반드시 지오캐싱 ID와 동일해야 합니다. 그래야만 찾은 캐시/숨긴 캐시 등이 올바르게 표현됩니다.


가입이 완료된 분은 지오캐싱 ID와 패스워드를 입력하고 접속하기를 누르면 됩니다. 현재 올려져 있는 GPX 파일의 내용이 뜨게 됩니다. 다른 파일로 바꾸시려면 [파일 선택]을 사용해 원하는 파일을 선택한 뒤 [올리기!]를 누르시면 되고요. 



GPX 파일을 올리면 기존에 올렸던 파일을 덮어쓰게 됩니다. 제 사이트가 공간도 많지 않을 뿐 더러, 여러개의 파일을 올린 뒤 선택하는 기능을 구현할 수 없었기 때문입니다. (기능이 있는지도 아직 모릅니다.)


아... 그리고 테스트 해보고 싶으신 분은 아이디/패스워드에 "test" "test" 혹은 "guest", "1234"를 입력하시면 됩니다. 현재 test 계정에는 지리산쪽 파일이, guest 계정에선 서울쪽 파일이 올려져 있습니다. 


====

사실... 정말 너무너무 허덥합니다. 공개하기도 민망한 수준입니다. 고쳐야 할 것도 엄청나게 많고... 추가해야 할 기능도 엄청 많습니다. 머... 제 실력이 이 정도인지라... 현재로선 여기까지 하고 그만 둬야 할 것 같습니다. 나중에 좀 더 공부해서 더나은 뭔가가 나온다면 다시 고칠지는 모르겠지만요.


민, 푸른하늘

신고

댓글을 달아 주세요

  1. 백흥기  수정/삭제  댓글쓰기

    수고하셨습니다. 그런데 위 싸이트 링크 누르니 Nothing Found 이런 문구가 뜹니다.
    유용하게 사용할 수 있었는데 ㅠㅠ

    2014.01.19 23:47 신고
  2. Favicon of http://www.daum.net BlogIcon Kh0605  수정/삭제  댓글쓰기

    그러면 다음와 네이버은 더더더더 많이를 노력을해야된다는뜻인데요 ㅋㅋㅋㅋㅋㅋ

    2014.01.21 10:01 신고
  3. 나그네  수정/삭제  댓글쓰기

    Google 지도와 네이버지도 다음지도를 연동하는 부분은 연동자체가 안되는 부분입니다.Google은 EPSG:900913이고 Projection 된 타일지도는 네이버 다음과 좌표계가 달라서 맞을수가 없습니다. 그리고 타일이미지를 그렇게 서비스하는 것은 사업자 마음이니 그거에 대해서는 머라고 할 수는 없습니다. 차라리 이미지 타일들을 긁어와다가 WebGL로 와핑을 해서 맞추면 모를까 좌표가 하나도 안맞습니다. GPX도 불러올 때마다 지도API별로 다시 그려줘야 합니다.
    구지 해결할 방법이 있다면 아래 링크와 같은 것인데 라이센스 문제때문에 이도 거의 힘들다고 봐야합니다.
    http://blog.klokantech.com/2013/04/map-overlays-with-webgl-affine.html

    그리고 파노라마뷰어는 구글 custom Streetview API가 보기 더 좋을 것 같습니다.

    2014.01.24 00:08 신고
    • Favicon of http://www.internetmap.kr BlogIcon 드론의 미래가 궁금한 푸른하늘이  수정/삭제

      머... 연동은 제가 원하는 정도로는 충분할 정도로 구현했습니다. 정확하게 맞을 필요가 없어서 대충 비슷한 스케일, 비슷한 위치에 가져다 뒀으니까요. 말씀하신 부분은 나중에 한번 읽어보겠습니다. 감사합니다.

      2014.01.24 09:46 신고
  4. bluejay99  수정/삭제  댓글쓰기

    글 잘 보았습니다. 간만에 지오캐싱을 다시 시작하여 요즘 한창 재미를 느끼는데, 많은 참고가 되겠습니다.
    가끔 들러 한수씩 배워가겠습니다.

    2014.05.17 15:48 신고
  5.  수정/삭제  댓글쓰기

    비밀댓글입니다

    2015.02.23 19:39

BLOG main image
드론과 지도
드론이 세상을 바꾸고 있습니다.드론의 활용처가 계속 넓어지고 있고, 글로벌 기업들의 참여가 많아지고 있으며, 새로운 기술들이 속속 등장하고 있습니다. 하지만 우리나라의 드론 산업은 일부 기업을 제외하면 중국에서 생산된 드론을 가져다가 조립하는 수준이 대부분입니다. 드론은 하드웨어, 소프트웨어, 데이터처리가 복합된 기술입니다. 어떤 기술들을 어떻게 조합할지에 성패가 달렸죠. 5년뒤 10년뒤에 이 블로그엔 어떤 글이 적힐까요? 그것이 궁금합니다.
by 푸른하늘이
Profile for bluesky61

달력

«   2017/07   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

카테고리

전체보기 (1546)
구글어스 (829)
측량/GPS/GIS (215)
사진 (96)
드론/쿼드콥터 (237)
지오캐싱 (47)
기타 (121)
  • 4,063,555
  • 811895
TNM Media textcube get rss

드론과 지도

푸른하늘이's Blog is powered by Tistory. / Supported by TNM Media.
Copyright by 푸른하늘이 [ http://www.ringblog.com ]. All rights reserved.

Textcube TNM Media
푸른하늘이's Blog is powered by Tistory. Designed by Qwer999. Supported by TNM Media.