チュートリアル:GeoJSON データを Azure Maps Android SDK に読み込む

[アーティクル]
04/12/2024

このチュートリアルでは、場所データの GeoJSON ファイルを Azure Maps Android SDK にインポートする手順を説明します。このチュートリアルでは、以下の内容を学習します。

Azure Maps を Android アプリケーションに追加する。
データソースを作成してローカルファイルまたは Web から GeoJSON ファイルを読み込む。
マップにデータを表示する。
マップ上のデータを操作して、その詳細を表示する。

Note

Azure Maps Android SDK の廃止

Android 用 Azure Maps Native SDK は非推奨となり、2025 年 3 月 31 日に廃止されます。サービスの中断を回避するには、2025 年 3 月 31 日までに Azure Maps Web SDK に移行します。詳細については、「Azure Maps Android SDK 移行ガイド」を参照してください。

前提条件

「Quickstart:Android アプリの作成。このクイックスタートで使用したコードをこのチュートリアルで拡張します。
目的地サンプルの GeoJSON ファイルをダウンロードします。

GeoJSON データを Web または assets フォルダーからインポートする

ほとんどの GeoJSON ファイルには、FeatureCollection 内のすべてのデータがラップされています。このシナリオを念頭に置くと、GeoJSON ファイルを文字列としてアプリケーションに読み込む場合、それらを地物コレクションの静的 fromJson メソッドに渡すことで、GeoJSON の FeatureCollection オブジェクトに文字列を逆シリアル化してマップに追加することができます。

次の手順は、アプリケーションに GeoJSON ファイルをインポートし、それを GeoJSON の FeatureCollection オブジェクトとして逆シリアル化する方法を示しています。

「Quickstart:Android アプリの作成。以降の手順は、そのアプリケーションを前提として記述されています。
Android Studio のプロジェクトパネルで app フォルダーを右クリックし、New > Folder > Assets Folder に移動します。
目的地サンプルの GeoJSON ファイルを assets フォルダーにドラッグアンドドロップします。

MainActivity.java ファイルに移動し、onCreate メソッド内で、mapControl.onReady イベントのコールバック内に以下のコードを追加します。このコードでは、importDataFromUrl メソッドを使用して SamplePoiDataSet.json ファイルを assets フォルダーからデータソースに読み込んでから、それをマップに追加します。

//Create a data source and add it to the map.
DataSource source = new DataSource();

//Import the geojson data and add it to the data source.
source.importDataFromUrl("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);

MainActivity.kt ファイルに移動し、onCreate メソッド内で、mapControl.onReady イベントのコールバック内に以下のコードを追加します。このコードでは、importDataFromUrl メソッドを使用して SamplePoiDataSet.json ファイルを assets フォルダーからデータソースに読み込んでから、それをマップに追加します。

//Create a data source and add it to the map.
DataSource source = new DataSource();

//Import the geojson data and add it to the data source.
source.importDataFromUrl("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);

GeoJSON データをデータソースとして読み込むコードを使用して、そのデータをどのようにマップ上に表示するかを指定する必要があります。ポイントデータには、いくつかの異なるレンダリングレイヤーが存在します。最もよく使用されるレイヤーは、バブルレイヤー、シンボルレイヤー、ヒートマップレイヤーです。 mapControl.onReady イベントのコールバックで、データをインポートするためのコードの後に、データをバブルレイヤーにレンダリングする次のコードを追加します。

//Create a layer and add it to the map.
BubbleLayer layer = new BubbleLayer(source);
map.layers.add(layer);

//Create a layer and add it to the map.
val layer = new BubbleLayer(source)
map.layers.add(layer)

Android Studio のプロジェクトパネルで、パス app > res > layout の下にある layout フォルダーを右クリックし、New > File に移動します。 popup_text.xml という名前の新しいファイルを作成します。
ファイル popup_text.xml を開きます。ファイルがデザイナービューで開いたら、画面を右クリックし、[XML に移動] を選択します。次の XML をコピーしてこのファイルに貼り付けます。この XML では、ポップアップと一緒に使用できる単純なレイアウトを作成し、テキストビューを含めます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_margin="8dp"
    android:padding="10dp"

    android:layout_height="match_parent">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:text=""
        android:textSize="18dp"
        android:textColor="#222"
        android:layout_height="wrap_content"
        android:width="200dp"/>

</RelativeLayout>

MainActivity.java ファイルに戻り、バブルレイヤーのコードの後に、再利用可能なポップアップを作成するための次のコードを追加します。

//Create a popup and add it to the map.
Popup popup = new Popup();
map.popups.add(popup);

//Close it initially.
popup.close();

MainActivity.kt ファイルに戻り、バブルレイヤーのコードの後に、再利用可能なポップアップを作成するための次のコードを追加します。

//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

//Close it initially.
popup.close()

click イベントをバブルレイヤーにアタッチするために、次のコードを追加します。バブルレイヤー内のバブルをタップすると、イベントが発生し、それによって、選択した機能のプロパティから詳細が取得され、popup_text.xml レイアウトファイルを使用してビューが作成され、それがコンテンツとしてポップアップに渡され、そしてフィーチャーの位置にポップアップが表示されます。

//Add a click event to the layer.
map.events.add((OnFeatureClick)(feature) -> {
    //Get the first feature and it's properties.
    Feature f = feature.get(0);
    JsonObject props = f.properties();

    //Retrieve the custom layout for the popup.
    View customView = LayoutInflater.from(this).inflate(R.layout.popup_text, null);

    //Display the name and entity type information of the feature into the text view of the popup layout.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText("%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    );

    //Get the position of the clicked feature.
    Position pos = MapMath.getPosition((Point)f.geometry());

    //Set the options on the popup.
    popup.setOptions(
            //Set the popups position.
            position(pos),

            //Set the anchor point of the popup content.
            anchor(AnchorType.BOTTOM),

            //Set the content of the popup.
            content(customView)
    );

    //Open the popup.
    popup.open();

    //Return a boolean indicating if event should be consumed or continue to bubble up.
    return false;
}, layer);

//Add a click event to the layer.
map.events.add(OnFeatureClick { feature: List<Feature> ->
    //Get the first feature and it's properties.
    val f = feature[0]
    val props = f.properties()

    //Retrieve the custom layout for the popup.
    val customView: View = LayoutInflater.from(this).inflate(R.layout.popup_text, null)

    //Display the name and entity type information of the feature into the text view of the popup layout.
    val tv = customView.findViewById<TextView>(R.id.message)
    tv.text = String.format(
        "%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    )

    //Get the position of the clicked feature.
    val pos = MapMath.getPosition(f.geometry() as Point?)

    //Set the options on the popup.
    popup.setOptions( //Set the popups position.
        position(pos),  //Set the anchor point of the popup content.
        anchor(AnchorType.BOTTOM),  //Set the content of the popup.
        content(customView)
    )

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue to bubble up.
    false
} as OnFeatureClick, layer)