# leaflet 예제

제가 사용하고 있는 지도와 관련된 파일은 두개 입니다. 

- /WEB-INF/jsp/web/stat/StatView.jsp
- /webapp/js/webMap.js

StatView.jsp 에서는 사용을 위해 함수 호출만 있고 실질적인 처리는 `webMap.js` 에서 이루어 집니다. 
아래 추가한 코드는 모두 `webMap.js` 에 있는 코드입니다.


# 맵 표출
![](https://goo.gl/k1OKnl)

```javascript
	wmap.init = function(mapid) {
		map = L.map(mapid, {});
		L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201411/{z}/{x}/{y}.png', {
			maxZoom : 18,
			id : 'mapbox.streets'
		}).addTo(map);
		map.invalidateSize();
		map.setView([ 37.40187, 126.97351 ], 13);
	}
```
타일맵을 생성합니다. 타일맵 소스는 vworld 에서 가져옵니다. 
사이즈 조정을 위해서 `invalidateSize()`를 호출합니다.
뷰를 변경하기 위해 `setView`를 호출합니다.


# 지도 화면 클릭 이벤트 처리
```javascript
var clickBind = '<div><input type="button" value="상황등록" class="AXButton" onclick="fnPopEventRegist()"/></div>' + '<div><input type="button" value="전파등록" class="AXButton" onclick="fnPopSpreadRegist()" /></div>';
wmap.onClick(clickBind);
	
// 지도클릭 이벤트 등록
wmap.onClick = function(bind) {
	map.on('click', function(e) {
		L.popup().setLatLng(e.latlng).setContent(bind).openOn(map);			
		latlng = e.latlng;
	});
}
```
`L` 로 시작하는 부분이 Leaflet 입니다. 지도 클릭시 넘어온 `e` 에서 좌표정보 `e.latlng` 를 이용하여 클릭 이벤트를 처리합니다.  클릭 위치에 넘겨준 clickBind HTML 코드가 표출됩니다. 


![](https://goo.gl/WRdHLP)



  
# 데이터 가져오기 

`GeoServer` 를 통해서 데이터를 가져옵니다.
 
![](https://goo.gl/WYHWCf)

3개의 레이어를 서비스 하고 있습니다.



```javascript
	var info = getLayerInfo(table, type);		
	var callbackName = getCallbackName();		
	var parameters = L.Util.extend(getWfsDefaultParameters(info, callbackName));
```
`jsonp` 를 이용을 위한 값을 세팅합니다.  동시에 여러개의 jsonp 를 요청하기 콜백이름을 서로 다르게 주기 위하여 콜백이름을 생성합니다.

```javascript
function getCallbackName() {
	callbackIdx += 1;
	return "getJson" + callbackIdx;
}
``` 

ajax 요청을 위한 기본 파라미터 값을 세팅합니다.
```javascript

	var wfsDefaultParameters = {	// GeoServer 요청을 위한 파라미터
		service : 'WFS',
		version : '1.0.0',
		request : 'GetFeature',
		maxFeatures : 200,
		outputFormat : 'text/javascript',
		//format_options : 'callback: getJson',
		srsName : 'EPSG:4326'
	};
	
	var parameters = L.Util.extend(getWfsDefaultParameters(info, callbackName));

	// WFS 기본 파라미터를 설정하여 반환한다. 
	function getWfsDefaultParameters(info, callbackName) {
		wfsDefaultParameters.typeName = "mcs:" + info.table;
		if (info.filter && info.type){
			wfsDefaultParameters.CQL_FILTER = info.filter + "='" + info.type + "'";
		}		
		wfsDefaultParameters.format_options = "callback: " + callbackName;
		return wfsDefaultParameters;
	}
```

ajax 를 통해 데이터를 요청합니다. 

```javascript
// 지도에 마커를 추가한다. 해당 마커에 이벤트 바인드를 한다.
wmap.addLayerBind = function(bind, table, type) {
	var info = getLayerInfo(table, type);		
	var callbackName = getCallbackName();		
	var parameters = L.Util.extend(getWfsDefaultParameters(info, callbackName));
	console.log(wfsUrl + L.Util.getParamString(parameters));

	$.ajax({			
		url : wfsUrl + L.Util.getParamString(parameters),
		dataType : 'jsonp',
		jsonpCallback : callbackName,
		success : function(data){
			// 기존 레이어 삭제
			deleteLayer(info);				
			
			// 새로운 레이어 추가.
			layer = L.geoJson(data, {
				pointToLayer : function(feature, latlng) {
					return L.marker(latlng, {
						icon : typeIcon(info.icon)
					}).bindPopup(bind(feature)).openPopup();
				}
			}).addTo(map);
			
			styledLayerControl.addOverlay(layer, typeLegend(info.icon, info.title), {
				groupName : info.group,
				expanded : true
			});
				
			layerMap[info.getKey()] = layer;
		}
	});
}
```

`L.geoJson`을 이용하여 마커를 표출합니다. 

```javascript
	// 새로운 레이어 추가.
		layer = L.geoJson(data, {
			pointToLayer : function(feature, latlng) {
				return L.marker(latlng, {
					icon : typeIcon(info.icon)
				}).bindPopup(bind(feature)).openPopup();
			}
		}).addTo(map);
```

![](https://goo.gl/qNNhqn)


`icon : typeIcon(info.icon)` 에서 아이콘을 설정합니다. 
`bindPopup(bind(feature)).openPopup()` 에서 클릭시 이벤트를 처리합니다. 


![](https://goo.gl/zPkKCy)


# 범례 표시

범례 표시를 위해서 [StyledLayerControl](https://github.com/davicustodio/Leaflet.StyledLayerControl)을 사용하였습니다.

- https://github.com/davicustodio/Leaflet.StyledLayerControl


![](https://goo.gl/5eYIgJ)

styledLayerControl에 추가(addOverlay)합니다. 
```javascript
	styledLayerControl.addOverlay(layer, typeLegend(info.icon, info.title), {
		groupName : info.group,
		expanded : true
	});
```

![](https://goo.gl/zVzfLa)

addOverlay 한번에 범례에 하나의 아이콘이 추가됩니다. 범례에 보이는 수 만큼 ajax 요청을 하여 데이터를 얻어오고, 화면에 마커를 추가하였습니다. 




범례에 표시되는 아이콘은 아래와 같이 설정하였습니다. 

```javascript
	var iconSize = [ 30, 30 ]; // size of the icon
	var iconAnchor = [ 15, 15 ]; // point of the icon which will correspond
	// to marker's location
	var popupAnchor = [ 0, -10 ]; // point from which the popup should open
	// relative to the iconAnchor

	var typeIcon = function(type) {
		return L.icon({
			iconUrl : '/img/marker/' + type + '.png',
			iconSize : iconSize,
			iconAnchor : iconAnchor,
			popupAnchor : popupAnchor
		});
	}

	var typeLegend = function(icon, title) {
		console.log(icon, title);
		return "<span><img src='/img/marker/" + icon + ".png' style='vertical-align: middle;'  height='45' width='45' />" + title + "</span>";
	}
```