Leaflet 범례 표시

leaflet 지도에 범레를 표시한다.

leaflet plugin 페이지를 참고한다.

그중에서 StyledLayerControl을 활용한다.

1. Leaflet 참조 추가

snippet.javascript

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

1. styledLayerControl.css, styledLayerControl.js 참조 추가 (파일 추가)

snippet.javascript

<link rel="stylesheet" href="../css/styledLayerControl.css" />
<script src="../src/styledLayerControl.js"></script>

1. 옵션 정의하여 styledLayerControl 생성

snippet.javascript

var options = {
	container_width : "200px",
	container_maxHeight : "350px",
	group_maxHeight : "80px",
	exclusive : false
}
 
styledLayerControl = L.Control.styledLayerControl(null, null, options);
map.addControl(styledLayerControl);

• container_width : 컨테이너 넓이
• container_maxHeight : 컨테이너 최고 높이. 최고 높이를 초과하면 스크롤이 생성됨
• group_maxHeight : 그룹 최고 높이. 최고 높이를 초과하면 스크롤이 생성됨
• exclusive : 하나의 그룹만 확장 되도록 설정. 나머지 그룹은 축소됨.

snippet.javascript

control.addOverlay( layer, "LAYER NAME", {groupName : "GROUP NAME"} );

시작시에 그룹이 확장된 상태로 있게 하려면, expanded 옵션을 추가해 준다.

snippet.javascript

control.addOverlay( layer, "LAYER NAME", {groupName : "GROUP NAME", expanded: true} );