2D、3D、Streetside ビューでの地図の表示

[アーティクル]
07/14/2023

地図を表示するには、マップ プレースカードと呼ばれる簡易非表示に対応したウィンドウか、フル機能を備えたマップコントロールを使うことができます。

地図サンプルをダウンロードして、このガイドで説明されている機能のいくつかを試してみてください。

プレースカードへの地図の表示

UI 要素またはユーザーがタッチするアプリの領域の上下左右に軽量なポップアップウィンドウを開いて、その内部に地図を表示することができます。地図には、アプリ内の情報に関連する都市や住所を表示できます。

次のプレースカードは、シアトルの街を表示します。

シアトルの街を表示するプレースカード

プレースカードのボタンの下にシアトルを表示するコードを次に示します。

private void Seattle_Click(object sender, RoutedEventArgs e)
{
    Geopoint seattlePoint = new Geopoint
        (new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 });

    PlaceInfo spaceNeedlePlace = PlaceInfo.Create(seattlePoint);

    FrameworkElement targetElement = (FrameworkElement)sender;

    GeneralTransform generalTransform =
        targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);

    Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
        (targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));

    spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}

次のプレースカードは、シアトルにある Space Needle の場所を表示します。

Space Needle の場所を表示するプレースカード

プレースカードのボタンの下に Space Needle を表示するコードを次に示します。

private void SpaceNeedle_Click(object sender, RoutedEventArgs e)
{
    Geopoint spaceNeedlePoint = new Geopoint
        (new BasicGeoposition { Latitude = 47.6205, Longitude = -122.3493 });

    PlaceInfoCreateOptions options = new PlaceInfoCreateOptions();

    options.DisplayAddress = "400 Broad St, Seattle, WA 98109";
    options.DisplayName = "Seattle Space Needle";

    PlaceInfo spaceNeedlePlace =  PlaceInfo.Create(spaceNeedlePoint, options);

    FrameworkElement targetElement = (FrameworkElement)sender;

    GeneralTransform generalTransform =
        targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);

    Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
        (targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));

    spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}

コントロールでの地図の表示

機能豊富でカスタマイズ可能なマップデータをアプリに表示するには、マップコントロールを使います。マップコントロールでは、道路地図、航空写真、3D ビュー、ルート案内、検索結果、交通情報を表示できます。マップ上には、現在地、ルート、関心のあるポイントを表示できます。また、航空写真 3D ビュー、Streetside ビュー、交通情報、乗り換え情報、周辺情報を表示することもできます。

アプリ固有の地理情報または一般的な地理情報を表示できるアプリ内でマップが必要な場合に、マップコントロールを使います。アプリにマップコントロールを含めておくことで、ユーザーはアプリの外部に移動することなく情報を得ることができます。

注意

その情報を得るためにユーザーがアプリの外部に移動してもかまわない場合は、Windows マップアプリを利用することも検討してください。アプリから Windows マップアプリを起動し、特定の地図、ルート案内、検索結果を表示することができます。詳しくは、「Windows マップアプリの起動」をご覧ください。

アプリへのマップコントロールの追加

MapControl を追加することによって、XAML ページに地図を表示します。 MapControl を使うには、XAML ページまたはコード内に Windows.UI.Xaml.Controls.Maps 名前空間の宣言が必要です。ツールボックスからコントロールをドラッグすると、この名前空間宣言が自動的に追加されます。 XAML ページに MapControl を手動で追加する場合は、ページの上部に名前空間宣言を手動で追加する必要があります。

次の例では、基本的なマップコントロールを表示し、タッチ入力を受け付けるだけでなくズームコントロールとチルトコントロールを表示するように地図を構成しています。

<Page
    x:Class="MapsAndLocation1.DisplayMaps"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MapsAndLocation1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
    mc:Ignorable="d">

 <Grid x:Name="pageGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Maps:MapControl
       x:Name="MapControl1"            
       ZoomInteractionMode="GestureAndControl"
       TiltInteractionMode="GestureAndControl"   
       MapServiceToken="EnterYourAuthenticationKeyHere"/>

 </Grid>
</Page>

コードにマップコントロールを追加する場合は、コードファイルの先頭で手動で名前空間を宣言する必要があります。

using Windows.UI.Xaml.Controls.Maps;
...

// Add the MapControl and the specify maps authentication key.
MapControl MapControl2 = new MapControl();
MapControl2.ZoomInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.TiltInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.MapServiceToken = "EnterYourAuthenticationKeyHere";
pageGrid.Children.Add(MapControl2);

マップ認証キーの取得と設定

MapControl やマップサービスを使用する前に、マップ認証キーを MapServiceToken プロパティの値として指定する必要があります。前の例では、を Bing Maps デベロッパーセンターから取得したキーに置き換えますEnterYourAuthenticationKeyHere。マップ認証キーを指定するまでは、コントロールの下に [警告: MapServiceToken が指定されていません] というテキストが表示されます。マップ認証キーを取得して設定する方法について詳しくは、「マップ認証キーの要求」をご覧ください。

地図の場所の設定

地図を表示するときは、特定の場所を示すように設定することも、ユーザーの現在の場所を使うこともできます。

地図の開始位置の設定

コードで MapControl の Center プロパティを指定するか、または XAML マークアップでプロパティをバインドすることにより、地図上の表示位置を設定します。シアトル市を中心とした地図を表示する例を次に示します。

注意

文字列は Geopoint に変換できないため、データバインディングを使わない限り、XAML マークアップで Center プロパティに対する値を指定できません。 (この制限は、MapControl.Location 添付プロパティにも適用されます)。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
   // Specify a known location.
   BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 47.604, Longitude = -122.329 };
   Geopoint cityCenter = new Geopoint(cityPosition);

   // Set the map location.
   MapControl1.Center = cityCenter;
   MapControl1.ZoomLevel = 12;
   MapControl1.LandmarksVisible = true;
}

マップコントロールの例。

地図の現在位置の設定

ユーザーの位置情報にアクセスするには、先にアプリで RequestAccessAsync メソッドを呼び出す必要があります。このときに、アプリをフォアグラウンドで実行し、RequestAccessAsync を UI スレッドから呼び出す必要があります。位置情報に対するアクセス許可をユーザーがアプリに与えるまで、アプリは位置情報にアクセスできません。

Geolocator クラスの GetGeopositionAsync メソッドを使って、デバイスの現在の位置情報を取得します (位置情報にアクセスできる場合)。対応する Geopoint を取得するには、geoposition オブジェクトの geocoordinate の Point プロパティを使います。詳しくは、「現在の位置情報の取得」をご覧ください。

// Set your current location.
var accessStatus = await Geolocator.RequestAccessAsync();
switch (accessStatus)
{
   case GeolocationAccessStatus.Allowed:

      // Get the current location.
      Geolocator geolocator = new Geolocator();
      Geoposition pos = await geolocator.GetGeopositionAsync();
      Geopoint myLocation = pos.Coordinate.Point;

      // Set the map location.
      MapControl1.Center = myLocation;
      MapControl1.ZoomLevel = 12;
      MapControl1.LandmarksVisible = true;
      break;

   case GeolocationAccessStatus.Denied:
      // Handle the case  if access to location is denied.
      break;

   case GeolocationAccessStatus.Unspecified:
      // Handle the case if  an unspecified error occurs.
      break;
}

地図にデバイスの位置を表示するときは、位置情報の精度に基づいてグラフィックスを表示してズームレベルを設定することを検討します。詳しくは、「位置認識アプリのガイドライン」をご覧ください。

地図の位置の変更

2D 地図に表示する位置を変更するには、TrySetViewAsync メソッドのいずれかのオーバーロードを呼び出します。そのメソッドを使って、Center、ZoomLevel、Heading、Pitch の新しい値を指定します。また、ビューが変わるときに使うアニメーションをオプションで指定することもできます。そのためには、MapAnimationKind 列挙値の定数を指定します。

3D 地図の場所を変更するには、代わりに TrySetSceneAsync メソッドを使います。詳しくは、「航空写真 3D ビューの表示」をご覧ください。

地図上に GeoboundingBox の内容を表示するには、TrySetViewBoundsAsync メソッドを呼び出します。たとえばこのメソッドを使うと、地図上にルートやルートの一部を表示することができます。詳しくは、「地図へのルートとルート案内の表示」をご覧ください。

地図の外観の変更

地図の外観をカスタマイズするには、マップコントロールの StyleSheet プロパティを既存の MapStyleSheet オブジェクトに設定します。

myMap.StyleSheet = MapStyleSheet.RoadDark();

濃色スタイルの地図

また、JSON を使用してカスタムスタイルを定義し、その JSON を使用して MapStyleSheet オブジェクトを作成することもできます。

スタイルシート JSON は、マップスタイルシートエディターアプリケーションを使用して対話形式で作成できます。

myMap.StyleSheet = MapStyleSheet.ParseFromJson(@"
    {
        ""version"": ""1.0"",
        ""settings"": {
            ""landColor"": ""#FFFFFF"",
            ""spaceColor"": ""#000000""
        },
        ""elements"": {
            ""mapElement"": {
                ""labelColor"": ""#000000"",
                ""labelOutlineColor"": ""#FFFFFF""
            },
            ""water"": {
                ""fillColor"": ""#DDDDDD""
            },
            ""area"": {
                ""fillColor"": ""#EEEEEE""
            },
            ""political"": {
                ""borderStrokeColor"": ""#CCCCCC"",
                ""borderOutlineColor"": ""#00000000""
            }
        }
    }
");

カスタムスタイルの地図

完全な JSON エントリのリファレンスについては、「マップスタイルシートリファレンス」をご覧ください。

最初は既存のシートを使用して、次に JSON を使用して要素を上書きできます。この例では、最初は既存のスタイルを使用し、次に JSON を使用して水域の色のみを変更しています。

 MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
    {
        ""version"": ""1.0"",
        ""elements"": {
            ""water"": {
                ""fillColor"": ""#DDDDDD""
            }
        }
    }
");

MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();

myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });

複数のスタイルの地図

注意

2 番目のスタイルシートで定義するスタイルは、最初のスタイルを上書きします。

向きと視点の設定

マップカメラを拡大、縮小、回転、傾けることで、求める効果をもたらす適切な角度に設定できます。次のプロパティをお試しください。

地図の中心を地理的位置に設定するには、Center プロパティを設定します。
ZoomLevel プロパティに 1 ～ 20 度の値を設定することにより、地図のズームレベルを設定します。
Heading プロパティを設定することにより地図の回転を設定します。ここでは 0 度または 360 度 = 北、90 度 = 東、180 度 = 南、270 度 = 西です。
DesiredPitch プロパティに 0 ～ 65 度の値を設定することにより、地図の傾きを設定します。

地図機能を表示または非表示にする

道路やランドマークなどの地図機能を表示または非表示にするには、MapControl の次のプロパティの値を設定します。

地図に建物やランドマークを表示するには、LandmarksVisible プロパティを有効または無効にします。

注意

建物の表示と非表示を切り替えることはできますが、3 次元表示を無効にすることはできません。
地図に公共階段などの歩行者用の施設を表示するには、PedestrianFeaturesVisible プロパティを有効または無効にします。
地図に交通情報を表示するには、TrafficFlowVisible プロパティを有効または無効にします。
地図に透かしを表示するかどうかを指定するには、WatermarkMode プロパティを MapWatermarkMode 定数のいずれかに設定します。
地図に自動車ルートや徒歩ルートを表示するには、マップコントロールの Routes コレクションに MapRouteView を追加します。詳しい情報と例については、「地図へのルートとルート案内の表示」をご覧ください。

MapControl でプッシュピン、図形、XAML コントロールを表示する方法については、「関心のあるポイント (POI) の地図への表示」をご覧ください。

Streetside ビューの表示

Streetside ビューは、視点がストリートレベルにある場合の場所の見え方を示すもので、マップコントロールの上に表示されます。

マップコントロールの Streetside ビューの例。

Streetside ビューの「内部」での操作は、マップコントロールにもともと表示されている地図とは独立していることを考慮します。たとえば、Streetside ビューで場所を変更しても、Streetside ビューの「下」にある地図の場所や外観は変わりません。コントロールの右上隅にある [X] をクリックして Streetside ビューを閉じると、元の地図は Streetside ビューが表示される前のままです。

Streetside ビューを表示するには

IsStreetsideSupported を確認して、Streetside ビューがデバイスでサポートされているかどうかを調べます。
Streetside ビューがサポートされている場合は、FindNearbyAsync を呼び出し、指定した位置の近くに StreetsidePanorama を作成します。
StreetsidePanorama が null でないかどうかを確認し、近隣のパノラマ写真があるかどうかを調べます。
近隣のパノラマ写真があった場合、StreetsideExperience を作成し、マップコントロールの CustomExperience プロパティに設定します。

次の例は、前掲の画像に似た Streetside ビューを表示する方法を示しています。

注意

マップコントロールのサイズが小さすぎる場合は、概観の地図は表示されません。

private async void showStreetsideView()
{
   // Check if Streetside is supported.
   if (MapControl1.IsStreetsideSupported)
   {
      // Find a panorama near Avenue Gustave Eiffel.
      BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 48.858, Longitude = 2.295};
      Geopoint cityCenter = new Geopoint(cityPosition);
      StreetsidePanorama panoramaNearCity = await StreetsidePanorama.FindNearbyAsync(cityCenter);

      // Set the Streetside view if a panorama exists.
      if (panoramaNearCity != null)
      {
         // Create the Streetside view.
         StreetsideExperience ssView = new StreetsideExperience(panoramaNearCity);
         ssView.OverviewMapVisible = true;
         MapControl1.CustomExperience = ssView;
      }
   }
   else
   {
      // If Streetside is not supported
      ContentDialog viewNotSupportedDialog = new ContentDialog()
      {
         Title = "Streetside is not supported",
         Content ="\nStreetside views are not supported on this device.",
         PrimaryButtonText = "OK"
      };
      await viewNotSupportedDialog.ShowAsync();            
   }
}

航空写真 3D ビューの表示

MapScene クラスを使って、地図の 3D 視点を指定します。マップシーンは、地図に表示される 3D ビューを表します。 MapCamera クラスは、このようなビューが表示されるカメラの位置を表します。

マップシーンの場所と MapCamera の場所を示す図

建物などの地物を地図表面に 3D 表示するには、マップコントロールの Style プロパティを MapStyle.Aerial3DWithRoads に設定します。 Aerial3DWithRoads スタイルの 3D ビューの例を次に示します。

3D 地図ビューの例。

3D ビューを表示するには

Is3DSupported を確認して、3D ビューがデバイスでサポートされているかどうかを調べます。
3D ビューがサポートされている場合は、マップコントロールの Style プロパティを MapStyle.Aerial3DWithRoads に設定します。
CreateFromLocationAndRadius、CreateFromCamera などの多数の CreateFrom メソッドの中から MapScene オブジェクトを作成します。
TrySetSceneAsync を呼び出して、3D ビューを表示します。また、ビューが変わるときに使うアニメーションをオプションで指定することもできます。そのためには、MapAnimationKind 列挙値の定数を指定します。

次の例は、3D ビューを表示する方法を示しています。

private async void display3DLocation()
{
   if (MapControl1.Is3DSupported)
   {
      // Set the aerial 3D view.
      MapControl1.Style = MapStyle.Aerial3DWithRoads;

      // Specify the location.
      BasicGeoposition hwGeoposition = new BasicGeoposition() { Latitude = 43.773251, Longitude = 11.255474};
      Geopoint hwPoint = new Geopoint(hwGeoposition);

      // Create the map scene.
      MapScene hwScene = MapScene.CreateFromLocationAndRadius(hwPoint,
                                                                           80, /* show this many meters around */
                                                                           0, /* looking at it to the North*/
                                                                           60 /* degrees pitch */);
      // Set the 3D view with animation.
      await MapControl1.TrySetSceneAsync(hwScene,MapAnimationKind.Bow);
   }
   else
   {
      // If 3D views are not supported, display dialog.
      ContentDialog viewNotSupportedDialog = new ContentDialog()
      {
         Title = "3D is not supported",
         Content = "\n3D views are not supported on this device.",
         PrimaryButtonText = "OK"
      };
      await viewNotSupportedDialog.ShowAsync();
   }
}

位置に関する情報の取得

地図上の位置に関する情報を取得するには、MapControl の次のメソッドを呼び出します。

TryGetLocationFromOffset メソッド - マップコントロールのビューポート内の指定したポイントに対応する地理的な位置情報を取得します。
GetOffsetFromLocation メソッド - 指定した地理的な位置情報に対応するマップコントロールのビューポート内のポイントを取得します。
IsLocationInView メソッド - 指定した地理的な位置がマップコントロールのビューポート内に現在表示されているかどうかを調べます。
FindMapElementsAtOffset メソッド - マップコントロールのビューポート内の指定したポイントにある地図上の要素を取得します。

操作と変更の処理

地図上でのユーザー入力ジェスチャを処理するには、MapControl の次のイベントを処理します。地図上の地理的な位置、およびジェスチャが行われたビューポート内の実際の位置に関する情報を取得するには、MapInputEventArgs の Location プロパティと Position プロパティの値を確認します。

地図が読み込まれている最中であるか、完全に読み込まれたかどうかを判断するには、コントロールの LoadingStatusChanged イベントを処理します。

ユーザーやアプリによる地図の設定変更に対応するには、MapControl の次のイベントを処理します。

ベストプラクティスの推奨事項

ユーザーが地理情報を表示するためにパンとズームを過度に使用しなくて済むように、十分な画面領域 (または画面全体) を使用してマップを表示します。
静的な情報ビューの提示をするためにのみマップを使う場合、小さなマップを使う方が適している場合があります。小さく静的なマップを使う場合は、使いやすさを考えてサイズを決めます。画面上の領域を十分節約できる程度に小さく、判読しにくくならない程度に大きくします。
マップシーンに関心のあるポイントを埋め込むには、MapElements を使います。その他の情報も、マップシーンのオーバーレイとして表示される一時的な UI に表示できます。

Bing Maps Developer Center
UWP の地図のサンプル
現在の位置情報の取得
位置認識アプリの設計ガイドライン
Build 2015 のビデオ: Windows アプリでの電話、タブレット、PC で使用できるマップと位置情報の活用
UWP の交通情報アプリのサンプル
MapControl

2D、3D、Streetside ビューでの地図の表示

プレースカードへの地図の表示

コントロールでの地図の表示

アプリへのマップコントロールの追加

マップ認証キーの取得と設定

地図の場所の設定

地図の開始位置の設定

地図の現在位置の設定

地図の位置の変更

地図の外観の変更

向きと視点の設定

地図機能を表示または非表示にする

Streetside ビューの表示

航空写真 3D ビューの表示

位置に関する情報の取得

操作と変更の処理

ベストプラクティスの推奨事項

フィードバック

フィードバック

その他のリソース

2D、3D、Streetside ビューでの地図の表示

プレースカードへの地図の表示

コントロールでの地図の表示

アプリへのマップ コントロールの追加

マップ認証キーの取得と設定

地図の場所の設定

地図の開始位置の設定

地図の現在位置の設定

地図の位置の変更

地図の外観の変更

向きと視点の設定

地図機能を表示または非表示にする

Streetside ビューの表示

航空写真 3D ビューの表示

位置に関する情報の取得

操作と変更の処理

ベスト プラクティスの推奨事項

関連トピック

フィードバック

フィードバック

その他のリソース

アプリへのマップコントロールの追加

ベストプラクティスの推奨事項