Python을 이용하여 네이버 지도 API 기반의 웹 시각화 페이지를 자동으로 생성하고자 하시는 분들을 위한 글입니다. 특히 행정 데이터를 지도 위에 시각화하고자 하는 경우, Python을 통해 HTML을 동적으로 생성하고 브라우저에서 손쉽게 지도 결과를 확인할 수 있습니다.
1. 사전 준비 사항
시작에 앞서 다음 항목들을 준비해주시기 바랍니다.
- NAVER Cloud Platform 계정
- Python 3.x 설치 환경
- 크롬 등의 웹 브라우저
- 텍스트 편집기 또는 Jupyter/VSCode
2. NAVER 지도 API 사용 설정
NAVER 지도 API를 사용하려면 네이버 클라우드 콘솔에서 다음 단계를 거쳐야 합니다.
- https://www.ncloud.com에 접속하여 로그인합니다.
- 상단 메뉴에서 “Application 등록”을 선택합니다.
- 서비스 항목 중 반드시 "Dynamic Map" API를 선택합니다.
- Web 서비스 URL에는 반드시 본인의 환경에 맞는 주소를 입력합니다.
- 예: http://localhost:8000
- 등록을 완료하면 Client ID가 발급됩니다.
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
※ REST API용 Client Secret은 본 예제에서 사용하지 않습니다.
3. Python으로 지도 시각화 HTML 자동 생성
Python을 통해 네이버 지도를 표시하는 HTML 파일을 생성하는 코드 예시는 다음과 같습니다.
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
자세한건 위 사이트에서 확인하실 수 있습니다!
client_id = "발급받은_클라이언트_ID"
html = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>네이버 지도 최신 방식</title>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=xdbn7lyslj"></script>
<style>
#map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<h3>네이버 지도 테스트 (oapi + ncpKeyId 방식)</h3>
<div id="map"></div>
<script>
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
});
</script>
</body>
</html>
"""
with open("naver_map_basic.html", "w", encoding="utf-8") as f:
f.write(html)
print("HTML 파일이 생성되었습니다: naver_map_basic.html")4. HTML 실행 방법
방법 1. 브라우저로 직접 열기 (권장 X)
생성된 naver_map_basic.html 파일을 브라우저에서 직접 더블 클릭하여 열 수도 있으나,
이 경우 file:// 주소 체계로 인해 API 인증이 실패할 수 있습니다.
방법 2. Python HTTP 서버를 이용해 열기 (권장)
python -m http.server 8000이후 브라우저에서 아래 주소로 접속하시면 됩니다:
http://localhost:8000/naver_map_basic.html5. 마커 추가 예시 (산 또는 소방서 위치 표시)
마커를 지도 위에 표시하려면 다음과 같은 자바스크립트 배열을 활용하면 됩니다.
var markers = [
{ lat: 35.1801, lng: 128.0842, title: "금오산 (위험도: 높음)" },
{ lat: 35.2325, lng: 128.6861, title: "김해중부소방서" }
];
markers.forEach(function(m) {
new naver.maps.Marker({
position: new naver.maps.LatLng(m.lat, m.lng),
map: map,
title: m.title
});
});6. 마무리하며
NAVER 지도 API는 웹 기반 시각화를 손쉽게 구현할 수 있는 매우 강력한 도구입니다. 특히 Python을 이용하면 공공데이터, 행정 위치 데이터 등을 손쉽게 HTML로 변환하고 시각화할 수 있어 활용성이 높습니다.
추후에는 아래 기능도 함께 다뤄볼 수 있습니다:
- 주소 → 좌표 변환 (Geocoding API 연동)
- CSV 파일 기반 마커 자동 생성
- 위험도 또는 분류에 따른 색상 마커 적용
'Project' 카테고리의 다른 글
| Best-First Search(최선우선탐색) / A* 알고리즘 이용한 8-puzzle 문제 (0) | 2024.03.28 |
|---|---|
| BFS / DFS 이용한 8-puzzle 문제 (0) | 2024.03.21 |
| 텔레그램 챗봇 만들기(2) / 라이브러리 정리 (0) | 2024.02.20 |
| 텔레그램 챗봇 만들기(1) (1) | 2024.02.19 |
