特定の位置にヒートマップを表示する

HERE Maps API for JavaScriptのヒートマップは、値を色で表現することでデータを視覚的に示す機能です。ヒートマップは、特定の地理的領域におけるイベントや量の密度や強度を表示するために使用され、マップ全体のパターンや傾向を視覚化できます。一般的には、交通量の多いエリアや人口密度、その他地理的に表現可能な指標などを表示するなど、分析目的で地図上にデータを重ねて表示する際に利用されます。

このチュートリアルでは、HERE Maps API for JavaScriptで簡単なヒートマップを使用する方法を、次の3つの手順で説明します。

ベースマップを作成する
デフォルトのUIコントロールをマップに追加する
マップにヒートマップレイヤーを追加する

開始する前に

API キーを入手する：まだアカウントをお持ちでない場合は、HEREプラットフォームアカウントにサインアップしてAPIキーを生成します。詳細については、「HERE Maps API for Javascriptの使用を開始する」を参照してください。

ベースマップを作成する

HTMLコンテナを作成し、HEREマップをレンダリングするためのJavaScriptコードを追加します。

空の HTML ファイルを作成します。

次の例に示すように、HTMLファイルの<head>要素にライブラリへの参照を含めます。

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://js.api.here.com/v3/3.2/mapsjs-ui.css"
    />
    <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-ui.js"
    ></script>
    <script
      type="text/javascript"
      src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"
    ></script>
    <script
      type="text/javascript"
      src="https://js.api.here.com/v3/3.2/mapsjs-data.js"
    ></script>
  </head>

  <body></body>
</html>

<head>要素内に、bodyおよびmap要素の幅、高さ、位置を設定する<style>要素を追加します。
```
<style>
body {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
    background: grey;
}

</style>
```
📘
注
これらのスタイル設定では、ブラウザーウィンドウの幅と高さ全体を占めるようにマップを設定します。
HTMLファイルの<body>要素内に、mapのIDを持つ<div>要素を含めます。ここにマップが表示されます。例：
```
<div id="map"></div>
```

<body>要素内と<script>タグ内に、次のコードスニペットを使用して、デフォルトのレイヤーを含むベースマップを作成します。

// Initiate and authenticate your connection to the HERE platform
const platform = new H.service.Platform({
    'apikey': 'your 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("map"),
    // Center the map on Europe, with the zoom level of 5
    defaultLayers.vector.normal.map, {
        zoom: 5,
        center: {
            lat: 50,
            lng: 12
        }
    });

// 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 container
window.addEventListener('resize', () => map.getViewPort().resize());

apikey変数の値を個人用のAPIキーに置き換えます。

デフォルトのUIコントロールをマップに追加する

Maps API for JavascriptのデフォルトのUIコントロールは、開発時間を短縮し、使いやすさを向上させ、カスタマイズオプションを提供することで、より効率的でユーザーフレンドリーなマッピングアプリを実現します。デフォルトのUIコントロールを使用するには、地図のインスタンス化後にJavaScriptに次のコードスニペットを追加します。

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

UIコントロールの詳細については、「マップコントロールとUIでマップをカスタマイズする」を参照してください。結果：HTMLファイルでは、次の例に示すように、ヨーロッパを中心とした基本的な地図が表示されます。ヨーロッパを中心としたベースマップ

マップにヒートマップレイヤーを追加する

ヒートマップを地図に追加するには、次の項目をコーディングする必要があります。

H.data.heatmap.Providerクラスのプロバイダー
ヒートマップのデータ
ヒートマッププロバイダーのマップレイヤー

次のコードスニペットをJavaScriptに追加して、これらの項目を追加します。

// Create a provider for a semi-transparent heat map
const heatmapProvider = new H.data.heatmap.Provider({
  colors: new H.data.heatmap.Colors(
    {
      0: "blue",
      0.5: "red",
      1: "yellow",
    },
    true
  ),
  opacity: 0.9,
  // Paint assumed values in regions where no data is available
  assumeValues: false,
});

// Add the data:
heatmapProvider.addData([
  { lat: 59.911491, lng: 10.757933, value: 5 }, // Oslo
  { lat: 59.8909, lng: 10.5278, value: 1 }, // Sandvika
  { lat: 59.9245, lng: 10.954, value: 3 }, // Lorenskog
]);

// Add a layer for the heatmap provider to the map
map.addLayer(new H.map.layer.TileLayer(heatmapProvider));

// Move the map to Oslo, Norway
map.setCenter({ lat: 59.911491, lng: 10.757933 });
map.setZoom(11);

HERE Maps API for JavaScriptのH.data.heatmap.Colorsクラスにより、ヒートマップの色をカスタマイズできます。正規化されたヒート値 (0から1までの範囲) に関連付けられた色を、stopsプロパティを使用して定義します。このプロパティは、これらの値をCSS構文で定義できる特定の色にマッピングします。必要に応じて、opt_interpolateブール型を使用して色補間を有効にして、色間の滑らかな遷移を実現します。opt_interpolateがfalseに設定されている場合、ヒートマップはポスタリゼーション効果が適用されます。構文が間違っているかstopsオブジェクトが空の場合、H.lang.InvalidArgumentErrorがスローされます。詳細については、「Colorsクラス」を参照してください。

assumeValuesプロパティは必要に応じて設定可能なブール型のオプションであり、trueに設定すると、データが存在しない領域にも仮定の値を使ってヒートマップを描画できるようになります。これは、小規模なデータセットから生成された値マップに有効です。利用可能なデータが存在しないタイルに対しても、データセットから算出された平均値でヒートマップを塗りつぶすことができます。assumeValuesのデフォルト値はfalseです。結果：HTMLファイルには、次の例に示すように、ノルウェーの3つの都市に焦点を当てたヒートマップが表示されます。

次のステップ

ヒートマップの詳細については、「APIリファレンス」を参照してください。
Maps API for JavaScriptのより実用的な適用については、このガイドのTutorialsセクションを参照してください。