[Leaflet] on Mobile

by 1004lucifer

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

html,body { width:100%; height:100%; margin:0; padding:0; }
#map { width:100%; height:100%; }

JavaScript

/**
 * 맵 초기화
 *
 * fitWorld: 메소드를 이용해서 전세계를 포함하는 최대줌 레벨로 설정한다.
 * fitWorld 수행 시 블로그에서 지도가 보이지 않아 setView 설정함
 */
//var map = L.map('map').fitWorld();
var map = L.map('map').setView([51.505, -0.09], 2);

/**
 * 맵에 타일 레이어 추가
 */
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);

/**
 * 사용자 위치 찾았을때 수행할 이벤트 등록
 */
function onLocationFound(e) {
    var radius = e.accuracy / 2;

    L.marker(e.latlng).addTo(map)
        .bindPopup("You are within " + radius + " meters from this point").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);

/**
 * 사용자 위치 찾지 못했을 때 수행할 이벤트 등록
 */
function onLocationError(e) {
    alert(e.message);
}
map.on('locationerror', onLocationError);

/**
 * 사용자 위치 설정
 *
 * locate 메소드
 *   - Geolocation API를 이용하여 사용자의 위치를 찾은 후 상황에 맞게
 *     locationfound / locationerror 이벤트를 수행한다.
 *   - 크롬 브라우저에서 '현재위치 사용'을 허용하지 않으면 locationerror 이벤트 발생한다.
 *   - 크롬 v50이상에서는 https를 사용하지 않으면 작동이 정상적으로 되지 않을 수 있다.
 *
 * Location Options
 *   - setView (기본값 false): true 설정 시 사용자 위치를 찾으면 해당 위치로 설정, 실패 시 World(전세계) 표시
 *   - maxZoom (기본값 Infinity): setView가 사용될 시 사용될 줌레벨
 */
map.locate({setView: true, maxZoom: 16});