지도 라이브러리 'Leaflet'에서 지도에 근두운의 현재 위치를 표시

오늘도지도 라이브러리 「Leaflet」에 관한 기사입니다.
이전에는 Cluster 기능을 소개했습니다. (지도 라이브러리 "Leaflet"에 cluster 기능 추가)

Leaflet에는 기본 아이콘이 있지만, 직접 지정한 아이콘으로 지도에 표시하는 방법을 작성합니다. 글쎄, 그것만은 재미 없기 때문에 드래곤 볼의 근두구름이 지금 어디에 있는지 확인할 수있는 맵을 만들어 갑시다.

지도 준비

자세한 내용은 내 마지막 기사 (지도 라이브러리의 본명 「Leaflet」을 5 분으로 이해 & 도입한다)를 참조하십시오. 이 기사에서는 자세히 설명하지 않습니다.

var mymap = L.map('mapid').setView([35.681167, 139.767052], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}).addTo(mymap);

그리고 아이콘 준비

먼저 흔한 클라우드 아이콘을 노란색으로 다운로드합니다.
← 이런 느낌의 녀석

Leaflet에서 크기 등을 정의

var kintounIcon = L.icon({
    iconUrl: 'kintoun.png',
    iconSize: [30, 30],
    iconAnchor: [15, 30],
    popupAnchor: [0, -40]
});

iconAnchor는 아이콘과 지도가 접하는 점을 정의하기 위한 프로퍼티입니다만, 기본적으로는 1번째는 iconSize의 Width의 절반, 2번째는 iconSize의 Height와 같은 값을 지정해 주면 됩니다 . 이것을 제대로 설정하지 않으면 지도를 확대/축소할 때 아이콘의 위치가 어긋나 버리므로 주의합시다.

지도에 무작위로 배치

그리고는, 전회와 같이, 랜덤에 지도상에 배치해 봅시다.

for (var i = 0; i < 15; i++) {
    var marker = L.marker([35.681167 + (Math.random() / 50), 139.767052 + (Math.random() / 50)], {icon: kintounIcon});
    marker.bindPopup("<b>筋斗雲" + i + "</b>");
    marker.addTo(mymap);
}

할 수 있었다. 하지만... 빌어 먹을 미묘... 그림자를 붙이자.

그림자 붙이기

우선 그림자 이미지를 준비하여 근두운 아이콘에 반영합니다.
← 이런 느낌의 녀석

var kintounIcon = L.icon({
    iconUrl: 'kintoun.png',
    shadowUrl: 'shadow.png',
    iconSize: [30, 30],
    shadowSize: [30, 30],
    iconAnchor: [15, 30],
    shadowAnchor: [15, 0],
    popupAnchor: [0, -40]
});

대단히 좋은 느낌이 들었다! 꽤 떠있는 느낌이었습니다 (웃음)
이런 느낌으로 거리에 근두운이 대기하고 있고, UBER처럼 스마트폰으로 부를 수 있으면 최고군요.
이번 기사는 이상입니다.