MapLibre - #6 내 위치 공시지가 확인 코딩 2편

이번 글에서는 브이월드 WFS 서비스로 가져온 지적정보를 화면에 표시하는 방법을 설명드리겠습니다. 아래 실행 화면처럼 정보창을 표시하기위해 MapLibre에서 제공하는 MarkerView 플러그인을 사용하겠습니다. MarkerView 플러그인을 사용하시려면 build.gradle 파일에 아래 내용을 추가하시고 Sync Project with gradle files(안드로이드 스튜디오 기준) 해 주시면됩니다.

implementation 'org.maplibre.gl:android-plugin-markerview-v9:1.0.0'

Repository 이름이 Mapbox SDK v9와 거의 동일한 명명 규칙을 갖고 있으니, 참고하십시오.

터치한 위치의 지적정보 표시

주요 소스는 아래와 같습니다.

MarkerView 생성 후 지도에 표시

AddMarkerSymbol이라는 메서드를 만들고 파라미터로 style, 경도, 위도, 메시지를 받습니다.

이 함수의 호출은 onMapReday에서 정의한 addOnMapClickListener 함수에서 getWFSJson를 통해 호출하도록 했습니다추후에 전체 소스와 데모 App을 앱스토어에 등록해서 알려드리도록 하겠습니다.

418 ~ 426 라인은 customView를 정의하는 부분으로 아래 레이아웃 xml에 값을 지정하고 MarkerView 생성후 화면에 표시합니다. 레이아웃 형태 xml은 아래와 같습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="200dp"
xmlns:tools="http://schemas.android.com/tools"
android:background="@color/cardview_dark_background"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"
android:layout_height="wrap_content">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/marker_window_title"
        android:layout_width="wrap_content"
        android:padding="8dp"
        tools:text="여기에 글을 남겨주세요"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/marker_window_snippet"
        android:layout_width="wrap_content"
        android:padding="8dp"
        tools:text="여기에 글을 남겨주세요"
        android:textColor="@color/white"
        android:layout_height="wrap_content" />
</LinearLayout>
</androidx.cardview.widget.CardView>