leaflet - #5 내 위치 찾기

이번 글에서는 지도에서 내 위치를 표시하는 기능을 만들어 보겠습니다.

leaflet은 모바일 친화적인 지도 라이브러리라고 소개되어 있는데, 정말 손쉽게 내 위치를 확인하고 지도에 표시할 수 있게 만들어 놨습니다. 물론 PC에서도 내 위치 표시는 됩니다. 웹 표준이 계속해서 발전하면서 Location에 대한 표준도 정리되었습니다. leaflet은 이러한 웹표준 API를 몰라도 손쉽게 지도상에 위치를 표시할 수 있습니다.

 

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

이 코드를 실행하면 아래와 같이 표시됩니다.

내 위치 표시

 

자바스크립트 코드는 아래와 같습니다.

var hanRiverPos = [37.5118, 126.9745];

var map = L.map('map').setView(hanRiverPos, 12);

var vworldLayer =  L.tileLayer('https://xdworld.vworld.kr/2d/Base/service/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.vworld.kr/">vworld</a>  contributors'
});
var baseMaps = {"브이월드": vworldLayer};
var overlayMaps = {};
vworldLayer.addTo(map);
L.control.layers(baseMaps, overlayMaps).addTo(map);

map.on('locationfound', function(e) {
  var radius = e.accuracy / 2;
  var locationMarker = L.marker(e.latlng).addTo(map)
  .bindPopup('당신의 반경 ' + radius.toFixed(1) + '미터 안에 계시겠군요.').openPopup();
  var locationCircle = L.circle(e.latlng, radius).addTo(map);
});
map.on('locationerror', function(e) {console.log(e.message)});

map.locate({setView: true, maxZoom: 16});

주요 코드를 설명 드리면

1~11:  브이월드 지도를 배경으로 맵 생성, 레이어 컨트롤 추가

13~18: 브라우저에서 위치를 감지하면 대략적인 위치 반경을 표시하고, 중심에 마커 생성 함수 정의

19: 브라우저에서 위치 감지시 오류가 발생하면 로그 출력 함수 정의

21: 브라우저 위치 찾기 시작(성공시 13~18라인 함수 실행, 실패시 19라인 함수 실행)

 

이 예제 코드는 사용자의 위치 정보를 절대 수집, 전송하지 않습니다.

하지만 13~18 라인 함수를 어떻게 정의하느냐에 따라 사용자 위치정보를 활용 할 수 있으니, 신뢰할 수 있는 사이트와 서비스에서만 위치 허용하시길 바랍니다.