HERE Maps API for Javascriptを使用してラスターマップをレンダリングする

HERE Maps API for JavaScript は、開発者が HERE のマッピングフィーチャーをウェブアプリケーションに統合することを可能にする堅牢なライブラリです。クライアントサイドのフレームワークとして機能し、HERE Raster Tile API のようなサービスを使ってインタラクティブなマップを表示します。

ラスターマップの最も説得力のあるユースケースの 1 つは、衛星画像を介して地形、植生、都市部などの地理的特徴を非常に詳細に視覚的に表現できることです。ラスターマップは道路、ランドマーク、境界などの情報を含むベクターデータと組み合わせて、周囲の包括的なビューを提供します。

次の例が示すように、HERE Maps API for JavaScriptでは、ハイブリッドレイヤーを使用して、HERE Raster Tile APIによって提供される衛星画像とベクターデータを組み合わせ、視覚的に魅力のある情報量の多い地図を作成できます。

前提条件

HERE API キーを取得する：まだアカウントをお持ちでない場合は、HERE プラットフォームアカウントにサインアップして API キーを生成します。詳細については「IDとアクセス管理の開発者ガイド」を参照してください。

HTML 構造を設定する

マップオブジェクトを含む新しいHTMLファイルを作成します。<head>要素内にネストされた<script>オブジェクトは、HEREから必要なJavaScriptライブラリをインポートします。

<!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>
    <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js" ></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
  </head>
  <body>
    <div style="width: 1000px; height: 500px" id="mapContainer"></div>
    <script>
    // JavaScript code for initializing the map goes here
    </script>
  </body>
</html>

JavaScriptを使用して地図を初期化する

<body> セクションの <script> タグ内に、マップを初期化する JavaScript コードを追加します。次のコードは、ハイブリッドマップレイヤーを使用して、HERE のラスター衛星画像とベクターデータを組み合わせ、マップ上に情報吹き出しマーカーを配置します。

// Initiate and authenticate your connection to the HERE platform:
const platform = new H.service.Platform({
    'apikey': 'YOUR_HERE_API_KEY'
});

// Obtain the default map types from the platform object:
const defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map:
const map = new H.Map(
    document.getElementById("mapContainer"),
    defaultLayers.hybrid.day.raster, {
        zoom: 14,
        pixelRatio: 2,
        center: {
                lat: 45.5048,
                lng: -73.5870
            }
    });

map.addLayer(defaultLayers.hybrid.day.vector);

// MapEvents enables the event system.
// The behavior variable implements 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 cntainer
window.addEventListener('resize', () => map.getViewPort().resize());

// Create the default UI:
const ui = H.ui.UI.createDefault(map, defaultLayers)

// Create an info bubble with the HTML content
const coords = { lat: 45.5048, lng: -73.5870 };
const infoBubble = new H.ui.InfoBubble(coords, {
    content: '<b>Mount Royal</b><br>A hill in Montreal with stunning city views'
});

ui.addBubble(infoBubble);

上記のコードスニペットでは、次のようになります。

platform変数は、HERE APIキーを使用してHEREプラットフォームへの接続を初期化および認証します。
createDefaultLayers関数が呼び出され、platformオブジェクトからデフォルトのマップレイヤーを取得します。
H.Map オブジェクトは、ID mapContainer の要素内にマップを作成して表示します。このマップは、hybrid.day.raster と呼ばれる衛星ラスターマップレイヤーをベースレイヤーとして使用し、衛星画像を提供しています。マップの中心座標はカナダのモントリオールの Mount Royal に設定され、初期ズームレベルは 14 に設定されています。
map.addLayer メソッドは、ラスターレイヤーの上にベクターレイヤーを追加します。
H.mapevents.Behavior クラスは、パンやズームなどのデフォルトのマップ操作を有効にします。
ブラウザーウィンドウのサイズを変更すると、マップのサイズを動的に変更するイベントリスナーが設定されます。
H.ui.UI.createDefault メソッドは、ズームコントロール、マップタイプコントロールなどのデフォルトのユーザーインターフェースコンポーネントをマップに追加します。
infoBubble 変数は、Mount Royal の座標に情報吹き出しを作成します。

ブラウザーウィンドウにマップを表示する

この HTML と JavaScript の設定を使用するには、HTML ファイルを保存してウェブブラウザーで開きます。ブラウザーには、指定された座標を中心としたインタラクティブマップが表示されます。このマップは、衛星画像形式のラスタータイルレイヤーとベクターデータが組み合わされており、カスタムの情報吹き出しも表示されます。次の図のようになります。

📘
次の例に示すように、デフォルトのUI要素は、ズームレベルを制御するための追加手段、マップビューを切り替えるオプション、現在の交通状況や進行中のインシデントを表示するオプションを利用可能にすることにより、地図で別レベルのインタラクティブ性を提供します。

次のステップ

HERE Maps API for JavaScriptの詳細については、対応する「開発者ガイド」を参照してください。
HERE Maps API for JavaScriptのラスターマップの詳細については、「マップタイプについて理解する」を参照してください。
HERE Rater Tile APIのエンドポイントとパラメーターの詳細については、対応する「APIリファレンス」を参照してください。

前提条件

HTML 構造を設定する

JavaScriptを使用して地図を初期化する

ブラウザー ウィンドウにマップを表示する

次のステップ

ブラウザーウィンドウにマップを表示する