월요일 스터디 내용
Leaflet
leaflet 이란?
리프렛 링크
leaflet은 주로 인터렉티브한 지도 웹페이지를 보여주는 기능이다.
오픈소스 JavaScript 라이브러리이다.
라이브러리의 크기가 상당히 작기 때문에 모바일 웹환경에서 자주 사용된다.
다음과 같은 특징이 있다.
경량: Leaflet의 전체 라이브러리 크기는 작으며, 기본적인 기능만 포함하여 빠르게 로딩됩니다. 필요에 따라 다양한 플러그인으로 기능을 확장할 수 있습니다.
다양한 타일 레이어 지원: Leaflet은 OpenStreetMap, Bing Maps, Google Maps와 같은 다양한 타일 레이어 서비스를 지원합니다.
데스크탑 및 모바일 지원: Leaflet은 모든 주요 데스크탑 및 모바일 브라우저와 호환됩니다.
플러그인 확장성: Leaflet에는 각종 플러그인들이 있어 지도의 기능과 디자인을 확장할 수 있습니다. 예를 들면, 히트맵, 클러스터링, 다양한 지리 공간 데이터 형식 등의 기능을 추가할 수 있습니다.
간단한 API: Leaflet의 API는 사용하기 쉽고 직관적입니다. 기본 지도를 웹 페이지에 추가하는 것부터 고급 기능까지, 코드 몇 줄로 쉽게 구현할 수 있습니다.
이벤트 처리: 사용자의 상호작용(클릭, 확대/축소, 드래그 등)에 따른 이벤트를 처리할 수 있습니다.
지리 공간 데이터: Leaflet은 GeoJSON과 같은 지리 공간 데이터 형식을 지원하므로, 지리적 정보를 효과적으로 표시하고 처리할 수 있습니다.
커스터마이징: 마커, 팝업, 도형 등의 요소를 사용자 정의 스타일로 커스터마이징할 수 있습니다.
Leaflet Basic Functions (리프렛 기본기능)
<!DOCTYPE html> <!-- HTML5 선언 타입 -->
<html>
<head> <!-- 문서의 헤더 부분 -->
<title>Leaflet sample</title> <!-- 웹 페이지의 제목 -->
<!-- Leaflet 스타일시트 링크 -->
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"
/>
<!-- Leaflet 자바스크립트 라이브러리 링크 -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body> <!-- 웹 페이지의 본문 부분 -->
<!-- 지도를 표시할 div 요소. 너비와 높이 설정 포함 -->
<div id="map" style="width: 90vw; height: 80vh"></div>
<div id="coordinates" font-size="30px"></div>
<script> <!-- 자바스크립트 코드 시작 -->
// 지도 옵션 설정. 초기 중심 좌표와 줌 레벨 지정
var mapOptions = {
center: [35.2479147284493, 129.09627556800842], // 지도의 중심 좌표
zoom: 15, // 초기 줌 레벨
};
// 지도 객체 생성. "map" div 요소에 지도를 표시
var map = new L.map("map", mapOptions);
map.on('click', function(event) {
var lat = event.latlng.lat;
var lng = event.latlng.lng;
// 좌표를 화면에 표시하는 코드
document.getElementById("coordinates").innerText = "Clicked at latitude: " + lat + " and longitude: " + lng;
});
// 타일 레이어 객체 생성. OpenStreetMap의 타일을 사용
var layer = new L.TileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
);
// 생성된 타일 레이어를 지도에 추가
map.addLayer(layer);
</script> <!-- 자바스크립트 코드 끝 -->
</body>
</html>나는 우리집 위치가 떴으면 좋겠어서 우리집의 위도와 경도
우리집의 위치가 보이는 줌크기를 설정했다.
화면에는 크게 보이는게 좋아서 90vw와 80vh를 설정했다.
상당히 빠르고 강력한 툴인 것 같다.
다음은 팀원이 올렸던 leaflet 다른 기능들
'''
Leaflet Polygons<body>
<div id="map"></div>
<script>
var map = L.map("map").fitWorld();
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: "© OpenStreetMap",
}).addTo(map);
map.locate({ setView: true, maxZoom: 16 });
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng)
.addTo(map)
.bindPopup("You are within " + radius + " meters from this point")
.openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on("locationfound", onLocationFound);
function onLocationError(e) {
alert(e.message);
}
map.on("locationerror", onLocationError);
</script>
</body>