leaflet - #2 레이어 컨트롤 추가하기

지난 글에서 처음으로 leaflet을 이용한 지도를 만들어봤습니다.

이번에는 지난 번에 만들었던 지도에 여러 개의 레이어를 추가하고, 레이어를 보이거나 감추는 컨트롤을 추가해 보겠습니다.

Leaflet은 맵에 추가된 레이어의 목록을 확인하고 on/off 할 수있는 컨트롤을 제공합니다.  아래 실행화면 오른편에 보이는 아이콘이 바로 레이어 컨트롤입니다.

 

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

자바스크립트 코드 부분을 설명 드리면

var hanRiverPos = [37.5118, 126.9745];

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

var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

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 markerLayer = L.marker(hanRiverPos).addTo(map)
    .bindPopup('여기는 한강입니다!');

var baseMaps = {
  "OSM" : osmLayer,
  "브이월드": vworldLayer
};

var overlayMaps = {
    "마커": markerLayer
};

osmLayer.addTo(map);

L.control.layers(baseMaps, overlayMaps).addTo(map);

1: 한강 위치 위경도 좌표

3: 맵 만들기(한강위치가 지도 중심이고 확대레벨이 12)

5~7: 맨 밑 바탕 지도 #1 설정(Open Street Map)

9~11: 맨 밑 바탕 지도 #2 설정(브이월드)

13~14: 마커 레이어 정의 후 지도에 추가

16~19: 레이어 컨트롤에 바탕지도로 지정할 2개 레이어 정의

21~23: 레이어 컨트롤에 중첩지도로 지정할 1개 레이어 정의

25: 바탕지도 중 첫번째 레이어를 지도에 표시

27: 레이어 컨트롤 지도에 추가

 

레이어 컨트롤로 바탕지도, 중첩지도 제어

다음 글에서는 WMS 레이어를 추가하는 방법에 대해 설명드리겠습니다.