[Leaflet(리플릿)] 사용방법 익히기 메모

Leaflet(리플릿)

리플릿은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리이다. 2011년 처음 출시되었으며, HTML5와 CSS3를 지원하고 대부분의 모바일 및 데스크톱 플랫폼을 지원한다. 

 

개발 도입 전 리플릿을 익히기 위해 테스트했던 것들 메모

---

함께 본 링크들

• https://www.openstreetmap.org/#map=10/36.9696/126.8495&layers=N
• https://download.geofabrik.de/
• https://leafletjs.com/reference.html
• https://learnosm.org/ko/beginner/
• https://mollangpiu.tistory.com/253

 

---

• 기본 위치잡기

var latlng = L.latLng(37.54165, 126.97166);
var map = L.map('map').setView([37.54233, 126.97244], 18);

 

위치 [37.54233, 126.97244]

줌 18로 설정

 

 

---

• 레이어 말풍선 띄우기

//레이어
var layerCont = "레이어 띠우기<br>레이어 띠우기";
layerCont += "레이어 띠우기<br>레이어 띠우기";
layerCont += "레이어 띠우기<br>레이어 띠우기";
layerCont += "레이어 띠우기<br>레이어 띠우기";

var marker = L.marker([37.54165, 126.97166], {alt: '남영역'}).addTo(map)
	.bindPopup(layerCont);

 

 

---

• 마커 점찍기

// 마커 1
var myIcon = L.divIcon({className: 'my-div-icon'}); // you can set .my-div-icon styles in CSS
L.marker([37.54339,126.97220], {icon: myIcon}).addTo(map);

.my-div-icon{
    width: 50px; height: 50px;
    background-color: red;
    border-radius: 50%;
}

 

 

---

• 마커 이미지 + 레이어 말풍선 띄우기

// 마커 2 + 레이어
var myIcon = L.icon({
	iconUrl: '/resources/images/icon/my-icon.png',
	iconSize: [30, 30],
	iconAnchor: [20, 20],
	popupAnchor: [0, -10],
	crossOrigin: false
});

// L.marker([37.54257,126.97091], {icon: myIcon}).addTo(map);

var layerCont = "레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";

var marker = L.marker([37.54257,126.97091], {icon: myIcon}, {alt: '치안센터'}).addTo(map)
	.bindPopup(layerCont);

 

아이콘 사이즈 : iconSize속성으로 설정

레이어 뜨는 위치 : popupAnchor [좌우, 상하] (마이너스 붙은 수가 윗 방향)

 

 

---

• 레이어 클릭 이벤트 alert 출력

var layerCont = "<div class='red'>레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";
layerCont += "레이어 띠우기22222222222<br>";
layerCont += "<button type='button' onclick='test()'>클릭</button>";
layerCont += "레이어 띠우기22222222222<br></div>";

var marker = L.marker([37.54257,126.97091], {icon: myIcon}, {alt: '치안센터'}).addTo(map)
    .bindPopup(layerCont);
}

function test(){
    alert("클릭했다");
}

 

 

 

---

• 아이콘 밑에 문구박스 만들기

// 마커 밑에 이름붙이기 - 민주인권기념관
var customIcon01 = L.divIcon({
    html: '<div>여기아이콘?</div><div class="icon-label">초소1-1</div>',
    className: 'my-div-icon',
    iconSize: [40, 40],
    iconAnchor: [20, 20],
    crossOrigin: false
});

L.marker([37.54033,126.97218], {icon: customIcon01}).addTo(map);

.icon-label{display: inline-block; background-color: #fff; color: red; width: max-content;}
.my-div-icon{background-color: red;}
.my-div-icon .icon-label{
   /* transform: translate(-35%, 30%); */
}

 

 

---

• 문구박스 디자인 변경

.my-div-icon-02{
    position: relative; background:pink url(/resources/images/icon/select-arrow.png);
}
.my-div-icon > div{
    position: absolute;
    top: 0;
}
.icon-label{
    display: inline-block; background-color: #fff; color: red; width: max-content;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
}

 

 

color: black;
text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff;

 

 

color: #fff;
text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000;