インタラクティブなマップレイヤーを表示する

HERE Maps API for JavaScriptのインタラクティブマップレイヤー (IML) を使用すると、動的データ、リアルタイムデータ、秘密性の高いデータをマッピングアプリケーションに統合できます。IMLを使用すると、ビジネスユースケースに合わせてさまざまなスタイルとフィルタリング機能を使用して、大規模なデータセットを効率的に管理および視覚化できます。

たとえば、公共施設の位置、リアルタイムの交通情報、環境データなどの地理空間データを使用してデータセットのスタイル設定とフィルタリングを動的に行うことができ、ユーザーが地理空間情報を探索して操作しやすくなります。

IML は HERE プラットフォームに保存され、フィーチャーの詳細の表示や、レイヤー内のフィーチャーのデータサイズと数の確認など、フィーチャーとレイヤーの詳細な検査を実行できるようにすることで、地理データの管理と分析のための包括的かつインタラクティブなエクスペリエンスを提供します。現在表示されているレンダリングデータの詳細を表示したり、IDで特定のフィーチャーを検索したりすることもできます。

📘
以下の手順は、IMLを読み取り専用モードでレンダリングする方法ですが、マッピングアプリケーションから直接レコードを更新、追加、または削除してIMLデータを操作することもできます。詳細については、HERE Data API開発者ガイドを参照してください。

チュートリアルの目的

このチュートリアルでは、以下のタスクを実行します。

HEREプラットフォームで、アムステルダムのストリートマーケットに関する、一般に公開されている地理空間データを含むインタラクティブマップレイヤーを作成します。
HERE Maps API for Javascriptを使用してレイヤーに接続し、ベクターマップ上にストリートマーケットの場所をマーカーとして表示します。

前提条件

HERE プラットフォームでプロジェクトを作成し、アプリを登録します。詳細については、「利用開始」を参照してください。
詳細な手順で説明されているように、OAuth 2.0 トークンを取得してAPIリクエストを認証します。詳細については、「OAuth 2.0で認証する方法」を参照してください。
IMLの一部としてアップロードするデータを準備します。このチュートリアルでは、一般に公開されているアムステルダムのストリートマーケットに関連する GeoJSON データを使用します。

カタログを作成する

関連するデータレイヤーのコレクションであるカタログを作成します。カタログには、地理空間データを含むさまざまな種類のストリームまたはバッチデータを表すさまざまな種類のレイヤーを含めることができます。カタログは一意の HERE Resource Name (HRN) によって識別されます。これはカタログの作成時に HERE プラットフォームによって自動的に生成されるものです。

カタログは以下の方法で作成できます。

HERE プラットフォームのユーザーインターフェースを介します。この手順は以下で説明しています。
config サービスへの HERE Data API 呼び出しを介します。詳細については、HERE Data API 開発者ガイドの「カタログを作成する」を参照してください。

HERE プラットフォームのユーザーインターフェースでカタログを作成するには、次の手順を実行します。

HERE プラットフォームで、上部のナビゲーションバーから [ランチャ] メニューを開きます。
[ランチャ] メニューから、[プロジェクトマネージャー] を選択します。マネージャーには、次の例に示すように、プロジェクトのリストが表示されます。
カタログをホストするプロジェクトを選択します。
選択したプロジェクトの [リソース] タブの [カタログ] セクションで、[カタログを追加する] > [新しいカタログを作成する] をクリックします。
[カタログを追加する] ダイアログメニューで、新しいカタログの詳細を入力して設定し、[保存] をクリックして設定を確認します。HERE プラットフォームは、次の例に示すように、プロジェクトで利用可能なリソースのリストにカタログを追加します。

📘
注
カタログのHRNは、[概要]タブの[カタログ情報]セクションに表示されます。
作成したカタログを選択します。
[共有] タブで、ユーザー ID とプラットフォームアプリの両方に、カタログの範囲内で少なくとも読み取り権限と書き込み権限があることを確認します。HERE プラットフォーム内のエンティティに 読み取り、書き込み、または管理の権限を付与するには、[Share](共有する) をクリックします。次の図を参照してください。

インタラクティブマップレイヤーを作成する

特定の地理的エンティティおよびフィーチャーに関連するデータをホストする IML を作成します。

前に構成したカタログで、[Add new layer](新しいレイヤーを追加する) をクリックします。
新しいレイヤーの [設定] ダイアログメニューで、[Layer Type](レイヤータイプ) ドロップダウンから [インタラクティブマップ] を選択します。
レイヤー名、レイヤーID、レイヤーの概要、レイヤーの説明、コスト配分タグなどの必須レイヤープロパティを設定します。

📘
注

レイヤー ID プロパティの値を書き留めます。

このチュートリアルでは、次の図に示すように、サンプルレイヤーで必須オプションのみを使用します。

必須および追加のレイヤープロパティの詳細については、Data API開発者ガイドの「レイヤーを作成する」を参照してください。 4.[レイヤーを保存する]をクリックして設定を確認します。

レイヤーにデータを公開する

地理空間データを IML に公開するには、インタラクティブ REST API を使用します。次のコードスニペットは、GeoJSON 形式でデータを公開するために調整された curl リクエストの例を示しています。

curl -X PUT "https://interactive.data.api.platform.here.com/interactive/v1/catalogs/<CATALOG_HRN>/layers/<LAYER_ID>/features" \
     -H "Authorization: Bearer <TOKEN>" \
     -H "Accept: application/geo+json" \
     -H "Content-Type: application/geo+json" \
     -d '<GeoJSON>'

リクエストは、以下のように指定されています。

<CATALOG_HRN> は、データを公開するレイヤーを含むカタログの HERE リソース番号 (例：hrn:here:data::olp-here:amsterdam-street-markets)。
<LAYER_ID> は、そのカタログ内のターゲットレイヤーの ID を参照 (例：street-markets)。
<TOKEN> は、リクエストを認証するために必要な認証トークン。
<GeoJSON> は、リクエストとともに送信される実際のデータを参照。これは、挿入するフィーチャーを含む、GeoJSON 形式の文字列にする必要があります。

詳細については、Data API 開発者ガイドの「インタラクティブマップレイヤーにデータを公開する」を参照してください。

サーバーから 200 OK レスポンスを受信した後、次の図に示すように、HERE プラットフォームでレイヤーデータを直接検査できます。

マップにIMLデータを表示する

IMLを作成してデータを入力した後、IMLプロバイダーサービスを使用すると、HERE Maps API for JavaScriptを使用してそのデータをマップ上に表示できます。このサービスは、HERE Interactive Map Data APIを通じてレイヤーデータを取得し、マップ上のカスタムレイヤーを操作して管理できるようにします。

📘
注
次の手順では、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基盤として、コードを追加する方法を説明します。

マップの中心をアムステルダムに設定し、マップビューのズームレベルを指定します。
```
map.setCenter( {lat: 52.3676, lng: 4.9041 })
map.setZoom(12)
```
任意：IMLデータの可視性を高めるために、次の例に示すようにdefaultLayers変数を変更してPOI表示を無効にします。
```
const defaultLayers = platform.createDefaultLayers({pois: false})
```

IMLデータをインポートし、マップ上に表示するようにaddIml関数を設定します。

function addIml(map) {
   // Define Here Resource Name (HRN) of the catalog
   const catalogHrn = "hrn:here:data::olp-here:amsterdam-street-markets";
   // Define the layer that stores data
   const layerId = "street-markets";
   // Instantiate the IML service
   const service = platform.getIMLService();
   // Create a provider for the IML data
   const imlProvider = new H.service.iml.Provider(service, catalogHrn, layerId);

   // Add the IML layer to the map
   map.addLayer(new H.map.layer.TileLayer(imlProvider));

}
// Call the addIml(map) function to add the IML layer to the map:
addIml(map);

これでマップ上に地理空間データが表示され、次の例に示すように、アムステルダムのストリートマーケットの場所がポイントとしてマークされます。 HERE Maps API for JavascriptのIMLレイヤー

概要

このチュートリアルでは、HERE プラットフォームでインタラクティブマップレイヤーを作成して設定しました。インタラクティブREST API呼び出しを通じてレイヤーにデータを入力しました。次に、レイヤーのIDとその親カタログのHRNを使用し、HERE Maps API for JavaScriptを通じてHEREマップ上にIMLデータを表示しました。

次のステップ

HERE Maps API for Javascriptの設計とフィーチャーの詳細については、「APIリファレンス」を参照してください。

チュートリアルの目的

前提条件

カタログを作成する

インタラクティブ マップ レイヤーを作成する

レイヤーにデータを公開する

マップにIMLデータを表示する

概要

次のステップ

インタラクティブマップレイヤーを作成する