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

日本のデータを含む地図を表示する

 HERE Maps API for JavaScript version 3.2

このセクションでは、HERE Maps API for JavascriptをHERE Vector Tile APIと組み合わせて使用し、対応する地図スタイルで日本固有のデータを表示する方法について説明します。

前提条件

HEREアカウントに登録します。詳細については、「利用開始」を参照してください。

チュートリアルの目的

このチュートリアルを行うと、次のタスクを達成できます。

  1. HERE Maps API for JavaScriptを設定し、Vector Tile APIの"core"レイヤーを呼び出します。
  2. 日本のデータに最も適したマップスタイルを取得します。

APIコードライブラリを読み込む

次のスニペットは、必要なcore、serviceモジュールを読み込む<head>要素とともに、完全なHTMLコードを提供します。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
  </head>
  <body>
    <div style="width: 1000px; height: 480px" id="mapContainer"></div>
    <script>
    <!-- Your JavaScript code goes here -->
    </script>
  </body>
</html>

バックエンドサービスとの通信を初期化する

HTMLファイルの<script>要素内で、次の例に示すように、HERE APIキーを渡してPlatformオブジェクトを初期化します。

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

地図の設定を行う

次の手順に従って、日本のベクターマップをインスタンス化します。

  1. OMVサービスを設定し、coreエンドポイントからベクタータイルにアクセスできるようにします。

  2. 東京の昼間テーマ (tko.normal.day) を使用し、日本向けの地図スタイルを設定します。

  3. 設定されたサービスと日本固有のスタイルに基づいてベクタータイルを管理するプロバイダーを作成します。

  4. 地図の言語を日本語 ("ja") に設定します。

  5. プロバイダーを使用してタイルレイヤーを作成します。

  6. 'public transit'スタイルの機能の'all systems'モードを有効にして、すべての日本の公共交通機関を表示します。

    📘

    注

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

たとえば次のスニペットを参照してください。

// Configure an OMV service to use the `core` endpoint
const service = platform.getOMVService({
  path: "v2/vectortiles/core/mc",
  // Request the transit vector layer
  queryParams: {
    content: "default,transit",
  },
});
const baseUrl = `https://js.api.here.com/v3/3.2/styles/harp/oslo`;
const style = new H.map.render.harp.Style(`${baseUrl}/tko.normal.day.json`);
const provider = new H.service.omv.Provider(service, style, {
  lg: "ja",
});
const layer = new H.map.layer.TileLayer(provider, { max: 22 });

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

マップを初期化する

次の設定を指定して、H.Mapオブジェクトをインスタンス化します。

  • マップコンテナ要素
  • 前のセクションで作成したレイヤー
  • 地図を表示するズームレベル
  • 地図の中心となるポイントの地理座標

たとえば次のスニペットを参照してください。

const map = new H.Map(document.getElementById("mapContainer"), layer, {
  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 日前の更新