[python] jupyter notebook에서 생성한 folium map 티스토리로 불러오기

 

2023.01.25 - [python] - [python] 소상공인시장진흥공단 상가업소정보로 프랜차이즈 입점분석 (2)

[python] 소상공인시장진흥공단 상가업소정보로 프랜차이즈 입점분석 (2)

이 글을 작성하면서 가장 큰 문제가 바로 지도를 불러오는 것이었다. 인프런 강의를 수강하고 나서 따로 실습한 나의 주피터 노트북 파일을 업로드하는 가장 빠른 방법이 html 복사 붙여 넣기라고 해서 그렇게 했더니... 

 

html모드에서 기본모드로 변경해서 칸들 간의 간격을 조정하려하면 맵 차트가 계속해서 오류가 발생하는 것이다. 

기본모드로 변경하면 옆에 붙어있는 기호 삭제할 수 있고

 

기본 모드로 변경하면 코드도 내가 정한 테마대로 나오고, in[ ] 같은 것도 삭제할 수 있어 깔끔해진다.

기본모드로 변경하지 않으면 맵차트만 잘 작동하고 나머지는 시각적으로 좋지 않게 나온다. 

맵은 사실 이미지 첨부로 해도 되는 문제지만 좀 더 완벽한 결과물을 만들어내고 싶었기에.. 구글링에 들어갔다.

 

https://dailyheumsi.tistory.com/144

[지도 데이터 시각화] Part 4. Folium 살펴보기

이 글 댓글에서 지도를 불러오는 방법을 찾았지만 내가 하기에는 너무 어려웠다. 

https://leafletjs.com/

Leaflet — an open-source JavaScript library for interactive maps

이 글을 참고해서 하라고 되어있었지만 도저히 나는 할 수 없었다.

 

그렇게 구글링을 하던 중...

 

https://wonhwa.tistory.com/47?category=1005788 

Tistory 블로그에 html 파일을 iframe으로 삽입하기

 

이 글을 발견하게 되었다. 

실습하면서 html 파일로 저장해두었 것이 생각나 위 글의 방식대로 한 번 진행해 보았다.

저렇게 저장되어 있는 html 파일을 깃허브에 업로드하여 그 링크를 다시 티스토리 html에 붙여 넣는 방식이다. 

 

원래 맵이 표시되던 자리의 html 코드를 삭제하고, <iframe src="html페이지 주소" width="가로 사이즈(숫자)" height="세로 사이즈(숫자)"></iframe>을 넣어주면 된다. (자세한 설명은 링크 참고)

삭제 범위

 

html을 난생처음 수정해 보는 거라 정말 많이 헤맸다. 가뜩이나 올리려고 하는 html이 너무 길어서 글을 (1)과 (2)로 나눠야 했기에 복붙 하는데도 오래 걸렸는데 위의 과정도 하니.. 정말 몇 시간이 그냥 날아갔다.

 

그래도 끝까지 포기하지 않고 방법을 찾아내어 정말 기쁘다..! 

앞으로 주피터 노트북으로 맵 시각화 한 거 올리거나, 따로 html 첨부할 때 참고해서 사용해야겠다 ♪(^∇^*)