マップのスタイルを変更する

[アーティクル]
09/23/2023

マップコントロールでは、複数の異なるマップスタイルオプションと基本マップスタイルがサポートされています。すべてのスタイルは、マップコントロールを初期化するときに設定できます。または、マップコントロールの setStyle 関数を使用してスタイルを設定することもできます。この記事では、これらのスタイルオプションを使用してマップの外観をカスタマイズする方法と、マップでスタイルピッカーコントロールを実装する方法について説明します。ユーザーは、スタイルピッカーコントロールを使用して別の基本スタイルに切り替えることができます。

マップスタイルオプションを設定する

スタイルオプションは、Web コントロールの初期化時に設定できます。または、マップコントロールの setStyle 関数を呼び出してスタイルオプションを更新することもできます。使用できるすべてのスタイルオプションを確認するには、「スタイルオプション」を参照してください。

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
};

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showLogo: false,
    showFeedbackLink: false
});

さまざまなスタイルがマップのレンダリング方法にどのように影響するかを示す、完全に機能するサンプルについては、「Azure Maps サンプル」の「マップスタイルオプション」を参照してください。このサンプルのソースコードについては、Map style options のソースコードを参照してください。

基本マップスタイルを設定する

Web SDK で使用できるいずれかの基本マップスタイルを使用して、マップコントロールを初期化することもできます。その後、setStyle 関数を使用して、基本スタイルを別のマップスタイルで更新できます。

初期化時に基本マップスタイルを設定する

マップコントロールの基本スタイルは、初期化時に設定できます。次のコードでは、マップコントロールの style オプションが grayscale_dark に設定されています。

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
);

マップの読み込みプロセスで設定されているグレースケールのダークスタイルを示すスクリーンショット。

基本マップスタイルを更新する

基本マップスタイルを更新するには、setStyle 関数を使用して style オプションを設定し、別の基本マップスタイルに変更するか、さらに多くのスタイルオプションを追加します。

次のコードでは、マップインスタンスが読み込まれた後、setStyle 関数を使用して、マップのスタイルが grayscale_dark から satellite に更新されます。

map.setStyle({ style: 'satellite' });

マップの読み込みプロセス後に設定されたサテライトスタイルを示すスクリーンショット。

スタイルピッカーコントロールを追加する

スタイルピッカーコントロールには、ポップアップパネル付きの使いやすいボタンがあり、エンドユーザーが基本スタイルを切り替えるために使用できます。

スタイルピッカーには、icon と list という 2 つの異なるレイアウトオプションがあります。また、スタイルピッカーでは、light と dark という 2 つの異なるスタイルピッカーコントロールの style オプションを選択できます。この例では、スタイルピッカーに icon レイアウトが使用され、基本マップスタイルの選択リストがアイコン形式で表示されています。スタイルピッカーコントロールには、基本スタイルのセットとして ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"] が含まれています。スタイルピッカーコントロールのオプションの詳細については、「StyleControlOptions」を参照してください。

次の画像は、icon レイアウトで表示されるスタイルピッカーコントロールを示しています。

次の画像は、list レイアウトで表示されるスタイルピッカーコントロールを示しています。

スタイル選択機能の一覧のレイアウト

重要

既定では、スタイルピッカーコントロールには Azure Maps の Gen1 (S0) 価格レベルで利用できるすべてのスタイルが一覧表示されます。この一覧に表示されるスタイルの数を減らすには、一覧に表示するスタイルの配列をスタイルの選択ツールの mapStyle オプションに渡します。 Gen1 (S1) または Gen2 の価格レベルを使用していて、使用できるすべてのスタイルを表示する場合は、スタイル選択ツールの mapStyles オプションを "all" に設定します。

Azure Maps Gen1 価格レベルの廃止

Gen1 価格レベルは非推奨となり、2026 年 9 月 15 日に廃止されます。 Gen2 価格レベルが Gen1 (S0 と S1 の両方) 価格レベルに取って代わります。 Azure Maps アカウントに Gen1 価格レベルが選択されている場合、廃止前に Gen2 価格レベルに切り替えることができます。切り替えない場合、自動的に更新されます。詳細については、「Azure Maps アカウントの価格レベルを管理する」を参照してください。

次のコードは、既定の mapStyles 基本スタイル一覧をオーバーライドする方法を示しています。この例では、スタイルピッカーコントロールに表示される基本スタイルを一覧表示するように mapStyles オプションを設定しています。

/*Add the Style Control to the map*/
map.controls.add(new atlas.control.StyleControl({
  mapStyles: ['road', 'grayscale_dark', 'night', 'road_shaded_relief', 'satellite', 'satellite_road_labels'],
  layout: 'list'
}), {
  position: 'top-right'
});

レイアウトプロパティがリストに設定されているスタイルピッカーコントロールがあるマップを示すスクリーンショット。