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

リアルタイムの交通データを表示する

 HERE Maps API for JavaScript version 3.2

HERE Maps API for Javascriptの交通コンポーネントを使用して、リアルタイムの交通量と交通事案データをマップアプリにシームレスに統合できます。提供されている交通オーバーレイを使用し、目的地の現在の交通状況を常に把握できるインタラクティブマップを作成できます。

次の例では、HERE Maps API for Javascriptでドイツのベルリンを中心としたマップに交通データを表示する方法を示します。

交通量データが表示されたマップ

前の例に示すように、HERE Maps API for Javascriptでは次のように道路渋滞レベルに応じて色分けを使用します。

  • 緑：交通の流れがスムーズな道路
  • オレンジ：少し渋滞している道路
  • 赤：渋滞している道路

交通量に加えて、APIではさまざまなタイプの交通事案に関する交通事案データも、マップに事前設定されたマーカーの形式で提供します。

交通データを表示するために、APIではHERE Traffic Vector Tile APIを使用して最新の交通情報をマップタイルに提供します。

交通オーバーレイは、H.service.PlatformインスタンスのcreateDefaultLayers()メソッドによって提供されるデフォルトのレイヤーコレクションに自動的に統合されます。

デフォルトのUIコントロールを使用して交通データを切り替える

APIには、交通渋滞とインシデントデータの切り替え機能があります。これらはMapSettingsControlクラスを通じてデフォルトのユーザーインターフェースに統合されています。このUI要素により、マッピングアプリ内で追加のマップビューを迅速かつシームレスに統合できます。

MapSettingsControlに交通関連の情報を表示または非表示にするオプションを組み込むことで、ユーザーの好みや多様なニーズに合わせて、よりパーソナライズされ、整理された応答性の高いサービスを提供できます。

  1. 次の例に示すように、HTMLファイルの<head>オブジェクト内にHERE Maps API for 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"
        src="https://js.api.here.com/v3/3.2/mapsjs-ui.js" ></script>
  </head>
  <body>
    <div id="mapContainer"></div>
    <script>
       // Your HERE Maps API for JavaScript code goes here 
    </script>
  </body>
</html>
/>

  2. HTMLファイルの<script>オブジェクト内で、次の例に示すように、H.ui.UI.createDefault()メソッドを使用して交通データと交通障害を表示するためのコントロールを含む、デフォルトのUIコントロールを作成してマップに追加します。

    const platform = new H.service.Platform({
    apikey: 'YOUR_HERE_API_KEY'
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map, {
        zoom: 10,
        center: {
            lat: 52.5,
            lng: 13.4
        }
    });

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

window.addEventListener('resize', () => map.getViewPort().resize());

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

結果：次の例に示すように、ユーザーは交通データを表示または非表示にできるようになります。

MapSettingsControlを使用した交通データの切り替え

交通レイヤーテーマをカスタマイズする

たとえば、「夜間」ビューを含むカスタムマップを作成する場合、デフォルトUIを使用してレンダリングされた対応する交通ビューに、ベースマップレイヤーとの互換性があることを確認する必要があります。

この互換性を実現するには、MapSettingsControlをカスタマイズする必要があります。次の例では、ベースレイヤーと互換性のある夜間の交通テーマを指定して、コントロールをカスタマイズする方法を示します。

// Setup Map Settings and other UI controls
const ui = new H.ui.UI(map)
const mapSettingsControl = new H.ui.MapSettingsControl({
    'baseLayers': [{
        'label': 'Map',
        'layer': defaultLayers.vector.normal.litenight
    }],
    'layers': [{
        'label': 'Night Traffic Theme',
        'layer': [defaultLayers.vector.traffic.litenight]
    }],
    'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
});
const scalebarControl = new H.ui.ScaleBar({
    'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
});
const zoomControl = new H.ui.ZoomControl({
    'alignment': H.ui.LayoutAlignment.RIGHT_BOTTOM
});
ui.addControl('mapsettings', mapSettingsControl);
ui.addControl('zoom', zoomControl);
ui.addControl('scalebar', scalebarControl);

次に、結果として表示されるマップの例を示します。

交通コントロールがカスタマイズされたマップ

マップに交通オーバーレイをプログラムでレンダリングする

デフォルトのユーザーインターフェースオプションを使用するのではなく、プログラムで交通オーバーレイをレンダリングする場合は、addLayerメソッドを使用してマップのベースレイヤーと互換性のある交通レイヤーをオーバーレイできます。たとえば、前の例のようにベースレイヤーがvector.normal.mapに設定されている場合、ユーザーエクスペリエンスが一貫するようにvector.traffic.mapレイヤーを使用します。

これを行うには、デフォルトレイヤーのコレクションから目的の交通オーバーレイを取得し、次の例に示すようにレイヤーをマップに追加します。

map.addLayer(defaultLayers.vector.traffic.map);

次の例は、以下のレイヤーの組み合わせを示しています。

  • ベースレイヤー：vector.normal.litenight
  • 交通レイヤー：vector.traffic.litenight
互換性のある交通レイヤーと組み合わせたベースマップレイヤー

交通レイヤーの更新間隔をカスタマイズする

マップにリアルタイムの交通データを表示するだけでなく、HERE Maps API for Javascriptでは交通レイヤーの更新間隔を定義できます。アプリのニーズに基づいてこの間隔を定義でき、ユーザーは、ユースケースに適した頻度で最新の交通情報を得ることができます。

交通レイヤーの更新間隔をカスタマイズするには、次の例に示すようにカスタム関数を作成し、ニーズに応じて refreshInterval 変数を調整します。間隔はミリ秒単位で指定します。たとえば、1分 (60秒) ごとに交通レイヤーを更新するには、間隔を60 * 1000に設定します。

// Function to update traffic layer
function updateTrafficLayer() {
  // Get the provider instance from the layer
  const provider = defaultLayers.vector.traffic.map.getProvider();
  // Invalidate provider's data and force reload
  provider.reload(true);
}

// Refresh traffic layer every 1 minute (60 seconds)
const refreshInterval = 60 * 1000; // 60 seconds in milliseconds
setInterval(updateTrafficLayer, refreshInterval);

次のステップ

14 日前の更新