Leaflet

Leaflet은 오픈소스 자바스크립트 라이브러리로, 다양한 종류의 지도 데이터를 웹에서 쉽게 표출할 수 있도록 돕는 도구이다. Leaflet은 경량화되어 빠르고, 모바일 친화적인 지도 서비스를 제공한다.

  • 다양한 지도 타일 제공: OpenStreetMap, Mapbox, Google Maps 등 다양한 지도 타일을 사용할 수 있다.
  • 마커, 팝업, 폴리라인, 폴리곤 등 다양한 지도 요소를 추가할 수 있다.
  • 상호작용: 지도 이동, 확대/축소, 마커 클릭 등 다양한 이벤트를 처리할 수 있다.

Leaflet 기본 지도 띄우기

Leaflet을 사용하기 위해서는 HTML 파일에 Leaflet의 CSS와 JavaScript 파일을 포함해야 한다. CDN을 사용해 간단히 Leaflet을 불러올 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 지도 예제</title>
    <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>
    <style>
        /* 지도 크기 설정 */
        #map {
            height: 30vh; /* 화면 전체를 지도에 할당 */
        }
    </style>
</head>
<body>
    <!-- 지도가 표시될 div -->
    <div id="map"></div>

    <script>
        // 지도 초기화 (위도, 경도, 줌 레벨 설정)
        var map = L.map('map').setView([37.5665, 126.9780], 13);

        // OpenStreetMap 타일 레이어 추가
        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([37.5665, 126.9780]).addTo(map)
            .bindPopup('서울, 대한민국')  // 마커 클릭 시 팝업 표시
            .openPopup();
    </script>
</body>
</html>
Leaflet 지도 예제
  • L.map('map').setView([37.5665, 126.9780], 13): 지도를 초기화하고, 서울의 위도와 경도를 중심으로 설정한다.
  • L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png': OpenStreetMap의 타일 레이어를 추가한다.
  • L.marker([37.5665, 126.9780]).addTo(map): 서울의 위도와 경도에 마커를 추가한다.