- 아이콘 가이드 예제
- 이 자습서에서는 지도에 표시하는 마커에서 사용할 고유한 아이콘을 쉽게 정의하는 방법을 배웁니다.
- iconGuide.html
<!DOCTYPE html>
<html>
<head>
<title>Custom Icons Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([51.5, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
</script>
</body>
</html>
- 아이콘 클릭했을경우
https://leafletjs.com/examples/custom-icons/example-one-icon.html
Custom Icons Tutorial - Leaflet
leafletjs.com
-소스 설명
var map = L.map('map').setView([51.5, -0.09], 13);51.5 -> 경도값
-0.09 -> 위도값
13 -> zoom level
- 너비조정
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'leaf-shadow.png',
//가로, 세로 너비
iconSize: [38, 95],
shadowSize: [50, 64],
//아이콘 위치
iconAnchor: [22, 94],
//그림자
shadowAnchor: [4, 62],
//팝업위치
popupAnchor: [-3, -76]
}
});
- 해당 경도, 위도 값에 icon을 찍음
L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);'LeafletJs' 카테고리의 다른 글
| [LeafletJs] 도별 지도 영역 표시 (2) | 2021.09.28 |
|---|---|
| [LeafletJs] GeoJson 예제 (0) | 2021.09.14 |
| [LeafletJs] 모바일 가이드 예제 (0) | 2021.09.14 |
| [LeafletJs] 가이드 예제 (0) | 2021.09.14 |
| [LeafletJs] Leaflet이란? (0) | 2021.09.14 |