안녕하세요. 오랫만에 인사드립니다.

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] 세 부분은 위에서 따로 적어두었던 그 값들로 변경합니다.

완성된 스트라바 히트맵의 이미지 맵타일 주소의 샘플은 아래와 같습니다.

https://heatmap-external-c.strava.com/tiles-auth/ride/red/{zoom}/{x}/{y}.png?px=128&Key-Pair-Id=APKAIDWQGDQMG7VUQPSA&Policy=eyJTdGF0ZW1lbnQiOiBbeyJSZXNvdXEjd156Imh0dHBzOi8vaGVhdG1hcC1leHRlcm5hbC0qLnN0cmF2YS5jb20vKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkDke12oVGltZSI6MTYyMjA3Mjc4M30sIkRhEjd12mVhdGVyVGhhbiI6eyJBVHahahBvY2hUaW1lIjoxNjIwODQ4NzgzfX19XX0_&Signature=QmJb3iudS6uaSeECOAif5e9lrz1m5mliGgl7gZbD1TssawSnfhpGp~8-jB4T9M5K4vRO7iPEjd12zoPRdGfYEK7lUtrpeipYT~n~pMKSzoCsmvxWilfCLSsrga2C1XvFePHMJ7oBlaReebfZ20SwjX84WWOpGd8a8VOi2j0FKzuinPlC7IKUVZHDvQCCulczPMf9nDjq32DGeIZKYjikZrse0J520EcLN4Co-x6IDlekf23Rfk5sJAk5LDbyJEM1suz0arCQSIfiL3S6cjbYYCFUdudf97RBKeN7x-QqkvDzSKDJAm7s8Z133-Uj5hjevmUyMeLz4ptVAngEHJsXfMKSluQ__

이렇게 완성된 URL 형식을 복사 한 후, ridingazua.cc의 오버레이 이미지 맵 설정의 URL 템플릿에 적용해주시면 됩니다.

(참고로 위에 제가 작성한 샘플은 작동하지 않습니다. 작동하지 않도록 임의로 변조한 것이므로 위의 샘플을 복사해서 붙여넣어봤자 안나옵니다.)

이런식이 되겠네요.

"적용" 버튼을 누르게 되면,

이런식으로 히트맵이 나타나게 됩니다!

유의 사항:

위의 CloudFront-Key-Pair-Id, CloudFront-Policy, CloudFront-Signaure 세가지 값은 유효기간이 있기 때문에 일정 기간 이후에는 작동하지 않을 수 있습니다. 그럴 경우, 스트라바 웹사이트에 다시 접속, 로그인 하신 후에 위의 과정을 다시 진행하면 됩니다.

끝.