Modal Dialog에서의 ol3-map 처리

입력필드에 좌표값을 지도를 이용해 받고 싶을 경우 Modal Dialog를 사용할 수 있다.
* Modal Dialog는 페이지를 이동하지 않고 특정 동작을 수행한후 닫을 수 있다

이 경우 OL3 지도는 size가 [0,0]인 display:none 상태가 된다.
그러므로 Modal Dialog가 show 상태가 될 때 OL3 지도를 updateSize()  해주어야 한다.

예제에 필요한 Modal Dialog를 핸들링 하는 방법은 Modals in Bootstrap 3 문서를 참조한다.
* Modal Dialog의 기본 설정과 위치, 사이즈 조정 등을 설명

<샘플> ol3-map_modal.html

ol3-map_modal-sample

예제의 작동내용은 다음과 같다.

  • ‘좌표검색’ 버튼을 누르면, Modal Dialog 를 띄운다
  • Modal Dialog가 오픈되는 ‘shown.bs.modal’ 이벤트에서 map.updateSize()를 수행
  • 초기 위치에 대해 ol.layer.Vector로 마커(point)를 띄우고 마우스로 움질일 수 있게 핸들링
  • ‘좌표입력’ 버튼을 누르면 마커의 위치에 대해 Daum Map API로 주소검색을 수행해
    좌표입력 text-input 박스에 좌표값을 넣는다. (EPSG:3857 –> WGS84 좌표변환 필요)
  • ‘주소로 찾기’ text-input 박스에 주소 또는 키워드를 넣으면 Daum Map API로 해당 주소 또는 장소에 대한 좌표를 받아 마커와 지도의 중심을 변경
  • 최초 좌표입력 text-input 박스에 좌표값이 있는 경우 마커를 위치시키고 Modal Dialog를 연다

코드 주요 부분에 대해 설명한다.

코드1) Modal의 open시에 map.updateSize() 하기


// 모달 다이알로그가 열리면 지도 크기 재조정
$("#myModal").on('shown.bs.modal', function(e){
e.preventDefault();
//console.log("Map Modal is shown!");

map.updateSize();
});

 

코드2) Daum Map API: 좌표를 주소로 출력


// 지도에 지도 중심좌표에 대한 주소정보를 표출하는 함수
function displayCenterInfo( coorWGS84 ) {
var latlon = new daum.maps.LatLng( coorWGS84[1], coorWGS84[0] );
// 좌표로 법정동 상세 주소 정보를 요청합니다
geocoder.coord2detailaddr( latlon, function(status, result){
if (status === daum.maps.services.Status.OK) {
var detailAddr = result[0].roadAddress.name ? result[0].roadAddress.name : result[0].jibunAddress.name;
document.getElementById('locateAddrText').value = detailAddr;
}
});
}

코드3) Daum Map API: 주소 또는 키워드에 대한 좌표를 얻어 마커와 지도를 이동


// 지도와 마커 이동
function moveCenter( coorWGS84, point ){
// 제주도 안에 있는지 체크, 아니면 false 리턴
var square = ol.geom.Polygon.fromExtent( boundWGS84 );
if( square.intersectsCoordinate( coorWGS84 ) ){
var coor = ol.proj.transform( coorWGS84, 'EPSG:4326', srsName);
// 지도와 마크 이동
viewMain.setCenter( coor );
if( typeof point !== 'undefined' && point.getGeometry().getType() === 'Point' ){
point.getGeometry().setCoordinates( coor );
}
return true;
}
return false;
}

// 주소로 지도&마크 이동
function moveCenterByAddr( addr ) {
var lonlat, rtn;
// 주소로 좌표를 검색합니다
geocoder.addr2coord( addr, function(status, result) {
if (status === daum.maps.services.Status.OK) {
lonlat = [ parseFloat(result.addr[0].lng), parseFloat(result.addr[0].lat) ];
console.log( addr + ' ==> [' + lonlat.join(', ') + ']' );
rtn = moveCenter( lonlat, pointFeature );
}
// 좌표 실패시 키워드로 장소를 검색합니다.
if( !rtn ){
geoplaces.keywordSearch( '제주특별자치도 '+addr, function(status, data, pagination){
if (status === daum.maps.services.Status.OK) {
lonlat = [ parseFloat(data.places[0].longitude), parseFloat(data.places[0].latitude) ];
rtn = moveCenter( lonlat, pointFeature );
if( !rtn && data.places.length > 1 ){
// 제주도가 아닐 경우, 두번째 시도
lonlat = [ parseFloat(data.places[1].longitude), parseFloat(data.places[1].latitude) ];
moveCenter( lonlat, pointFeature );
}
console.log( addr + ' ==> [' + lonlat.join(', ') + ']' );
}
});
}
});
}

마지막으로 중요한 TIP!!

Daum Map API에서 services 라이브러리들을 사용하기 위해서는 API-Key 뒤에
‘&libraries=services’를 반드시 붙여야 한다. 아니면 정의 안된 객체 사용으로 오류가 발생한다.

 

__ 끝 __

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: