안녕하세요. 오랫만에 인사드립니다.
ridingazua.cc 코스편집기 개발자 이형규입니다.
얼마전 코스편집기와 고도 정확도에 대한 이슈가 있어 뭔가 어찌어찌해보려다가 생각보다 쉽지 않은 문제임을 알고 방관중입니다. ㅋㅋㅋ
(도움주신 분도 계셨습니다만 이게 생각보다 어렵더군요 ㅠ)
여튼 그 얘기를 하려는 건 아니고, ridingazua.cc 코스편집기에 오버레이 이미지맵이라는 새로운 기능을 추가하였습니다.
구글지도에서 사용하는 맵 타일 이미지와 동일한 규격으로 제공되는 다른 종류의 지도를 코스편집기의 지도위에 레이어로 겹쳐서 보여주는 기능입니다.
...라고 하면 이 기능을 어디다 어떻게 써먹는지 모르시는 분들이 대다수일 겁니다.
오버레이 이미지맵에 사용할 수 있는 지도의 종류 중에는 스트라바의 히트맵도 있습니다.
아래의 내용은 ridingazua.cc 의 오버레이 이미지맵 기능을 이용하여 스트라바 히트맵을 적용하는 방법입니다.
(제가 만든 기능은 코스편집기에 스트라바 히트맵을 띄우는 기능이 아닙니다. 오버레이 이미지맵 기능을 구현한 것이며, 그 기능을 이용해 스트라바 히트맵을 적용하는 것은 전적으로 사용자의 선택입니다.)
----------
내용에 들어가기 전, 이 내용은 아래의 문서에 기반한 것임을 알려드립니다. 개인적으로만 사용해야하며, Open Street Map과 함께 사용하여야합니다.
https://wiki.openstreetmap.org/wiki/Strava#Global_Heatmap
ridingazua.cc 코스편집기에서에서 스트라바 히트맵의 오버레이를 띄우는 방법은 간단하면서도 복잡합니다(?). ㅎㅎㅎ
웹브라우저는 PC의 크롬을 사용해주십시오. (모바일 크롬도 안됨.)
다른 웹브라우저를 사용해도 가능은 합니다만, "웹 브라우저의 개발도구에서 쿠키를 가져오는 방법"에 대해서 알지 못한다면, 그냥 크롬을 사용해주십시오.
일단 스트라바 히트맵 웹사이트에 접속합니다.
https://www.strava.com/heatmap
그리고 로그인을 해야합니다. 회원가입이 되지 않았다면 회원가입도 해야합니다. (아마 회원이 아닌 분은 거의 없을 듯...)
로그인이 완료되면 다시 스트라바 히트맵 웹페이지가 표시될 것입니다.
스트라바 웹사이트를 통해 저장된 쿠키 정보 중 일부를 복사해와야합니다. (쿠키가 무엇인지 몰라도 괜찮습니다.)
아래의 URL을 복사하여 주소표시줄에 입력합니다. (PC버젼의 크롬이 아니라면 불가능 합니다.)
chrome://settings/cookies/detail?site=strava.com
위와 같은 화면이 나타날 것입니다.
이 중 CloudFront-Key-Pair-Id, CloudFront-Policy, CloudFront-Signaure 세 항목을 펼친 후 나타나는 콘텐츠의 내용을 복사해서 간단한 텍스트편집기(예를 들면 메모장) 같은 곳에 옮겨주십시오.
대충 아래와 같은 식이겠죠. 사용자마다 다른 값입니다. 복잡하고 길고 난해한 텍스트들 입니다.
----------
CloudFront-Key-Pair-Id:
APKAIDWQGDQMG7VUQPSA
CloudFront-Policy: eyJTdGF0ZW1lbnQiOiBbeyJSZXNvdXEjd156Imh0dHBzOi8vaGVhdG1hcC1leHRlcm5hbC0qLnN0cmF2YS5jb20vKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkDke12oVGltZSI6MTYyMjA3Mjc4M30sIkRhEjd12mVhdGVyVGhhbiI6eyJBVHahahBvY2hUaW1lIjoxNjIwODQ4NzgzfX19XX0_
CloudFront-Signature:
QmJb3iudS6uaSeECOAif5e9lrz1m5mliGgl7gZbD1TssawSnfhpGp~8-jB4T9M5K4vRO7iPEjd12zoPRdGfYEK7lUtrpeipYT~n~pMKSzoCsmvxWilfCLSsrga2C1XvFePHMJ7oBlaReebfZ20SwjX84WWOpGd8a8VOi2j0FKzuinPlC7IKUVZHDvQCCulczPMf9nDjq32DGeIZKYjikZrse0J520EcLN4Co-x6IDlekf23Rfk5sJAk5LDbyJEM1suz0arCQSIfiL3S6cjbYYCFUdudf97RBKeN7x-QqkvDzSKDJAm7s8Z133-Uj5hjevmUyMeLz4ptVAngEHJsXfMKSluQ__
----------
이제 위의 값을 이용해서 스트라바 히트맵의 이미지 맵타일 주소 형식을 만들어내야합니다.
형식은 아래와 같습니다.
https://heatmap-external-[a 또는 b 또는 c 중 한글자].strava.com/tiles-auth/[활동 유형]/[색상]/{zoom}/{x}/{y}.png?px=128&Key-Pair-Id=[CloudFront-Key-Pair-Id]&Policy=[CloudFront-Policy]&Signature=[CloudFront-Signature]
대괄호("[]")로 감싸져 있는 부분은 다른 값으로 변경되어야합니다.
[a 또는 b 또는 c 중 한글자]...는 말그대로 a, b, c 중에 한글자로 바꿔주세요.
[활동 유형]은 아래의 텍스트 중 하나로 바꿔주세요. 자전거 기준의 히트맵을 원한다면 당연히 ride가 되어야합니다.
run
ride
both
winter
water
all
[색상]은 아래의 텍스트 중 하나로 바꿔주세요. 히트맵의 선색상이 선택된 색상으로 보여집니다.
blue
red
bluered
purple
[CloudFront-Key-Pair-Id], [CloudFront-Policy], [CloudFront-Signature] 세 부분은 위에서 따로 적어두었던 그 값들로 변경합니다.
완성된 스트라바 히트맵의 이미지 맵타일 주소의 샘플은 아래와 같습니다.
이렇게 완성된 URL 형식을 복사 한 후, ridingazua.cc의 오버레이 이미지 맵 설정의 URL 템플릿에 적용해주시면 됩니다.
(참고로 위에 제가 작성한 샘플은 작동하지 않습니다. 작동하지 않도록 임의로 변조한 것이므로 위의 샘플을 복사해서 붙여넣어봤자 안나옵니다.)
이런식이 되겠네요.
"적용" 버튼을 누르게 되면,
이런식으로 히트맵이 나타나게 됩니다!
유의 사항:
위의 CloudFront-Key-Pair-Id, CloudFront-Policy, CloudFront-Signaure 세가지 값은 유효기간이 있기 때문에 일정 기간 이후에는 작동하지 않을 수 있습니다. 그럴 경우, 스트라바 웹사이트에 다시 접속, 로그인 하신 후에 위의 과정을 다시 진행하면 됩니다.
끝.
스트라바 사용자가 공개로 저장한 지난 2년간의 모든 GPS 로그를 세계지도에 겹쳐그리고 선이 많이 겹쳐지는 부분일 수록 선 색상이 밝게 보여지는 그런 기능입니다. (한달에 한번씩 갱신된다고 합니다.)
인기있는 라이딩 코스가 어디인지를 알수 있는 것도 가능하지만...
그래블바이크나 MTB를 타시는 분들처럼 일반적인 지도를 통해 라이딩 코스를 알수 없는 사용자에게는 훨씬 더 가치있습니다. 네이버지도, 카카오지도, 오픈스트리트맵 어디서도 보이지 않는 임도, 싱글트랙, 파크, 오프로드등이 스트라바의 히트맵에서는 보입니다.
(...라는 사실을 저도 얼마전에 알았습니다... ㅠ_ㅠ...)
지금 공지에 올라가 있는 글 말미에 이 글 링크를 넣으시면 좋을거 같아용...^^
넵~ 그렇게 할게요~ ㅎ
스트라바 히트맵은 특정 활동형태만 설정해서 볼수 있습니다. 본문에도 나와있지만 ride로 설정해놓으면 자전거 히트맵만 나와요~
물론 사용자가 자전거 활동으로 해놓고 등산한거라면 그런 것도 같이 나오겠지만요. ㅎㅎㅎ 그렇지만 그런건 비율상 낮겠지요~
수고하셨습니다~!
대체 왜 나만 안 되는거야 숱도 별로 없는 머리 쥐어뜯다가 겨우 해결했다며 전화해서 알려주셨습니다.
ㅎㅎㅎ 그런분 계실거 같아서 완성된 샘플도 같이 적어놓았던건데... 그 부분을 놓치셨나보군여 ㄷㄷㄷ
파이어폭스 플러그인 Cookie Quick Manager 를 설치해도 쿠키정보 확인할 수 있네요 ~~
오 그렇군요~ 사실 어떤 웹브라우저를 쓰시던 개발툴 써서 쿠키만 볼줄 알면 다 됩니다 ㅋㅋㅋ
제가 갑자기 바빠지기도 했고,
카카오에서 앱에다가 gpx 지원 기능을 넣어버리면서 고도 문제가 해결이 되어버린 느낌도 들고 해서
일단 방치중입니다.
필요하시면 연락 주세요(오히려 제가 필요하게 될 지도 모르겠습니다)
잘 나옵니다.
chrome://settings/cookies/detail?site=strava.com
쿠키 정보 페이지에서 만료된 쿠키는 안나오기 때문에 strava.com 웹사이트 이용이 오랜시간동안 없다가...
쿠키 설정 페이지로 바로 들어가면 안나옵니다.
그럴 땐 strava.com 웹사이트 한번 들어갔다가 다시 해보세요~
잘 나올겁니다.