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

マップコントロールでは、複数の異なるマップスタイルオプションと基本マップスタイルがサポートされています。すべてのスタイルは、マップコントロールを初期化するときに設定できます。または、マップコントロールの 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
});

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

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

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

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

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

    //Additional map options
});

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

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

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

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

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

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

ベースマップをカスタマイズしましょう

styleOverridesオプションを使えば、国や地域の境界、行政区画の境界、建物のフットプリント、道路詳細レイヤーなど特定のマップ要素をオフにしてベースマップを効率化できます。これにより、地図ビューがよりクリーンでシンプルになり、ジオメトリデータの可視化が容易になります。

以下のコードは、国や地域の国境や建物の足跡をマップ上で無効にする方法を示しています。

var map = new atlas.Map('map', {
    styleOverrides: {
        countryRegion: { borderVisible: false },
        buildingFootprint: { visible: false },
    },

    //Additional map options
});

以下は利用可能な5つの styleOverrides オプションの例です。

国・地域の国境

styleOverrides: {
    countryRegion: { borderVisible: false }
}

国や地域の国境を地図上で表示するアニメーションGIF。

行政区の境界

styleOverrides: {
    adminDistrict: { borderVisible: false }
}

行政区の境界を示すアニメーションGIF。

第二行政区の境界

styleOverrides: {
    adminDistrict2: { borderVisible: false }
}

第二行政区の境界を示すアニメーションGIF。

建物の占有面積

styleOverrides: {
    buildingFootprint: { visible: false }
}

建物の足跡を示すアニメーションGIF。

道路の詳細

styleOverrides: {
    roadDetails: { visible: false }
}

道路の詳細を示すアニメーションGIF。

Note

各 styleOverrides オプションでサポートされているマップスタイルの詳細については、 styleOverrides APIのドキュメントをご覧ください。

異なるスタイルとそれがマップのレンダリングにどのように影響するかを示すサンプルは、Azure Maps Samplesのマップスタイルオプションをご覧ください。このサンプルのソースコードについては、 Map style optionsのソースコードを参照してください。

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

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

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

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

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

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

重要

デフォルトでは、スタイルピッカーコントロールはマップスタイルの基本セットを表示します。すべての利用可能なスタイルを表示するには、 mapStyles オプションを "all"に設定してください。カスタムセットを表示するには、スタイル名の配列を mapStyles オプションに渡します。

次のコードは、既定の 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'
});

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