マップコントロールとUIでマップをカスタマイズする

HERE Maps API for JavascriptのUIコントロールは、ユーザー操作性を向上させ、マッピングアプリをユーザーにより使いやすいものにします。これらのコントロールにより、使いやすさが向上し、重要なマップ情報が提供されます。これらのコントロールを活用することで、特定の要件に合わせてカスタマイズされた魅力的なマッピングアプリを作成できます。

HERE Maps API for Javascriptには、mapsjs-ui.jsというUIモジュールが含まれており、アプリにすばやく統合できる構築済みのマップコントロールのコレクションを提供します。デフォルトのUIコントロールには、次のコンポーネントが含まれます。

MapSettingsControl - マップビューとサテライトビューを切り替えることができ、多岐にわたるユースケースや設定に対応します。さらに、このコンポーネントは、交通量、交通障害、渋滞などのリアルタイムの交通情報をマップに提供し、ユーザーは移動中に情報に基づいた意思決定を行うことができます。
ZoomControl - マップの拡大/縮小が可能で、マップのズームレベルを簡単に制御できます。
Scalebar - マップの縮尺をグラフィカルに表示して、マップの相対的なサイズと距離を理解しやすくします。

UIモジュールは、デフォルトのUIコントロールに加えて、マッピングアプリの機能とユーザーエクスペリエンスをさらに強化する複数の追加UIコントロールの作成をサポートします。これらのコンポーネントには、以下が含まれます。

DistanceMeasurement - マップのポイント間の距離を測定できるため、異なる場所の間の長さやルートを容易に理解できます。
ZoomRectangle - マップに長方形の領域を定義し、その特定の領域を拡大して、関心のある領域をより詳細に表示できます。
InfoBubble - 情報吹き出しの作成をサポートします。これは、マップに追加情報やコンテキスト固有の詳細を表示する双方向的なポップアップです。情報吹き出しは、特定のマップ要素の関連データやアクションを表示するようにカスタマイズできます。
Overview - 小さなプレビューマップを表示し、メインマップの現在のビューポートを強調表示します。

次のセクションでは、さまざまなタイプのUIコントロールを組み込むことで、マッピングアプリの機能を強化する方法について説明します。

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

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

デフォルトのUI要素の表示を有効にするには、次のタグをHTMLファイルの<head>要素に追加し、HERE Maps API for Javascript UIモジュールと対応するCSSスタイルへのリンクを読み込みます。
```
<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" />
```
マップをインスタンス化するコードの後に次のスニペットを追加して、マップレンダリング用のJavaScriptコードを変更します。
```
// Create the default UI:
const ui = H.ui.UI.createDefault(map, defaultLayers);
```

結果：マップにデフォルトのコントロールが表示されます。+および-ボタンを使用して、マップのズームを制御できます。マップセレクターを使用して、マップスタイルを変更したり、交通状況や交通障害などの追加データを表示したりします。最後に、スケールバーを使用すると、現在のズームレベルに対する距離とサイズを把握できます。

次の図は、マップ上のデフォルトのスケールバー、ズームコントロール、およびマップコントロールツールを強調表示しています。デフォルトのUIコントロール

📘
注
デフォルトのUI要素を含む完全な作業例については、「HERE Maps API for Javascriptの使用を開始する」を参照してください。次のセクションでは、この例を基盤として、コードの追加方法を説明します。

デフォルトのUIコントロールをカスタマイズする

HERE Maps API for JavascriptでデフォルトのUIコントロールをカスタマイズすると、特定のアプリのニーズやブランディングに合わせて、ユーザーインターフェースを調整できます。

UI言語を変更する

API は、UI コントロールのローカリゼーションサポートを提供し、ユーザー設定やアプリ要件に基づいてさまざまな言語で UI コントロールを表示できます。

この UI モジュールには、次の言語のローカライズ版が付属しています。

en-US - 英語 (米国)
de-DE - ドイツ語
es-ES - スペイン語
fi-FI - フィンランド語
fr-FR - フランス語
it-IT - イタリア語
nl-NL - オランダ語
pl-PL - ポーランド語
pt-BR - ポルトガル語 (ブラジル)
pt-PT - ポルトガル語 (ポルトガル)
ru-RU - ロシア語
tr-TR - トルコ語
zh-CN - 中国語 (中国)

デフォルトの UI コントロールの言語を変更するには、デフォルトの UI コントロールの作成時に対応する言語コードを使用します。次に、言語をスペイン語に変更する例を示します。

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

結果：次の図に示すように、UI コントロールの言語が設定に応じて変更されます。ローカライズされたUI コントロール

UI コントロールの位置を管理する

API には、マップの UI コントロールの配置と位置を制御するメソッドが用意されています。

H.ui.UI クラスで定義されている getControl() メソッドを呼び出すことで、各コントロールを個別に操作できます。操作するコントロールを識別するには、対応するコントロール名を使用します。

MapSettingsControl の場合 'mapsettings'
ZoomControl の場合 'zoom'
ScaleBar の場合 'scalebar'

コントロールの位置を管理するには、まずターゲットコントロールにアクセスする必要があります。たとえば、次のパターンを使用できます。

// Ensure that you access the control after you initialized the UI
const ui = H.ui.UI.createDefault(map, defaultLayers);
const control = ui.getControl('controlName'); // Replace 'controlName' with the name of the control you want to manage, for example, 'mapsettings.'

次のセクションでは、必要に応じてマップのコントロールの位置を操作する方法の例を示します。

UI コントロールの配置を設定する

次の例に示すように、マップのコントロールの配置を調整するには、setAlignment() メソッドを使用します。

const mapSettingsControl = ui.getControl('mapsettings');
mapSettingsControl.setAlignment('top-left');

結果：次の例に示すように、コントロールの位置は入力に応じて変化し、マップ設定コントロールはマップの左上隅に配置されます。 UIコントロールのカスタム配置その他の配置オプションについては、「API リファレンス」の setAlignment() メソッドのドキュメントを参照してください。

UI コントロールを非表示または表示する

ユースケースに応じて、UI コントロールを動的に非表示にしたり表示したりできます。次の例は、ZoomControl を非表示にする方法を示しています。

const zoomControl = ui.getControl('zoom');
zoomControl.setVisibility(false);

結果：次の図に示すように、ZoomControl が非表示になりました。マップビューから削除された UI コントロール詳細については、「API リファレンス」の setVisibility() メソッドのドキュメントを参照してください。

UI コントロールを無効にする

コントロールを無効にすると、コントロールは視覚的にグレー表示され、ユーザーが操作できなくなります。UI コントロールを無効にすると、通常、関連する機能が現在使用できないか、現在のコンテキストでは適用できないことを示します。

次の例は、ZoomControl を無効にする方法を示しています。

const zoomControl = ui.getControl('zoom');
zoomControl.setDisabled(true);

結果：次の例に示すように、マップには ZoomControl が表示されますが、コントロールは双方向的ではありません。

無効な UI コントロール詳細については、「API リファレンス」の setDisabled() メソッドのドキュメントを参照してください。

概要マップコントロールを追加する

HERE Maps API for JavascriptのOverviewコントロールには、マップの縮小表示が表示されます。

デフォルトでは、概要マップには現在のビューポートの小さいバージョンが表示されます。たとえば、概要マップをビジネスユースケースに合わせて調整するには、ズームレベルと概要マップのサイズを調整してこの動作を変更することで、より広い領域を表示できます。より広い領域を表示することで、ユーザーは周辺エリアをよりよく理解し、マップ内をより効果的にナビゲートできます。

次のコードスニペットは、Overview コントロールを追加する方法の例を示しています。

// Create a map layer for the overview control
const overviewLayers = platform.createDefaultLayers();
// Instantiate the overview map by using the H.ui.Overview constructor
const overviewMap = new H.ui.Overview(overviewLayers.vector.normal.map, {
    //Set the control position and the map size and zoom parameters with respect to the map's viewport
    alignment: H.ui.LayoutAlignment.LEFT_BOTTOM,
    zoomDelta: 6,
    scaleX: 5,
    scaleY: 6
});
// Add the control to the map
ui.addControl('overview', overviewMap);

結果：マップにOverviewコントロールが表示されます。このコントロールを操作すると、次の図に示すような小さな概要マップが表示されます。概要UIコントロールが有効詳細については、「API リファレンス」の H.ui.Overview クラスのドキュメントを参照してください。

情報吹き出しを追加する

情報吹き出しは、特定のマップの場所またはオブジェクトに関する追加情報を提供するのに役立ちます。場所の名前、住所、連絡先情報、またはマップフィーチャーに関するその他の関連情報などの詳細の表示に使用できます。ユーザーは情報吹き出しを操作して情報を表示し、不要になったら閉じることができます。

次の例は、ベルリンのランドマークに情報吹き出しを追加する方法を示しています。

// Create the variable with coordinates for the Tegel Airport
const airportCoordinates = {
    lat: 52.554429,
    lng: 13.290309
};

// Create the HTML content for the info bubble
const content = '<div>' +
    '<h4>Tegel Airport</h4>' +
    '<p>Learn more on <a href="http://en.wikipedia.org/wiki/Berlin-Tegel_International_Airport" target="_blank">Wikipedia</a>.</p>' +
    '</div>';

// Create an info bubble at the Spire of Dublin location with the HTML content
const infoBubble = new H.ui.InfoBubble(airportCoordinates, {
    content
});

// Add the info bubble to the UI
ui.addBubble(infoBubble);

結果：次の例に示すように、マップの指定された座標に情報吹き出しが表示されます。詳細については、「API リファレンス」の H.ui.InfoBubble クラスのドキュメントを参照してください。

ズーム長方形コントロールを追加する

ZoomRectangle を使用すると、長方形を描画してマップの領域を定義し、マップをその領域に自動的にズームさせることができます。

大きなマップを探索する場合、ズーム長方形を使用すると、ズームレベルを手動で調整したりマップをパンしたりすることなく、関心のある領域の正確な境界を定義し、その特定の領域にすばやくズームインして焦点を合わせることができます。

次のコードスニペットは、Zoomrectangle コントロールをマップに追加する方法を示しています。

const zoomRectangle = new H.ui.ZoomRectangle({
    // Position the control on the map's viewport
    alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
});
ui.addControl('rectangle', zoomRectangle);

結果：次の例に示すように、ZoomRectangle コントロールを使用して、特定の関心領域を拡大表示できるようになりました。長方形のズーム詳細については、「API リファレンス」の H.ui.ZoomRectangle クラスのドキュメントを参照してください。

距離測定コントロールを追加する

DistanceMeasurement コントロールを使用すると、ユーザーは異なる場所間の距離を測定して、効果的にルートを計画できます。このコントロールは、移動距離の見積もり、最短または最も効率的な経路の特定、移動距離全体の決定に役立ちます。

次の例では、カスタム SVG マーカーアイコンを使用して距離測定コントロールを追加する方法を示します。

// Create a template for marker icons by using custom SVG style
function createMarkerIcon(color) {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
    <path d="M12 0C6.48 0 2 4.48 2 10c0 5.057 3.333 14.5 10 22 6.667-7.5 10-16.943 10-22 0-5.52-4.48-10-10-10zm0 14c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z" 
    fill="${color}" stroke="#FFFFFF"/>
  </svg>`;
}

// Define the colors for the icons
const startColor = "#00008B";
const stopoverColor = "#8AC9C9";
const splitColor = "#A2EDE7";
const endColor = "#990000";

// Create the icons with respective colors
const startIcon = new H.map.Icon(createMarkerIcon(startColor));
const stopoverIcon = new H.map.Icon(createMarkerIcon(stopoverColor));
const endIcon = new H.map.Icon(createMarkerIcon(endColor));
const splitIcon = new H.map.Icon(createMarkerIcon(splitColor));

// Create the DistanceMeasurement control
const distanceMeasurementTool = new H.ui.DistanceMeasurement({
  startIcon: startIcon,
  stopoverIcon: stopoverIcon,
  endIcon: endIcon,
  splitIcon: splitIcon,
  lineStyle: {
    strokeColor: "rgba(95, 229, 218, 0.5)",
    lineWidth: 6
  },
  alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
});

// Add the DistanceMeasurement control to the UI
ui.addControl("distancemeasurement", distanceMeasurementTool);

結果：次の例に示すように、コントロールを使用して、マップのさまざまなポイント間の距離を測定できるようになりました。距離の測定前の例に示すように、開始マーカー、終了マーカー、ストップオーバーマーカーを追加できますが、HERE Maps API for Javascriptは合計距離と各マーカー間の距離の両方を動的に計算します。さらに、以前に追加したマーカーの間に分割マーカーを追加したり、マップ上でマーカーをドラッグしてマーカーの位置を調整したりできます。

詳細については、「API リファレンス」の H.ui.DistanceMeasurement クラスのドキュメントを参照してください。

スケールバーと距離測定コントロールの単位系を変更する

異なる地域や国のユーザーは、異なる測定システムに慣れている可能性があります。このため、メートル単位とヤードポンド法を切り替えることで、より使い慣れたユーザーフレンドリーなサービスを提供できます。

デフォルトでは、HERE Maps API for Javascriptは距離とスケールの測定にメートル単位を使用します。次の例に示すように、ヤードポンド法に切り替えるには、setUnitSystem()メソッドを呼び出し、使用する測定システムに対応する値を指定します。

ui.setUnitSystem(H.ui.UnitSystem.IMPERIAL);

結果：次の例に示すように、スケールバーと距離測定コントロールは、ヤード・ポンド法の測定システムを使用するようになりました。 UI コントロールのインペリアル測定システム詳細については、「APIリファレンス」のH.ui.UnitSystemクラスのドキュメントを参照してください。

MapSettingsControlをカスタマイズする

MapSettingsControlをカスタムの要素やスタイルを持つマップに追加すると、GeoJSONなどのカスタムマップデータを使用して、さまざまなマップビューやマップレイヤーを切り替えることができます。

たとえば、衛星画像 (ラスターデータ) と道路、ランドマーク、境界などのベクター要素を組み合わせてハイブリッドビューを作成できます。この表示の組み合わせは、夜間表示用に調整できます。さらに、GeoJSONなどの追加データレイヤーを表示するなど、より多くの機能を組み込むこともできます。次の例ではそれについて焦点を当てています。

次の例に示すように、HTMLファイルの<head>要素にmapsjs-data.jsライブラリを追加します。
```
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-data.js"></script>
```

GeoJSONデータをダウンロードおよび表示する機能を定義します。

function getGeoJSONLayer () {
  // Create GeoJSON reader which will download the specified file.
  // Shape of the file was obtained by using HERE Geocoding and Search API.
  // It is possible to customize look and feel of the objects.
  const reader = new H.data.geojson.Reader('https://heremaps.github.io/maps-api-for-javascript-examples/display-geojson-on-map/data/berlin.json', {
    // This function is called each time parser detects a new map object
    style: function (mapObject) {
      // Parsed geo objects could be styled using setStyle method
      if (mapObject instanceof H.map.Polygon) {
        mapObject.setStyle({
          fillColor: 'rgba(255, 0, 0, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.2)',
          lineWidth: 3
        });
      }
    }
  });

  // Start parsing the file
  reader.parse();

  // return layer which shows GeoJSON data on the map
  return reader.getLayer();
};

新しいレイヤーをMapSettingsControlに追加します。

const mapSettingsControl = new H.ui.MapSettingsControl({
  'baseLayers': [
    {
      'label': 'Map',
      'layer': defaultLayers.vector.normal.map
    },
    {
      'label': 'Satellite',
      'layer': [defaultLayers.hybrid.day.raster, defaultLayers.hybrid.day.vector]
    }
  ],
  'layers': [
    {
      'label': 'Berlin',
      'layer': getGeoJSONLayer()
    },
  ],
  '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
});

// Create the custom UI and add the controls
const ui = new H.ui.UI(map);
ui.addControl('zoom', zoomControl);
ui.addControl('mapsettings', mapSettingsControl);
ui.addControl('scalebar', scalebarControl);

次の図は、MapSettingsControlを使用してGeoJSONレイヤーを表示できるようにした結果の地図を示しています。カスタマイズされたマップ設定のコントロール

次のステップ

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