[자바스크립트] Leaflet 사용해서 지도 그리기 (사용법, 예제, 이벤트 처리)

아래 소스 코드는 Leaflet 라이브러리를 사용해서 지도를 그리고, 지도 위에 마커 생성 및 팝업 추가, 이벤트 처리의 작업을 수행하였습니다. Leaflet은 가벼운 라이브러리로, 빠른 지도 렌더링을 제공하고, 많은 웹 브라우저에서 지원되고 모바일 에서도 작동합니다.

 

소스코드 설명

 

1. 지도 초기화 및 기본 설정

var map = L.map('map').setView([37.5729, 126.9794], 15);

 

ㅇ L.map('map'): Leaflet 지도 객체를 생성하고, map이라는 HTML 요소에 지도를 표시하도록 연결합니다.
ㅇ setView([37.5729, 126.9794], 15): 지도의 초기 중심 좌표를 [37.5729, 126.9794]로, 초기 확대 레벨을 15로 설정합니다.

 

 

2. 타일 레이어 추가

L.tileLayer('https://tiles.osm.kr/hot/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

 

ㅇ L.tileLayer(): 지도의 배경 타일 레이어를 추가합니다. 이 예제에서는 OpenStreetMap의 타일을 사용합니다.
ㅇ {z}/{x}/{y}.png{z}/{x}/{y}.png: 사용할 타일 소스의 URL을 지정합니다.
ㅇ maxZoom: 19: 지도의 최대 확대 레벨을 19로 설정합니다.
ㅇ attribution: 지도 하단에 표시될 출처 정보를 설정합니다.

 

 

3. 마커 추가 및 팝업 설정

var markers = [
    {latlng: [37.5729, 126.9794], popupContent: '서울특별시 종로구'},
    {latlng: [37.5631, 126.9829], popupContent: '경복궁'}
];

markers.forEach(function(markerInfo) {
    var marker = L.marker(markerInfo.latlng).addTo(map);
    marker.bindPopup(markerInfo.popupContent);
});

 

ㅇ markers 배열 : 다중 마커를 정의하는 배열입니다. 각 마커는 latlng (위도 및 경도)와 popupContent (팝업에 표시할 내용)를 가지고 있습니다.
ㅇ L.marker() : 마커를 생성하고 해당 위치에 추가합니다.
ㅇ marker.bindPopup() : 마커에 팝업을 바인딩하여 클릭할 때 해당 팝업 내용을 표시합니다.

 

 

4. 클릭 이벤트 처리

map.on('click', function (e) {
    updateInfoPanel(e.latlng);
});

 

ㅇ map.on('click', function (e) { ... }): 지도에서 클릭 이벤트를 감지하고 이벤트 핸들러 함수를 호출합니다.
ㅇ updateInfoPanel(e.latlng): 클릭한 위치의 위도 및 경도 정보를 추출하고 updateInfoPanel 함수를 호출하여 정보 패널을 업데이트합니다.

 

 

 

5. 정보 패널 업데이트

function updateInfoPanel(latlng) {
    // 클릭한 위치의 위도와 경도 업데이트
    document.getElementById('latitude').textContent = latlng.lat.toFixed(6);
    document.getElementById('longitude').textContent = latlng.lng.toFixed(6);

    // 클릭한 위치의 주소를 지오코딩을 통해 가져오기 (OpenCage Geocoder 사용)
    fetch('https://api.opencagedata.com/geocode/v1/json?q=' + latlng.lat + '+' + latlng.lng + '&key=YOUR_OPENCAGE_API_KEY')
        .then(response => response.json())
        .then(data => {
            const address = data.results[0].formatted;
            document.getElementById('address').textContent = address;
        })
        .catch(error => {
            console.error('Error fetching address:', error);
        });
}

 

ㅇ updateInfoPanel 함수: 클릭한 위치의 위도와 경도를 정보 패널에 업데이트하고, 지오코딩 서비스를 사용하여 해당 위치의 주소를 가져와 업데이트합니다.

 

 

---

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
	/* 맵 컨테이너의 높이 설정 */
	#map {
		height: 700px;
		float: left;
		width: 70%;
	}
	
	/* 정보 패널 스타일 */
	#info-panel {
		float: right;
		width: 30%;
		height: 100%;
		background-color: #f2f2f2;
		padding: 20px;
		box-sizing: border-box;
	}
</style>

<!-- 지도가 들어갈 자리 -->
<div id="map"></div>

<!-- 정보 패널 -->
<div id="info-panel">
	<h2>장소 정보</h2>
	<p>클릭한 위치의 위도: <span id="latitude"></span></p>
	<p>클릭한 위치의 경도: <span id="longitude"></span></p>
	<p>클릭한 위치의 주소: <span id="address"></span></p>
</div>
<script>
	// Leaflet 초기화
	var map = L.map('map').setView([37.5729, 126.9794], 15);

	L.tileLayer('https://tiles.osm.kr/hot/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

	// 다중 마커를 추가하고 각 마커에 팝업 설정
	var markers = [
		{latlng: [37.5729, 126.9794], popupContent: '서울특별시 종로구'},
		{latlng: [37.5631, 126.9829], popupContent: '경복궁'}
	];

	markers.forEach(function(markerInfo) {
		var marker = L.marker(markerInfo.latlng).addTo(map);
		marker.bindPopup(markerInfo.popupContent);
	});

	// 클릭한 위치의 정보 업데이트 함수
	function updateInfoPanel(latlng) {
		// 클릭한 위치의 위도와 경도 업데이트
		document.getElementById('latitude').textContent = latlng.lat.toFixed(6);
		document.getElementById('longitude').textContent = latlng.lng.toFixed(6);

		// 클릭한 위치의 주소를 지오코딩을 통해 가져오기
		fetch('https://api.opencagedata.com/geocode/v1/json?q=' + latlng.lat + '+' + latlng.lng + '&key=YOUR_OPENCAGE_API_KEY')
			.then(response => response.json())
			.then(data => {
				const address = data.results[0].formatted;
				document.getElementById('address').textContent = address;
			})
			.catch(error => {
				console.error('Error fetching address:', error);
			});
	}

	// 지도 클릭 이벤트 리스너
	map.on('click', function (e) {
		// 클릭한 지점의 정보를 사용하여 정보 패널 내용을 업데이트
		updateInfoPanel(e.latlng);
	});
</script>

 

---

 

소스코드 화면

 

마커 클릭 화면

 

마커 클릭 화면

 

지도 클릭 화면