leaflet - #6 커스텀 마커 추가하기

leaflet에서 마커를 생성하면 파란색 핀모양의 마커가 지도에 표시됩니다.

이 파란색 마커도 괜찮지만 내가 원하는 이미지로 마커를 생성하고 싶으면 아래 방법으로 하시면 됩니다.

기본 파란색 마커를 자세히 보시면 파란색 핀모양의 이미지와 그림자가 함께 표시되는 것을 확인 할 수 있습니다.

leaflet 기본 마커는 마커와 그림자로 되어 있음

물론 커스텀 이미지를 만들 때, 그림자 이미지 없이 마커 이미지만으로 만들어도 됩니다. 하지만 그림자가 없으면 입체감이 조금 떨어질 수 있습니다. 디테일을 중요시 하는 분이라면 그림자까지 만들어 주시면 됩니다.

올해가 임인년 호랑이 해를 맞이하여 예제 마커를 호랑이 아이콘으로 해보겠습니다.

tiger.png

0.00MB

tiger_shadow.png

0.00MB

 

tiger와 tiger_shadow라는 2개의 png 파일을 만들어줬습니다.

See the Pen leaflet tutorial #6 by yogin (@yogin) on CodePen.

주요 코드를 보시면

var tigerIcon = L.icon({
    iconUrl: 'https://blog.kakaocdn.net/dn/M87Ng/btrrXqEI1uA/YIOPZSggy0kGYV0Bxrx4m0/tiger.png?attach=1&knm=img.png',
    shadowUrl: 'https://blog.kakaocdn.net/dn/ysC06/btrr0zATfSk/now7K2joWTDTYjRVU4OqD0/tiger_shadow.png?attach=1&knm=img.png',
    iconSize:     [64, 64],  // 마커의 가로, 세로 크기
    shadowSize:   [64, 64],  // 그림자의 가로, 세로 크기
    iconAnchor:   [32, 64],  // 마커 포인트 위치
    shadowAnchor: [32, 64],  // 그림자 포인트 위치
    popupAnchor:  [0, -60]   // 팝업 위치
});
L.marker(gangnamStation, {icon: tigerIcon}).addTo(map).bindPopup("새해 복 많이 받으세요").openPopup();

2: iconUrl - 마커 이미지 url

3: shadowUrl - 그림자 이미지 url

4: 마커 이미지 크기

5: 그림자 이미지 크기

6: 위경도 포인트와 매핑될 이미지 위치

7: 위경도 포인트와 매핑될 그림자 위치

8: 팝업 메시지가 표시될 이미지 위치

10: 마커 생성시 아이콘 속성을 지정 후 지도에 추가 팝업창 띄우기

 

임인년 새해 복 많이 받으십시오.