Leaflet 강좌 ㅡ 1. 배경지도로 타일맵 활용하기

클라이언트 GIS 엔진 중 오픈 소스코드 형태의 leaflet에 대한 내용을 정리해 봅니다. leaflet은 모바일과 PC에서 간결하며 빠르고 높은 사용성을 목표로 설계되었고 개발된 웹 클라이언트 GIS 엔진입니다. 이와 유사한 OpenLayers도 있는데, 플러그인 형태의 확장성 면에서 본다면 leaflet이 더 뛰어나다고 생각됩니다. 그러나 TMS, WFS, WCS, WMS 등과 같은 OGC 표준 및 GeoServer와의 궁합은 OpenLayers가 더 뛰어납니다.

리플릿에 대한 강좌 첫번째로 배경지도로 타일맵을 활용하는 내용에 대해 정리합니다. 이 강좌와 관련된 모든 글은 Leaflet의 공식 사이트에서 제공되는 튜토리얼을 제 나름대로 학습하고 정리한 글임을 밝힙니다.

먼저 리플릿 라이브러리 소스코드와 미리 정의된 스타일에 대한 CSS를 웹페이지에 추가합니다.

그리고 지도가 표시될 div를 아래처럼 추가하고 웹페이지에 대한 onload 이벤트를 onLoad 함수로 지정합니다.

div와 같은 시각적인 요소가 있다면 이에 대한 스타일 지정이 필요합니다. 아래처럼 div에 대한 스타일을 지정합니다. div의 id는 map으로 지정 하였습니다.

onLoad 함수는 다음과 같습니다.

function onLoad() 
{
    var map = L.map('map');

}

위의 코드를 설명하면, map으로 id가 지정된 div에 지도를 표시하도록 map 객체를 생성하여 map이라는 변수에 담고 있습니다. 이제 타일 레이어를 이 map 객체에 추가 하겠습니다. 아래의 코드를 위의 코드 중 4번 라인에 추가합니다.

var key = !_아래 글 참조_!;
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?' + 
    'access_token=' + key,
    {
        maxZoom: 18,
        attribution: 'Mapbox',
        id: 'mapbox.streets'
    }
).addTo(map);

타일맵 레이어는 MapBox에서 제공하는 데이터를 사용하였습니다. 위의 코드 중 1번은 MapBox에서 발급받은 key 값인데, 필자는 ‘pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ’ 값을 사용하였습니다. 저와 같이 딱히 당장 사용할만한 key가 없다면 사용해보시기 바랍니다. 그외 5번의 maxZoom 값은 MapBox에서 제공하는 타일맵 레이어가 최대 18 줌 레벨을 지원하므로 이 값을 사용하였습니다.

리플릿을 통해 지도가 표시될 div를 지정하고 이에 대한 map 객체까지 생성했으며, 표시할 타일맵 레이어도 추가하였습니다. 이제 마지막으로 사용자가 볼 지도의 위치를 지정해야 합니다. 다음의 코드를 위의 코드 아래에 추가합니다.

map.setView([51.505, -0.09], 13);

위의 setView는 2개의 인자를 받습니다. 첫번째는 경위도 좌표에 대한 배열값이고 두번째는 줌레벨 값입니다. 이제 실행해 보면 아래와 같은 결과를 볼 수 있습니다.