leaflet - #1 가벼운 웹 지도 만들기

leaflet은 오픈소스 지도 라이브러리 중에 모바일 친화적이고, openlayers와 더불어 오래된 Javascript 라이브러리입니다. 홈페이지에는 이렇게 소개 되어 있습니다.

그리고, 위키백과에는 이렇게 소개되어 있습니다.

리플릿(Leaflet)은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리이다. 2011년 처음 출시되었으며,[2] HTML5와 CSS3를 지원하고 대부분의 모바일 및 데스크톱 플랫폼을 지원한다. 사용 고객으로는 포스퀘어, 핀터레스트, 플리커가 있다.

 

Lealfet이 지원하는 데스크톱, 모바일 웹 브라우저는 아래와 같습니다.

• Desktop: Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11, Edge 등
• Mobile: Safari for iOS 7+, Chrome for mobile, Firefox for mobile, IE10+ for Win8 devices 등

leaflet은 다른 javascript 라이브러리와 같은 방식으로 header에 CSS와 관련 Javascript 파일을 불러와 사용하시면 됩니다. CSS와 Javascript CDN 주소는 아래와 같습니다.

 

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>   

 

이렇게 html 페이지를 준비하시고 아래와 같이 관련 코드를 작성하시면 웹페이지에 지도를 만들 수 있습니다.

See the Pen leaflet tutorial #1 by yogin (@yogin) on CodePen.

 

 

자바스크립트 코드 부분만 설명 드리면

var hanRiverPos = [37.5118, 126.9745];
var map = L.map('map').setView(hanRiverPos, 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker(hanRiverPos).addTo(map)
    .bindPopup('여기는 한강입니다!')
    .openPopup();

1 : 한강의 위경도 좌표를 배열 변수에 저장

2 : id가 map인 div 요소에 확대 단계 12로 맵 생성 표시

4~6: Open Street Map 타일 레이어(중첩 가능  주제도) 맵에 추가

8~9: 마커를 한강 위치에 생성하고 지도에 추가, 마커 팝업에 메시지를 지정하고 표시

 

10줄 정도의 코드로 지도를 만들고 마커를 추가했습니다. 모바일 웹에서도 물론 동일하게 잘 동작합니다.

 

다음 글에서 여러개의 지도를 중첩하고 on/off 하는 방법을 소개하겠습니다.