Leaflet 맛보기 Chapter. 1. Leaflet OSM

작성일 | In |

Leaflet에 다양한 배경지도 띄우기 [1탄]
OSM 배경지도

OSM, 구글지도, 네이버지도, 다음지도, 브이월드 등 다양한 배경지도를 leaflet에서 표시해 본다.
이번 시간에는 간단하게 OSM을 leaflet에 표시하도록 한다.

Leaflet 배경지도

1. 개요

가장 먼저 해야 할 것이 배경지도를 뿌려주는 것이다.
배경지도는 오픈 된 것 (TMS: Tiled Map Service-https://en.wikipedia.org/wiki/Tile_Map_Srviceervice )이 많이 있기 때문에 그것들을 사용하기로 한다.
일단 목표는 OSM(Open Street Map: https://www.openstreetmap.org/ ), Google Map(https://www.google.com/maps ), 네이버지도(https://map.naver.com/ ), Daum지도(http://map.daum.net/ ), 브이월드(http://map.vworld.kr/map/maps.do )등을 띄우는 것을 목표로 한다.
각 지도들 마다 Street Map 형태, Satellite Map 형태, Hybrid Map 형태, 회색 Map 형태 등을 제공하는데, 각각 전부를 뿌려 볼 생각이다.

2. Leaflet Quick Start Guide

이제부터, leaflet 홈페이지에 있는 Quick Start 가이드(https://leafletjs.com/examples/quick-start/ )를 보면서 따라해 본다.

(1) 사전 작업

leaflet CSS 및 JS를 추가해 보자. URL로 넣어도 되고, leaflet 1.3.3을 다운로드(http://cdn.leafletjs.com/leaflet/v1.3.3/leaflet.zip)하여, 해당 경로를 추가해도 된다. (여기에서는 leaflet 1.3.3을 다운로드 하여 경로를 추가하는 방식을 사용한다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>

<head>
  <!--STEP 1: CSS 추가하기 -->
  <!--CDN 방식 -->
  <!--<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"/>-->
  <!-- Download 방식 -->
  <link rel="stylesheet" href="css/leaflet@1.3.3/leaflet.css"/>
  <!--STEP 2: JS 추가하기 -->
  <!--CDN 방식 -->
  <!--<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>-->
  <!-- Download 방식 -->
  <script src="js/leaflet@1.3.3/leaflet.js"></script>
</head>

<body>
</body>

</html>

(2) 배경 지도 영역 div 추가

body Tag 內에 배경지도를 표시할 영역을 div Tag를 사용하여 생성한다.
여기에서 배경지도 크기를 정해주어야 하는데 이는 새로운 css파일(main.css)을 head 영역에 넣어 준다.(height:100%)

main.css

html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
.map { height: 100% } /* map 영역 전체 화면에 꽉 차게 */

leaflet_basemap.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>

<head>
	<!--STEP 1: CSS 추가하기 -->
	<!--CDN 방식 -->
	<!--<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"/>-->
	<!-- Download 방식 -->
	<link rel="stylesheet" href="css/leaflet@1.3.3/leaflet.css"/>
	<!--STEP 3: 지도 영역 관련 CSS 추가하기 -->
	<link rel="stylesheet" href="css/main.css"/>
	<!--STEP 2: JS 추가하기 -->
	<!--CDN 방식 -->
	<!--<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>-->
	<!-- Download 방식 -->
	<script src="js/leaflet@1.3.3/leaflet.js"></script>
</head>

<body>
	<!-- 배경지도 영역 추가하기-->
	<div id="map" class="map"></div>
</body>

</html>

(3) 배경 지도 생성

OSM 배경지도 스크립트

body Tag 內에 script를 작성하여 OSM을 띄운다.

(1) 중심점 경위도 좌표: 김천시(lat=36.1358642, lng=128.0785804). 김천시를 중심점으로 잡은 이유는 다음 줌 레벨에서 남한지역(제주도, 울릉도, 독도 포함) 전체가 한눈에 들어오기 때문이다.

(2) 줌 레벨: 7레벨

(3) OSM 타일 맵 이용: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
(참고) Tile Servers Wiki

(4) 속성: leaflet의 attribution control 참고

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="map" class="map"></div>
<script>
	var lat = 36.1358642; //위도
	var lng = 128.0785804; //경도
	var zoom = 7; //줌 레벨
	var mymap = L.map('map', {
	center: [lat, lng],
	zoom: zoom
	});
	//L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/service/{z}/{x}/{y}.png').addTo(mymap); //브이월드 지도
	//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap); //OSM
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' //화면 오른쪽 하단 attributors
	}).addTo(mymap);
</script>

(4) 전체 소스

실행 URL

Leaflet OSM 배경지도

Gist 소스 연동

0%