# Leaflet 범례 표시

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

[leaflet plugin](http://leafletjs.com/plugins.html#layer-switching-controls) 페이지를 참고한다.

그중에서 [StyledLayerControl](https://github.com/davicustodio/Leaflet.StyledLayerControl)을 활용한다.

### 사용법

1.  Leaflet 참조 추가

```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>
```

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

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

3. 옵션 정의하여 styledLayerControl 생성

```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 : 하나의 그룹만 확장 되도록 설정. 나머지 그룹은 축소됨.

### 동적으로 레이어와 그룹 추가하기

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

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

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