10. 앱인벤터 : 앱인벤터 맵(오픈스트리트맵) 활용하여 지도 나타내기

 

 

 

 

앱 인벤터에서 지도를 이용하는 방법은 크게 3가지로 나누어 볼 수 있습니다.

 

1) Activity Starter(액티비티스타터)를 이용하는 방법

2) 웹 뷰어를 이용하는 방법

3) 오픈스트리트맵 을 이용하는 방법

 

 

지난 글에서는

액티비티 스타터 이용법과 웹뷰어 이용법을 살펴보았습니다. 

8. 앱인벤터 지역 검색하여 지도에 나타내기(액티비티 스타터 사용법)

8. 앱인벤터 지역 검색하여 지도에 나타내기(액티비티 스타터 사용법)

9. 앱인벤터 길찾기(경로 안내) 앱 만들기(액티비티스타터, 웹뷰어)

9. 앱인벤터 길찾기(경로 안내) 앱 만들기(액티비티스타터, 웹뷰어)

 

9-1. 앱인벤터 길찾기 - 웹 뷰어 이용하기

9-1. 앱인벤터 길찾기 - 웹 뷰어 이용하기

 

 

 

 

이번에는 오픈스트리트맵을 이용하는 방법을 알아보겠습니다. 

 

 

---

 

 

 

1. 오픈스트리트맵 사용법

 

 

오픈스트리트맵을 사용하는 방법은

앱 인벤터에 이미 있는 지도(Map)을 이용하는 방법이라 할 수 있습니다. 

 

앱 인벤터에는 왼쪽 팔레트에 '지도' 탭이 있습니다.

'지도' 탭의 '지도'는 

오픈스트리트맵이며 

이름에서 보듯이 지도 오픈소스입니다. 

www.openstreetmap.org  

오픈스트리트맵

 

앱인벤터에서 오픈스트리트맵을 이용하는 방법은

아래 링크를 타고 가서 더 자세히 알아볼 수 있는데요. 

http://ai2.appinventor.mit.edu/reference/components/maps.html 

Maps

 

이번글에서는

1) Map과

2) Marker(마커)를 이용하는 방법을 정리해보겠습니다. 

 

 

1-1 팔레트 - 지도 탭 살펴보기

 

앱 인벤터 팔레트 > 지도 를 살펴보면 

원, 형상모음, 선연결, 지도, 마커, 네비게이션, 다각형, 사각형 등을 볼 수 있죠. 

 

 

1-2 지도 블록 살펴보기

 

실제 코딩에 들어가기 전에

지도와 관련된 코드를 살짝 살펴보겠습니다. 

 

'지도'를 클릭했을 때

마커 만들기, 형상 가져오기, URL에서 열기, 팬하기, 경로 저장하기 등을 사용할 수 있습니다. 

 

---

 

 

2. 앱 화면 및 기능 구상하기

 

 

그럼 이제 오픈스트리트맵을 이용해서 간단한 지도 앱을 만들어 보겠습니다. 

 

이 앱의 기능은 아래와 같습니다. 

 

 

어떤 지역을 검색하면 그 지역의 위치가 지도 위에 나타난다.

자주 방문한 곳 목록 뷰에서 장소를 선택했을 때에도 그 지역의 위치가 지도 위에 나타난다.

그리고 지도 위에서 어떤 한 위치에 탭을 하면 마커가 표시된다. 

 

 

 

 

 

3. 앱 화면 만들기

 

 

이제 앱의 화면을 만들어 보겠습니다. 

 

꼭 넣어야할 컴포넌트를 먼저 살펴보겠습니다. 

 

팔레트 지도 탭에서

1) 지도

2) 마커

를 꼭 넣어주고

 

센서 탭에서

1) 위치센서

도 꼭 넣어줍니다.

 

 

좀 더 자세히 지도와 관련하여 어떤 컴포넌트가 들어갔는지 살펴보겠습니다. 

 

1) 지도

2) 마커

3) 위치센서가 보이네요. 

 

이렇게 3가지가 잘 나타나 있네요. 

 

그럼

지도의 속성을 살펴보겠습니다. 

 

지도에서 중심좌표를 설정해주고,

줌 가능 여부 체크 및 줌 레벨도 설정해줍니다. 

 

 

 

4. 코딩하기

 

디자인이 끝났다면 코딩을 해줍니다. 

 

먼저

map(x)라는 함수를 만들어주었습니다.

장소이름이 바로 파라미터 x가 되고

장소이름의 위도와 경도를 팬하기, 즉 나타내줍니다. 

그리고 확대를 해줄건데 이때는 줌(Zoom) 레벨을 가져옵니다. 

 

버튼1(검색)을 클릭했을 때는

지도1에 사용자가 입력한 지역의 위도와 경도를 받아서 팬하기(나타내기)를 해줍니다.

그리고 디자이너 탭에서 설정한 줌 레벨만큼 줌(Zoom) 해줍니다.

 

목록뷰에서 원하는 장소를 선택했을 때도

지도에서 그 장소를 나타내줍니다.

 

또한 지도에서 어떤 한 곳을 탭했을 경우에는

그 위치에 마커를 표시해줍니다. 

 

내가 검색한 곳에 마커를 설정해주려했다가 그냥 놔두고

내가 탭한 곳에만 마커를 설정해주는 코드를 짜보았습니다. 

 

 

 

5. 테스트하기

 

 

이제 테스트를 해보겠습니다.

 

 

지역을 검색하였을 때도 잘 나타나고, 목록에서 선택했을 때도 잘 나타납니다.

그리고 내가 원하는 곳을 탭 했을 때도 마커가 잘 나타납니다!!!!

 

---

 

 

6. 앱 인벤터에서 지도 사용법 3가지 정리

 

 

그럼 앱 인벤터에서 지도를 사용하는 방법을 다시 한 번 정리해보겠습니다. 

 

6-1. 액티비티 스타터 사용하기 

 

지도에 나타내고 싶은 장소의 이름을 파라미터 x로 두고

함수를 호출 할 때 사용자가 입력한 텍스트 값을 x에 연결한다!

 

6-2. 웹뷰어 사용하기

 

액티비티스타터와 마찬가지로 지도에 나타내고 싶은 장소의 이름을 파라미터 x로 두고

함수를 호출할 때 사용자가 입력한 텍스트 값을 x에 연결한다!

 

6-3. 오픈스트리트맵 사용하기

 

이 경우 사용자가 입력한 값을 파라미터 x로 받는 것은 똑같으나

그 위치의 위도와 경도를 호출하여 지도에 나타낸다.(팬한다.)

그리고 줌 레벨을 설정하여 지도를 자동으로 줌 해줄 수 있다. 

 

 

 

위의 3가지 기능을 이용하면 앱을 만들 때 '지도' 기능을 간편하게 넣을 수 있습니다.

 

다음 글에서는 지도 기능을 이용해 

길냥이를 발견한 경우 그 주소를 마커로 지도 위에 자동 표시해주고

카카오톡으로 주소를 공유하는 앱을 만들어보겠습니다.