地図コントロールと UI を使用して地図を変更します

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

Maps API for JavaScript には、と呼ばれる UI モジュールが含まれて mapsjs-ui.js います。このモジュールは、アプリケーションに迅速に統合できる、あらかじめ組み込まれたマップコントロールのコレクションを提供します。既定の UI コントロールには、次のコンポーネントが含まれています。

MapSettingsControl - マップビューと衛星ビューを切り替えることができ、多様なユースケースや好みに対応できます。さらに、このコンポーネントは、交通量、インシデント、渋滞など、地図上のリアルタイムの交通情報を提供し、ユーザーが移動中に情報に基づいて決定を下すことを可能にします。
ZoomControl - 地図のズームインおよびズームアウトをユーザーに許可し、地図のズームレベルを使い慣れた便利な方法で制御します。
Scalebar - マップの縮尺をグラフィカルに表示し、マップ上の相対的なサイズと距離をユーザーが把握できるようにします。

UI モジュールでは、既定の UI コントロールに加えて、複数の追加の UI コントロールの作成がサポートされており、これにより、マッピングアプリケーションの機能およびユーザーエクスペリエンスをさらに強化できます。これらのコンポーネントには、

DistanceMeasurement - 地図上のポイント間の距離を測定できるようにします。これにより、異なる場所間の距離やルートを簡単に把握できます。
ZoomRectangle - 地図上に長方形の領域を定義してその特定の領域をズームインし、特定の関心領域の詳細なビューを表示できます。
InfoBubble - 地図に追加情報やコンテキスト固有の詳細情報を提供する情報バブル、インタラクティブなポップアップの作成をサポートします。情報バブルをカスタマイズして、特定のマップ要素に関連するデータまたはアクションを表示できます。
Overview - メインマップの現在のビューポイントを強調表示して、小さなプレビューマップを表示します。

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

ベースマップを作成します
既定の UI コントロールをマップに追加します
既定の UI コントロールをカスタマイズします
- UI 言語を変更します
- UI コントロールの位置を管理します
概要地図コントロールを追加します
情報バブルを追加します
ズーム矩形コントロールを追加します
距離測定コントロールを追加します
スケールバーおよび距離の測定コントロールの単位系を変更します
次のステップ

ベースマップを作成します

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

HTML ファイル内で <head> 、次の例に示すように、要素が必要なライブラリコンポーネントを参照していることを確認します。

 <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
 <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
 <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

HTML <head> 要素内で、 <style> マップコンテナの CSS スタイル定義を使用してタグを追加します。たとえば、次の基本的なスタイルを使用して、マップビューポイントを囲むコンテナの高さと幅の 100% に設定できます。
```
body {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    height: 100%;
}
```
<body> 要素内に、 <div id="map"></div> マップオブジェクトのコンターを追加します。

<body> 要素および内部 <script> タグ内で、 Maps API for JavaScript を使用して、次のコードスニペットを貼り付けるか参照して、デフォルトのレイヤーで構成されるベースマップを作成します。

 // 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 Dublin, Republic of Ireland, with the zoom level of 10:
     defaultLayers.vector.normal.map, {
         zoom: 11,
         center: {
             lat: 53.349805,
             lng: -6.260310
         }
     });

 // 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());

JavaScript コードスニペットで、 apikey 変数の値を独自の API キーに置き換えます。

結果: 次の例に示すように、 HTML ファイルには基本的なマップが表示されます。

既定の UI コントロールをマップに追加します

Maps API for JavaScript の既定の UI コントロールを使用すると、開発時間の短縮、ユーザビリティの改善、カスタマイズオプションの提供が可能になり、より効率的で使いやすいマッピングアプリケーションが実現します。

次のタグを <head> HTML ファイルの要素に追加して、 Maps API for JavaScript UI モジュールおよび対応する CSS スタイルへのリンクを読み込みます。

 <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" ></script>
 <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

マップのインスタンス化を担当するコードの後に次のスニペットを追加して、マップレンダリングの JavaScript コードを変更します。
```
 // Create the default UI:
 const ui = H.ui.UI.createDefault(map, defaultLayers);
```

結果: 地図に既定のコントロールが表示されます。 + および - ボタンを使用して、地図のズームを制御できます。地図セレクタを使用して、地図のスタイルを変更したり、交通状況やインシデントなどの追加データを表示したりします。最後に、スケールバーを使用すると、現在のズームレベルに対する距離とサイズを把握できます。次の図は、既定の UI コンポーネントの機能を示しています。

既定の UI コントロールをカスタマイズします

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 コントロールの位置を管理します

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

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

'mapsettings' を参照してください MapSettingsControl
'zoom' を参照してください ZoomControl
'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');

結果: 次の例に示すように、入力内容に応じてコントロールの位置が変更されます。

整列オプションの詳細については、 API リファレンスの setAlignment() メソッドのドキュメントを参照してください。

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

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

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

結果: ZoomControl 次の図に示すように、が非表示になります。

詳細については、 API リファレンスの setVisibility() メソッドのドキュメントを参照してください。

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

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

次に、をディセーブルにする例を示し ZoomControlます。

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

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

詳細については、 API リファレンスの setDisabled() メソッドのドキュメントを参照してください。

概要地図コントロールを追加します

Overview Maps API for JavaScript のコントロールには、地図の縮小表示が表示されます。

既定では、概要地図には現在のビューポイントの小さいバージョンが表示されます。たとえば、ビジネスユースケースの概要地図を調整するには、ズームレベルと概要地図のサイズを調整して、この動作を変更して広い領域を表示できます。このようにすると、ユーザーは周囲の領域をより的確に把握し、より効果的にマップ内をナビゲートできます。

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

// Create a map layer for the overview control
const overviewLayers = platform.createDefaultLayers();
// Instatiate the overview map by using the H.ui.Overview constructor
const overviewMap = new H.ui.Overview(overviewLayers.raster.satellite.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 コントロールが表示されます。操作すると、次の図に示すように、小さなラスタ衛星概要マップがコントロールに表示されます。

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

情報バブルを追加します

情報バブルは、特定の地図の場所またはオブジェクトに関する追加情報を提供する場合に役立ちます。場所、住所、連絡先情報、地図機能に関連するその他の関連情報などの詳細情報を表示するために使用できます。ユーザーは、情報バブルを操作して情報を表示し、不要になったときに閉じることができます。

次の例は、アイルランドのダブリンにあるランドマークの情報バブルを追加する方法を示しています。

// Create the coordinates for the Spire of Dublin
const spireCoordinates = {
    lat: 53.349805,
    lng: -6.260310
};

// Create the HTML content for the info bubble
const content = '<div>' +
    '<h3>Spire of Dublin</h3>' +
    '<p>Learn more on <a href="https://en.wikipedia.org/wiki/Spire_of_Dublin" 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(spireCoordinates, {
    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);

結果: 次の例に示すように、コントロールを使用して、地図上のさまざまなポイント間の距離を測定できるようになりました。

前の例に示すように、開始マーカー、終了マーカー、およびストップオーバーマーカーを追加できます。一方、 Maps API for JavaScript では、各マーカー間の合計距離と距離の両方が動的に計算されます。さらに、以前に追加した任意のマーカーの間に分割マーカーを追加したり、地図上でドラッグしてマーカーの位置を調整したりできます。

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

スケールバーおよび距離の測定コントロールの単位系を変更します

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

デフォルトでは、 Maps API for JavaScript は距離およびスケールの測定にメートル法の単位を使用します。英単位系に切り替えるには、 setUnitSystem() メソッドを呼び出して、使用する測定システムに対応する値を入力します。次に例を示します。

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

結果: スケールバーと距離の測定コントロールでは、次の例に示すように、ヤードポンド法の測定システムが使用されるようになりました。

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

次のステップ

Maps API for JavaScript のより実用的な用途については、 Tutorials このガイドのを参照してください。
Maps API for JavaScript のその他の使用例については、例を参照してください。
Maps API for JavaScript の設計と機能については、『 API リファレンス』を参照してください。

地図コントロールと UI を使用して地図を変更します

地図コントロールと UI を使用して地図を変更します

ベースマップを作成します

既定の UI コントロールをマップに追加します

既定の UI コントロールをカスタマイズします

UI 言語を変更します

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

UI コントロールの位置合わせを設定します

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

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

概要地図コントロールを追加します

情報バブルを追加します

ズーム矩形コントロールを追加します

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

スケールバーおよび距離の測定コントロールの単位系を変更します

次のステップ

「」に一致する結果は件です

「」に一致する結果はありません

開発者

地図コントロールと UI を使用して地図を変更します

ベース マップ を作成します

既定の UI コントロールをマップに追加します

既定の UI コントロールをカスタマイズします

UI 言語を変更します

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

UI コントロールの位置合わせを設定します

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

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

概要地図コントロールを追加します

情報バブルを追加します

ズーム矩形コントロールを追加します

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

スケールバーおよび距離の測定コントロールの単位系を変更します

次のステップ

「」に一致する結果は 件です

「」に一致する結果はありません

開発者

ベースマップを作成します

「」に一致する結果は件です