대구 시청에서 근무하면서 '지도 상에 대구 버스정류장 위치표기' 업무를 할당받았고, 이를 HTML과 네이버 지도 API를 활용하여 구현하였습니다.
제공받은 파일은 엑셀 파일 하나로, 버스정류장 세부사항이 기재된 총 8개 행정구역 (예: 중구, 서구, 달서구 등)의 시트로 구성되었습니다.
구글 코랩 환경에서 해당 파일의 '버스정류장 이름' 과 '해당 정류장의 주소' 열을 추출한 뒤, 네이버 지오코드 API를 활용해 위도와 경도로 변환했습니다.
-
각 행정구역 버튼을 누르면 해당 행정구역에 속한 버스정류장의 위치를 지도상에 표시합니다.
-
'모니터링' 버튼: 관심을 두고 있는 특정 버스정류장만을 지도에 표시합니다.
-
'스마트쉘터' 버튼: 스마트쉘터가 설치된 버스정류장을 지도에 표시합니다.
-
GeoJson 파일(https://github.com/raqoon886/Local_HangJeongDong)을 분해해 각 행정구역 단위로 구별한 뒤, 네이버지도API를 이용해 폴리곤으로 그려 넣었습니다.
-
줌(확대) 레벨에 따라 텍스트 크기 등 시각적 요소들을 동적으로 조정되도록 하여, 사용자가 지도를 더욱 직관적으로 탐색할 수 있도록 시각적 편의성을 개선했습니다.
시청 직원분들은 CS 지식이 전무하기 때문에 최대한 파일 구성을 쉽게 만들어 제공해야 했습니다.
따라서 HTML 파일 하나에 모든 소스코드를 포함시켜 하드코딩 방식으로 구현했습니다.
시청 직원분들의 빠른 의사결정 프로세스에 도움을 줄 수 있었습니다!! 😊
