웹을 하다보면 지도 파일이 필요할 때가 있다. 옛날에야 유료플러그인과 삽질로 구현했다지만 지금 svg를 이용하여 map 지도를 쉽게 형성할 수 있다. 이미 만들어진 map 파일들도 많기 때문에 단순히 검색을 해도 전세계의 svg 지도를 구할 수 있다. svg는 비단 지도만을 위한 것은 아니지만 이것만큼 편한 것은 없는 듯 하다.
svg map 검색
구글에서 svg map으로 검색을 해보도록 한다.
다양한 형태의 지도를 구할 수 있다.
검색어를 다르게 해도 많은 분야의 svg 파일을 구할 수 있다.
이것을 프로그래밍으로 코딩하여 구현하는 것은 개개인의 몫이다.
마음에 드는 지도파일을 구했다면 다운로드 하자.
svg 파일은 xml 형태이기 때문에 당황하지 말자.
아래의 지도는 simplemaps 에서 구할 수 있다.
- https://simplemaps.com/
svg 파일 실행하기
다운로드 받은 svg 파일은 웹브라우저에서 바로 실행하여 볼 수 있다.
svg파일을 더블클릭하여 볼 수 있고 자신이 원하는 웹브라우저를 선택하여 볼 수도 있다.
개인적으로 마이크로소프트 엣지브라우저가 최근 잘 만들어진 느낌이라 자주 사용하고 있다.
아래는 svg map 파일을 엣지 브라우저에서 나타낸 것이다.
html 적용
svg 파일을 그 자체로 html 에 붙여넣으면 그만이다.
중간생략된 부분은 우리나라 지도 path 태그 내용이다.
너무 길기 때문에 생략하였다.
우리나라 지도를 받았다면 그냥 붙여넣으면 그만이다.
<!-- html5 기본템플릿 -->
<!DOCTYPE html>
<!-- head -->
<head>
<!-- meta SEO 컨텐츠 -->
<meta name="title" content="제목">
<meta name="description" content="내용">
<meta name="keywords" content="키워드">
<meta name="author" content="작성자">
<meta name="copyright" content="저작권">
<!-- // -->
<!-- meta 반응형 웹표준 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- // -->
<!-- 스타일 -->
<style></style>
<!-- // -->
</head>
<!-- // -->
<!-- body -->
<body>
<svg baseprofile="tiny" stroke-linecap="round" stroke-linejoin="round" version="1.2" viewbox="0 0 2000 857" xmlns="http://www.w3.org/2000/svg">
<!-- 중간생략-->
</svg>
</body>
<!-- // -->
<!-- 자바스크립트 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- // -->
</html>위의 파일을 그대로 다시 실행해 보았다.
잘 나오는 것을 볼 수 있다.
svg 파일 내용은 xml형태의 tag이기 때문에 html에 그대로 붙여넣기 하는 것만으로도 이미지를 표시할 수 있다.
울릉도는 있지만, 독도가 없다. 조금 아쉽다.
svg 공부 좀 해 보고 독도를 추가해봐야 겠다.
'info' 카테고리의 다른 글
| 쿠팡파트너스 수익화 노하우 제휴마케팅 외국의 사례 개발자 전지적 시점 (0) | 2021.08.05 |
|---|---|
| jquery 독학하기 쉬운 자바스크립트 라이브러리 (0) | 2021.07.11 |
| 티스토리 블로그에 애드센스 광고 갯수 찾는 방법 방문 안해도 알 수 있음 (0) | 2021.07.09 |
| 애드센스 광고 게재 제한 원인은 웹사이트 리뉴얼과 사라진 트래픽 때문인가 (0) | 2021.07.08 |
| 사이트 맵이 제출되지 않았습니다 사이트맵 구조부터 파악하기 (0) | 2021.07.07 |
댓글