앱인벤터 지도 컴포넌트

앱인벤터 지도 컴포넌트

 

앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.

이번 시간에는 앱인벤터의 지도 컴포넌트를 대해 알아볼 것이다. 지도 컴포넌트는 스마프폰에서 매우 중요한 지도 서비스를 제공하는 컴포넌트이다. 이전에는 단순히 지도만 보여주는 기능이 제공되었지만, 현재 지도위에 마커나 도형, 원, 선 등을 그릴 수 있는 다양한 기능을 제공한다.

 

. 지도 컴포넌트

지도 팔레트에서 지도 컴포넌트가 있다. 처음 지도 컴포넌트를 뷰어 화면에 drag&drop한다. 지도 컴포넌트에는 지도 컴포넌트와 관련된 원, 항상모음, 선연결, 마커, Navigation, 다각형, 사각형 등의 컴포넌트가 있다.

 

팔레트

이미지스프라이트 컴포넌트는 '그리기&애니메이션'에 있다. 이미지스프라이트 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다. 한가지 유념해야 할 것은 캔버스 컴포넌트를 추가한 후에 이미지스프라이트 컴포넌트를 추가할 수 있다. 

 

 뷰어

뷰어에는 지도 컴포넌트로 구성되어 있다.

지도와 관련된 간단한 지도앱을 만들어보자

 

앱인벤터 지도 컴포넌트 활용예

컴포넌트

컴포넌트에는 Screen1아래에 지도 컴포넌트로 구성된다.

. 지도 컴포넌트

지도에는 '지도이동감금', '초기지도를 현재보기로 설정합니다', '경계 박스 다시 설정' 세가지 버튼이 있다. 세개의 버튼은 디자이너에서만 보여지고 실행화면에서는 보여지지 않는다. 

지도이동감금은 지도 위를 마우스 드래그해도 이동이 되지 않는다. 이를 풀면 마우스로 드래그할 경우 지도가 이동된다.

'초기지도를 현재보기로 설정합니다.' 버튼은 현재 보이는 위치를 지도 속성 중 중심좌표로 지정한다. 현재 보이는 위치를 앱 실행시 지도의 초기 위치로 지정한다.

'경계박스다시설정' 버튼은 중심 좌표 속성에 입력된 위경도로 지도를 이동한다.

 

  

지도 컴포넌트 속성값

지도 컴포넌트 속성값에는 중심좌표, 팬활성화여부, 회전가능여부, 줌가능여부, 높이, 너비, 위치센서, 지도유형, 회전, 크기단위, 나침반보이기, 축척보기, 사용자보이기, 줌보이기, 보이기여부, 줌레벨 속성값이 있다.

 

중심좌표 속성값은 지도의 기본 중심 좌표를 지정한다. 값은 (위도, 경도) 쌍으로 지정하며 구분은 쉼표로 한다. 기본값은 (42.359144, -71.093612)이다.

팬활성화여부 속성값은 스마트폰에서 지도앱을 사용할 때 Pan(손가락을 밀어 지도를 움직이는 동작) 동작을 허용할지를 지정하는 값이다.

회전가능여부 속성값은 지도의 회전을 허용할 지를 지정한다.

줌가능여부, 줌(확대/축소)를 허용할지를 지정한다.

높이/너비 속성값은 지도의 가로/세로의 크기값을 지정한다.

위치센서 속성값은 기본 내장된 위치 제공자 대신에 사용할 위치 센서를 지정하는 값이다. 선택 가능한 위치 센서는 앱인베터의 위치센서 컴포넌트이다. 

지도유형 속성값은 지도의 모양을 선택한다. 선택 가능한 종류는 거리뷰, 항공뷰, 지형뷰가 있다.

회선 속성값은 지도의 회전각도를 지정한다.

크기단위 속성값은 축척에 사용되는 단위를 지정하는데 선택 가능한 단위는 '미터법', '야드법' 중에 선택이 가능하다.

나침반보이기 속성값은 지도 위에 나침반 표시를 선택하며 나침반이 기기의 방향에 따라 회전한다.

축척보이기는 지도의 축척을 표시한다. 크기단위 속성에 따라 '미터법'이면 5km가 기본 축척이며 '야드법'이면 3ml이 기본 축척이다.

줌보이기 속성값은 지도의 확대/축소 버튼 표시 여부를 설정한다. 지도 화면 위에 +, - 버튼이 보여진다. +를 누르면 확대, -를 누르면 축소가 된다.

줌레벨 속성값은 지도의 확대/축소 비율을 지정한다. 줌레벨 속성값의 범위는 1~18 값으로 1은 최소로 축소된 레벨이며 18은 최대로 확대된 레벨값이다.

앱인벤터 지도 컴포넌트 속성값

 

지도 컴포넌트 이벤트 블럭들

지도 컴포넌트의 이벤트 블럭에는 지도경계가변경되었을때, 더블탭했을때, 형상을클릭했을때, 형상을드래그했을때, 형상을 길게클릭했을때, 형상드래그시작했을때, 형상드래그멈출때, 형상을얻었을때, 잘못된좌표일때, 열기오류가발생했을때, 좌표를길게눌렀을때, 준비되었을때, 지점에탭했을때, 줌이변경되었을때 등의 이벤트 블럭이 있다.

 

. 지도 컴포넌트 지도경계가변경되었을때 블럭

사용자가 지도를 이동하거나 확대/축소 또는 회전을 해서 지도의 경곅 변경되었을 때 호출되는 블럭이다.

 

앱인벤터 지도 컴포넌트 지도경계가변경되었을때 블럭

 

. 지도 컴포넌트 더블탭했을때 블럭

사용자가 지도의 한 지점을 빠르게 두번 터치했을 때 호출되는 블럭이며, 더블탭한 위도, 경도 좌표 값을 반환해 준다. 

 

앱인벤터 지도 컴포넌트 더블탭했을때 블럭

 

. 지도 컴포넌트 형상을클릭했을때 블럭

지도 위에 마커나 도형 등의 형상을 클릭했을때 발생되는 블럭이다. 호출될 때 반환되는 값은 '형상'으로 지도위의 마커나 도형 등의 컴포넌트가 반환된다.

 

앱인벤터 지도 컴포넌트 형상을클릭했을때 블럭

 

. 지도 컴포넌트 형상을드래그했을때 블럭

지도 위에 마커나 도형 등의 형상을 드래그를 했을때 호출되는 블럭이다. 호출될 때 반환되는 값은 '형상'으로 지도위의 마커나 도형 등의 컴포넌트가 반환된다.

 

앱인벤터 지도 컴포넌트 형상을드래그했을때 블럭

 

. 지도 컴포넌트 형상을길게클릭했을때 블럭

지도 위에 마커나 도형 등의 형상을 길게 클릭했을때 호출되는 블럭이다. 호출될 때 반환되는 값은 '형상'으로 지도위의 마커나 도형 등의 컴포넌트가 반환된다.

 

앱인벤터 지도 컴포넌트 형상을길게클릭했을때 블럭

 

. 지도 컴포넌트 형상드래그를시작할때 블럭

지도 위에 마커나 도형 등의 형상을 드래그를 시작했을 때 호출되는 블럭이다. 호출될 때 반환되는 값은 '형상'으로 지도위의 마커나 도형 등의 컴포넌트가 반환된다.

 

앱인벤터 지도 컴포넌트 형상드래그를시작할때 블럭

 

. 지도 컴포넌트 형상드래그를멈출때 블럭

지도 위에 마커나 도형 등의 형상을 드래그를 멈출 때 호출되는 블럭이다. 호출될 때 반환되는 값은 '형상'으로 지도위의 마커나 도형 등의 컴포넌트가 반환된다.

 

앱인벤터 지도 컴포넌트 항상드래그를멈출때 블럭

 

. 지도 컴포넌트 형상을얻었을때 블럭

URL로부터 형상을 가져올 수 있을 때 호출되는 블럭이다. 인자값으로 'url'과 '형상'이 

지도 위에 마커나 도형 등의 형상을 드래그를 멈출 때 호출되는 블럭이다. 호출될 때 반환되는 값은 '형상'으로 지도위의 마커나 도형 등의 컴포넌트가 반환된다.

 

앱인벤터 지도 컴포넌트 형상을얻었을때 블럭

. 지도 컴포넌트 잘못된좌표일때 블럭

지도의 좌표값인 위도나 경도 값이 잘못된 값일 때 '잘못된좌표일때' 블럭이 호출되어 오류처리를 실행한다. 위도 범위는 -90~90이며 경도는 -180~180 범위의 값이다.

 

앱인벤터 지도 컴포넌트 잘못된좌표일때 블럭

 

. 지도 컴포넌트 열기오류가발생했을때 블럭

특정 URL로부터 지도를 가져오는데 오류가 발생할 경우, '열기오류가발생했을때' 블럭이 호출된다. 이 때 인자값으로 url, 응답코드, 오류메시지가 있다.

 

앱인벤터 지도 컴포넌트 열기오류가발생했을때 블럭

 

. 지도 컴포넌트 좌표를길게눌렀을때 블럭

사용자가 스마트폰의 지도의 특정 지점을 길게 눌렀을 경우 해당 좌표값을 알고 싶을 때 실행되는 블럭이다. 반환되는 값은 위도와 경도 인자값이다.

 

앱인벤터 지도 컴포넌트 좌표를길게눌렀을때 블럭

 

. 지도 컴포넌트 준비되었을때 블럭

사용자가 지도앱을 실행할 경우, 지도 컴포넌트를 초기화가 이루어진 후, 지도를 사용할 준비가 완료되었을 때, 호출되는 블럭이다.

 

앱인벤터 지도 컴포넌트 준비되었을때 블럭

 

. 지도 컴포넌트 지점에탭했을때 블럭

사용자가 지도의 특정 지점을 한번 터치한 경우, 해당 좌표를 알고 싶을 때 실행되는 블럭이다. 반환하는 값은 위도와 경도 좌표값이다.

 

앱인벤터 지도 컴포넌트 지점에탭했을때 블럭

 

. 지도 컴포넌트 줌이변경되었을때 블럭

사용자가 지도의 확대/축소율을 변경하였을 경우, 호출되는 블럭이다.

 

앱인벤터 지도 컴포넌트 줌이변경되었을때 블럭

 

지도 컴포넌트 호출 블럭들

앱인벤터 지도 컴포넌트의 호출 블럭은 마커만들기, 설명에서형상가져오기, URL에서 열기, 팬하기, 저장하기 호출 블럭이 있다.

 

. 지도 컴포넌트 마커만들기 호출블럭

사용자가 특정 위도와 경도에 새로운 마커를 만들 때 사용하는 호출블럭이다. 인자값으로는 위도와 경도값으로 숫자값을 입력한다.

'마커만들기' 호출블럭이 호출되고 반환하는 것은 생성된 마커 컴포넌트 객체를 반환해준다.

 

앱인벤터 지도 컴포넌트 마커만들기 호출블럭

. 지도 컴포넌트 설명에서형상가져오기 호출블럭

'설명' 값은 리스트값을 입력해주어야 하며, 리스트로 형상 설명을 입력해주면 '형상 컴포넌트'를 반환해주는 호출블럭이다.

앱인벤터 지도 컴포넌트 설명에서형상가져오기 호출블럭

 

. 지도 컴포넌트 URL에서열기 호출블럭

주어진 url로부터 GeoJSON 포맷의 형상 집합체를 가져옵니다. 만일 가져오기를 성공하며, 지도형상(GeoFeatures)는 GeoJSON 포맷으로부터 (key, value) 쌍의 리스트를  반환해준다. 만일 실패할 경우, HTTP 응답코드와 오류 메시지와 함께 '열기오류가발생했을때' 블럭이 호출된다.

GeoJSON이란 위치정보를 갖는 점을 기반으로 체계적으로 지형을 표현하기 위해 설계된 개방형 공개 표준 형식이다. 이것은 JSON인 자바스크립트 오브젝트 노테이션을 사용하는 파일형식이다.

앱인벤터 지도 컴포넌트 URL에서열기 호출블럭

 

. 지도 컴포넌트 팬하기 호출블럭

지도 중심을 지정된 위도, 경도로 이동하면서 확대율 또한 조정하는 호출블럭이다.

앱인벤터 지도 컴포넌트 팬하기 호출블럭

 

. 지도 컴포넌트 저장하기 호출블럭

지도 컴포넌트 위의 형상들을 해당 경로에 GeoJSON형식으로 저장한다.

앱인벤터 지도 컴포넌트 저장하기 호출블럭

 

지도 컴포넌트 가져오기/지정하기 블럭들

 

앱인벤터 지도 컴포넌트의 가져오기/지정하기 블럭에서 지도경계, 중심좌표, 팬활성화여부, 회전가능여부, 줌가능여부, 형상, 위치센서, 지도유형, 회전, 크기단위, 나침반보이기, 축적보기, 사용자보이기, 줌보이기, 줌레벨 블럭을 위주로 설명할 것이다. 여기서 설명되지 않는 블럭은 일반적인 블럭들이라 크게 어려운 것이 없으리라 생각이 된다. 만일 여기에 없는 블럭들이라면 버튼 컴포넌트 등을 참조하면 도움이 될 것이다. 

 

 

. 지도 컴포넌트 지도경계 블럭

지도경계 값에는 리스트 형식으로 동서남북 각 경계의 좌표를 리스트로 지정하거나 반환한다. 이를 통해 해당 좌표들이 경계가 되도록 지도를 이동한다. 리스트 값의 형식으로 (북쪽위도, 서쪽경도), (남쪽위도, 동쪽경도) 형식의 리스트를 지정하거나 반환된다.

 

앱인벤터 지도 컴포넌트 지도경계 블럭

 

. 지도 컴포넌트 중심좌표 블럭

지도의 중심 좌표를 지정한다. 값의 형식은 위도, 경도 형식으로 텍스트값으로 지정한다.

앱인벤터 지도 컴포넌트 중심좌표 블럭

 

. 지도 컴포넌트 팬활성화여부 블럭

지도의 이동 허용 여부를 지정하는 블럭이다. 참이면 중심을 이동하며, 거짓이면 지도의 중심 이동을 허락하지 않는다.

앱인벤터 지도 컴포넌트 팬활성화여부 블럭

 

. 지도 컴포넌트 회전가능여부 블럭

지도의 회전 허용 여부를 지정하거나 반환하는 블럭이다.  지정하는 값이 '참'이면 지도를 회전이 가능하며, '거짓'이면 지도를 회전시키지 못한다.

앱인벤터 지도 컴포넌트 회전가능여부 블럭

. 지도 컴포넌트 줌가능여부 블럭

지도의 지도확대 여부를 지정하거나 반환하는 블럭이다.  지정하는 값이 '참'이면 지도를 줌 확대/축소가 가능하며, '거짓'이면 지도를 줌시키지 못한다.

앱인벤터 지도 컴포넌트 줌가능여부 블럭

. 지도 컴포넌트 형상 블럭

값에는 리스트로 지도의 형상을 설정하거나, 지도 형상값을 리스트로 반환해준다.

앱인벤터 지도 컴포넌트 형상 블럭

 

. 지도 컴포넌트 위도/경도 블럭

현재 위치의 위도와 경도 위치값을 얻기 위해 사용되는 블럭이다.

앱인벤터 지도 컴포넌트 위도 블럭

앱인벤터 지도 컴포넌트 경도 블럭

 

. 지도 컴포넌트 위치센서 블럭

기본 위치 제공자 대신 사용할 위치 센서 컴포넌트를 지정하는 블럭이다.

앱인벤터 지도 컴포넌트 위치센서 블럭

 

. 지도 컴포넌트 지도유형 블럭

지도의 유형을 선택하거나 현재 선택된 지도 유형을 반환하는 블럭이다. 지도 유형은 거리뷰, 항공뷰, 지형뷰가 있다.

 

앱인벤터 지도 컴포넌트 지도유 가져오기 블럭

앱인벤터 지도 컴포넌트 지도유형 지정하기 블럭

 

. 지도 컴포넌트 회전 블럭

지도의 회전 각도를 지정하거나 회전 각도를 가져오는 블럭이다.

앱인벤터 지도 컴포넌트 회전 블럭

 

. 지도 컴포넌트 크기단위 블럭

지도의 축척에 사용되는 단위를 가져오거나 지정하는 블럭이다. 사용가능한 단위로는 미터법(1), 야드법(2) 값을 지정할 수 있다.

앱인벤터 지도 컴포넌트 크기단위 가져오기 블럭

앱인벤터 지도 컴포넌트 크기단위 지정하기 블럭

 

. 지도 컴포넌트 나침반보이기 블럭

지도 위에 나침반을 보이거나 보이지 않게 지정하는 블럭 혹은 현재 나침반보이기 여부 값을 가져오는 블럭이다.

앱인벤터 지도 컴포넌트 나침반보이기 블럭

 

. 지도 컴포넌트 축척보기 블럭

지도 위에 축척의 표시여부를 지정하거나 축척 표시여부의 값을 가져오는 블럭이다.

앱인벤터 지도 컴포넌트 축척보기 블럭

 

. 지도 컴포넌트 사용자보이기 블럭

지도 위에 사용자보이기 여부를 지정하거나 지정여부를 가져오는 블럭이다.

앱인벤터 지도 컴포넌트 사용자보이기 블럭

 

. 지도 컴포넌트 줌보이기 블럭

지도 위에 줌컨트롤로의 표시 여부를 지정하거나 지정여부를 가져오는 블럭이다.

앱인벤터 지도 컴포넌트 줌보이기 블럭

 

. 지도 컴포넌트 줌레벨 블럭

지도 위에 확대율을 지정한다. 확대율의 지도의 유형이나 위치에 따라 달라질 수 있다. 

앱인벤터 지도 컴포넌트 줌레벨 블럭

 

. 사용자위도, 사용자경도, 보이기여부 값 가져오기 블럭

. 현재 사용자의 위도, 경도, 보이기 여부 등의 값을 가져오는 블럭이다.

앱인벤터 지도 컴포넌트 사용자 위도, 경도, 보이기여부 블럭

 

이상으로 앱인벤터 지도 컴포넌트 블럭에 대해 간략히 살펴보았다. 좀더 자세히 확인하기 싶으면, 지도 예제 앱을 통해 블럭들을 하나씩 사용해보면서 블럭의 활용 용도 등을 파악하면 좋을 것 같다. 눈으로 보는 것보다 직접 해보는게 여러모로 코딩하는데 이해하고 코딩 실력이 향상되는데 도움이 된다.

 

Just Do it!!!

Just Drag&Drop!!!