ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド
  2. 地図をカスタマイズする

地域固有の地図を設定する

 HERE Maps API for JavaScript version 3.2

HERE Maps API for Javascriptは、日本や韓国などの国向けに地域専用サービスを提供しています。地域限定サービスではHERE Mapsのワールドワイド版と同じ基本機能を使用できますが、各国固有の要件や政府規制を考慮した追加機能や制限事項があります。

地図地域の設定方法

地図領域はH.service.Platform.Optionsオブジェクトのオプションのregionプロパティを使用して設定します。使用可能な値は以下のとおりです。

  • "ROW" (デフォルト)：世界地図バージョン
  • "JP"：日本
  • "KR"：韓国

例：

次のスニペットでは、地図地域を韓国に設定しています。

const platform = new H.service.Platform({
  "apikey": "{YOUR_API_KEY}",
  "region": "KR"
});

注

デフォルトのワールドワイドバージョン以外のサービスを使用すると、サービスエンドポイントだけでなく、地図のスタイル設定や利用可能な機能にも影響が出ます。

韓国の地域的な制限と考慮事項

韓国の地域限定地図バージョンには、政府の規制により次のようないくつかの重要な制限事項があります。

  • 地理的範囲は韓国に限定されています。
  • アクセスは、GeoIPベースのフィルタリングを使用して韓国から行われたリクエストに制限されています。そのため、地図地域を韓国に設定すると、APIでは韓国国外からのリクエストが自動的にブロックされます。

サービスエンドポイント

地図地域をKRに切り替えると、以下の韓国固有のサービスエンドポイントが自動的に設定されます。

各サービスエンドポイントにおける韓国の地図バージョンに含まれる具体的な機能の詳細については、該当するサービスのドキュメントを参照してください。

韓国の地域限定地図の設定と初期化

韓国のベクターマップを作成するには、次の手順を実行します。

  1. プラットフォームオブジェクトをインスタンス化し、地域プロパティをKRに設定します。
  2. ベースマップの言語を韓国語 ("ko") に設定します。

次のスニペットは、韓国固有の地図のインスタンス化に関する実例を示したものです。

const platform = new H.service.Platform({
  "apikey": "YOUR_HERE_API_KEY",
  "region": "KR"
});

const defaultLayers = platform.createDefaultLayers({ lg: "ko" });
const baseLayer = defaultLayers.vector.normal.map;

const map = new H.Map(document.getElementById("mapContainer"), baseLayer, {
  zoom: 16,
  center: { lat: 37.56, lng: 127.0 },
});

日本の地域的な考慮事項

日本の地域限定地図バージョンには、日本市場に合わせて強化された機能が備わっています。プラットフォームの地域をJPに設定すると、これらの機能が自動的に適用されます。次のような機能があります。

  • 日本の地図では、tko.normal.day.json (東京の昼間テーマ) のような日本特有の地図スタイルを使用しており、日本の地図作成の慣習がより適切に表されています。
  • マップデータには、日本特有の道路、ランドマーク、地名などが現地の基準に基づいて含まれています。
  • 日本の地図では、coreレイヤーエンドポイント (v2/vectortiles/core/mc) とtransitデータレイヤーを使用して公共交通機関の情報を充実させています。

    注

    トランジットレイヤーは、バス、電車、地下鉄、その他の公共交通機関など、地域で利用可能な公共交通システムに関する詳細な情報を提供するよう設計されています。詳細については、「HERE Vector Tile API - 開発者ガイド」の任意のコンテンツを参照してください。

さらに、H.service.Platform#createDefaultLayersメソッドで作成されたデフォルトのレイヤーはすべて、デフォルトでTKOスタイルで作成されます。

日本の地域限定地図の設定と初期化

次の手順に従って、日本のベクターマップを作成します。

  1. Platformオブジェクトをインスタンス化し、regionプロパティをJPに設定します。
  2. ベース マップの言語を日本語 ("ja") に設定します。
  3. 'public transit'スタイルの機能の'all systems'モードを有効にして、すべての日本の公共交通機関を表示します。
const platform = new H.service.Platform({
  "apikey": "{YOUR_API_KEY}",
  "region": "JP"
});

const defaultLayers = platform.createDefaultLayers({ lg: "ja" });

// Set feature/mode to show PT in Japan
const onChangeHandler = (event) => {
  if (event.target.getState() === H.map.render.Style.State.READY) {
      tkoNormalDayStyle.removeEventListener("change", onChangeHandler);
      const features = tkoNormalDayStyle.getEnabledFeatures();
      features.find((f) => f.feature === "public transit").mode = "all systems";
      tkoNormalDayStyle.setEnabledFeatures([...features]);
  }
}
const baseLayer = defaultLayers.vector.normal.map;
const tkoNormalDayStyle = baseLayer.getProvider().getStyle();
tkoNormalDayStyle.addEventListener("change", onChangeHandler);

const map = new H.Map(document.getElementById("mapContainer"), baseLayer, {
  zoom: 16,
  center: { lat: 35.68026, lng: 139.76744 },
});

この結果、次の非インタラクティブ地図が作成されます。

日本の東京エリアを示す基本地図

基本的な地図インタラクションを有効化する

地図にインタラクティブな動作を追加し、次のコードスニペットを含めることで、ブラウザーウィンドウで動的にサイズが変更されるようにします。

// Implement default interactions for pan/zoom (also on mobile touch environments)
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Enable dynamic resizing of the map, based on the current size of the enclosing container
window.addEventListener("resize", () => map.getViewPort().resize());

地図上でスクロール、パン、ズームができるようになりました。

次の図は、このチュートリアルに従って作成された、日本ユーザー向けにカスタマイズされたインタラクティブ地図を示しています。

日本の東京エリアを示すインタラクティブ地図

次のステップ

  • HERE Maps API for JavaScriptの機能の詳細については、「APIリファレンス」を参照してください。
  • HERE Vector Tile APIの詳細については、対応するマニュアルセットを参照してください。

14 日前の更新