機能とモードを通じて地図表示をカスタマイズする

HERE Maps API for Javascriptでは、フィーチャーとモードは、スタイル設定で定義された特定のマップオブジェクトや要素を表示または非表示にすることを可能にし、地図の表示と動作を動的にカスタマイズおよび制御する便利な方法を提供します。

フィーチャー：表示または非表示にできる特定のマップオブジェクトまたは要素を指します。次に例を示します。
- building extruded：高さ情報を持つ建物の3D表現。
- public transit：バス、電車などのルートと停留所。
- environmental zones：排出ガスを抑制し、汚染を減らすための交通規制エリア。
- road exit labels：道路 (通常はハイウェイ) の出口を示すラベル。
モード：フィーチャーの表示方法を定義します。モードは、フィーチャーのさまざまな詳細レベルや相互作用を指定できます。一部のモード値は、特定のフィーチャーでのみ利用可能です。モードの例を次に示します。
- all：フィーチャーを詳細に表示します。
- none：フィーチャーを完全に非表示にします。
- numbers only：道路出口ラベルを数字で表示します (road exit labelsフィーチャーで利用可能)。

フィーチャーとモードのリストを取得する

サポートされているフィーチャーとそのモードのリストは、次のコードスニペットに示すように、マップスタイルのfeaturesプロパティから取得できます。

// Retrieve the map style:
style = map.getBaseLayer().getProvider().getStyle();
// Get the configuration object of the style and
// access the list of supported features:
configFeatures = style.getConfig().features;

次の図は、前の例のコードの出力をWebブラウザーウィンドウのコンテキストで示しており、フィーチャー、各フィーチャーに対応するモード、デフォルトモードが一覧表示されています。

前の例では、environmental zonesフィーチャーを強調表示しています。このフィーチャーのデフォルトモードはnoneであり、地図上では環境ゾーンが非表示になります。modesオブジェクトが示すように、このフィーチャーには追加でallモードが利用可能であり、これにより地図上に環境ゾーンを表示できます。

実行時にフィーチャーモードを切り替える

フィーチャーモードを変更して地図の外観を動的に変更する (たとえば、環境ゾーンの表示を有効にする) には、次の例に示すように、styleオブジェクトのsetEnabledFeaturesメソッドを使用します。

style.setEnabledFeatures([
  { feature: '<feature_name_1>', mode: '<mode>' },
  { feature: '<feature_name_2>', mode: '<mode>' }
])

setEnabledFeaturesメソッドは、featureとmodeのキーと値のペアで構成されるオブジェクトの配列を受け取ります。

複数のフィーチャーオブジェクトを同時に設定することもできます。

このメソッドを呼び出す時点で、地図設定が読み込まれている必要があることに注意してください。

たとえば、次のコードスニペットは、設定が読み込まれた後に、ハイウェイ出口のラベルを数字のみに設定し、公共交通機関のレーンの表示を有効にします。

const style = map.getBaseLayer().getProvider().getStyle();
const onChangeHandler = (event) => {
  if (event.target.getState() === H.map.render.Style.State.READY) {
    style.removeEventListener('change', onChangeHandler); // Otherwise loops infinitely.
    map.getBaseLayer().getProvider().getStyle().setEnabledFeatures([
      { feature: 'road exit labels', mode: 'numbers only' },
      { feature: 'public transit', mode: 'all systems' }
    ]);
  }
}

style.addEventListener('change', onChangeHandler)

詳細については、APIリファレンスのH.map.render.harp.styleクラスのsetEnabledFeaturesメソッドに関するセクションを参照してください。

例：フィーチャーとモードを利用した動的な地図のカスタマイズ

ユーザーが地図の外観を動的に調整できるようにすることで、操作性と使いやすさを向上させ、マッピングアプリケーションをより直感的で使いやすいものにします。

このチュートリアルの例では、地図上で環境ゾーンのフィーチャーを非表示または表示するボタンを実装する方法を示します。

📘
注
次のセクションでは、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基盤として、コードを追加する方法を説明します。

環境ゾーン表示の切り替えを有効にする

environmental zonesフィーチャーモードを動的に切り替えるボタンを追加して、基本的な地図機能を拡張します。

HTMLファイルの<body>タグ内に、次の<button>要素を追加します。

<button id="toggleEnvZones" style="position:absolute; top:10px; left:10px;">Enable Environmental Zones</button>

次の例に示すように、environmental zonesフィーチャーを切り替える関数を追加します。

// Toggle environmental zones feature:
document.getElementById("toggleEnvZones").addEventListener("click", function () {
    const style = map.getBaseLayer().getProvider().getStyle();

    // Feature and mode to enable:
    const feature = 'environmental zones';
    const mode = 'all';

    // Get the list of currently enabled features:
    const enabledFeatures = style.getEnabledFeatures();

    // Find 'environmental zones' in the list of already enabled features:
    const featureIndex = enabledFeatures.findIndex(el => el.feature === feature);

    if (featureIndex === -1) {
        // If the feature is disabled, add it to the list of enabled features:
        enabledFeatures.splice(featureIndex, 0, { feature, mode });
        this.textContent = "Disable Environmental Zones";
    } else {
        // If the feature is enabled, remove it from the list:
        enabledFeatures.splice(featureIndex, 1);
        this.textContent = "Enable Environmental Zones";
    }
    style.setEnabledFeatures(enabledFeatures);
});

編集内容を保存し、WebブラウザーでHTMLファイルを開きます。次の図は、環境ゾーンの表示を切り替えるボタンが追加された地図の例を示しています。

次の呼び出しを使用することで、地図フィーチャーの表示をさらに細かく制御できます。

style.setEnabledFeatures()：すべてのフィーチャーのデフォルトのモード値を復元します。
style.setEnabledFeatures([])：すべてのフィーチャーを無効にします。たとえば、これにより、building extruded、building footprint、road exit labelsなどのフィーチャーのモードがすべてnoneに設定されます。
style.getEnabledFeatures()：前回のstyle.setEnabledFeatures()呼び出し以降に変更されたフィーチャーモードを返します。詳細については、APIリファレンスのgetEnabledFeaturesメソッドに関するセクションを参照してください。

たとえば、road exit labelsおよびpublic transitフィーチャーを変更した後の、この呼び出しの出力例をブラウザーウィンドウのコンソールで確認します。

次のステップ

HERE Maps API for Javascriptの設計とフィーチャーの詳細については、「APIリファレンス」を参照してください。