関心のあるポイントの地図への表示Display points of interest on a map

プッシュピン、画像、図形、XAML UI 要素を使って、関心のあるポイント (POI) を地図に追加します。Add points of interest (POI) to a map using pushpins, images, shapes, and XAML UI elements. POI は、地図上の特定のポイントであり、関心のあるものを表します。A POI is a specific point on the map that represents something of interest. たとえば、企業、市区町村、友人の所在地を示すことができます。For example, the location of a business, city, or friend.

アプリで POI を表示する方法について詳しくは、GitHub の Windows-universal-samples リポジトリからユニバーサル Windows プラットフォーム (UWP) の地図サンプルをダウンロードしてください。To learn more about displaying POI on your app, download the following sample from the Windows-universal-samples repo on GitHub: Universal Windows Platform (UWP) map sample.

地図にプッシュピン、画像、図形を表示するには、MapIconMapBillboardMapPolygonMapPolyline の各オブジェクトを、MapElementsLayer オブジェクトの MapElements コレクションに追加します。Display pushpins, images, and shapes on the map by adding MapIcon, MapBillboard, MapPolygon, and MapPolyline objects to a MapElements collection of a MapElementsLayer object. 次に、そのレイヤー オブジェクトをマップ コントロールの Layers コレクションに追加します。Then, add that layer object to the Layers collection of a map control.

注意

以前のリリースでは、このガイドで、マップの要素を MapElements コレクションに追加する方法を示していました。In previous releases, this guide showed you how to add map elements to the MapElements collection. 引き続き同じアプローチを使うこともできますが、その場合は新しいマップ レイヤー モデルの利点が活かされません。While you can still use this approach, you'll miss out on some of the advantages of the new map layer model. 詳しくは、このガイドの「レイヤーの使用」をご覧ください。To learn more, see the Working with layers section of this guide.

ButtonHyperlinkButtonTextBlock などの XAML ユーザー インターフェイス要素を地図に表示することもできます。そのためには、それらの要素を MapItemsControl に追加するか、MapControlChildren として追加します。You can also display XAML user interface elements such as a Button, a HyperlinkButton, or a TextBlock on the map by adding them to the MapItemsControl or as Children of the MapControl.

地図に配置する要素の数が多い場合、地図にタイル画像をオーバーレイすることを検討します。If you have a large number of elements to place on the map, consider overlaying tiled images on the map. 地図に道路情報を表示するには、「ルートとルート案内の表示」をご覧ください。To display roads on the map, see Display routes and directions

プッシュピンの追加Add a pushpin

プッシュピンなどの画像をオプションのテキストと共に地図に表示するには、MapIcon クラスを使います。Display an image such a pushpin, with optional text, on the map by using the MapIcon class. 既定の画像をそのまま使うか、Image プロパティを使ってカスタム画像を指定できます。You can accept the default image or provide a custom image by using the Image property. 次の画像はそれぞれ、Title プロパティに値を指定しない、短いタイトル、長いタイトル、非常に長いタイトルを指定した場合の MapIcon の既定の画像です。The following image displays the default image for a MapIcon with no value specified for the Title property, with a short title, with a long title, and with a very long title.

さまざまな長さのタイトルを含むサンプルの MapIcon。

次の例では、シアトル市の地図を表示して、既定の画像とオプションのタイトルを使って MapIcon を追加し、スペース ニードルの場所を示しています。The following example shows a map of the city of Seattle and adds a MapIcon with the default image and an optional title to indicate the location of the Space Needle. また、アイコンを地図の中央に配置し、拡大しています。It also centers the map over the icon and zooms in. マップ コントロールを使用する方法に関する一般的な情報については、「2D、3D、Streetside ビューでの地図の表示」をご覧ください。For general info about using the map control, see Display maps with 2D, 3D, and Streetside views.

public void AddSpaceNeedleIcon()
{
    var MyLandmarks = new List<MapElement>();

    BasicGeoposition snPosition = new BasicGeoposition { Latitude = 47.620, Longitude = -122.349 };
    Geopoint snPoint = new Geopoint(snPosition);

    var spaceNeedleIcon = new MapIcon
    {
        Location = snPoint,
        NormalizedAnchorPoint = new Point(0.5, 1.0),
        ZIndex = 0,
        Title = "Space Needle"
    };

    MyLandmarks.Add(spaceNeedleIcon);

    var LandmarksLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyLandmarks
    };

    myMap.Layers.Add(LandmarksLayer);

    myMap.Center = snPoint;
    myMap.ZoomLevel = 14;

}

この例では、次の POI (中央の既定の画像) が地図に表示されます。This example displays the following POI on the map (the default image in the center).

MapIcon を使った地図

次のコード行では、プロジェクトの Assets フォルダーに保存されているカスタム イメージを使って MapIcon が表示されます。The following line of code displays the MapIcon with a custom image saved in the Assets folder of the project. MapIconImage プロパティでは、RandomAccessStreamReference 型の値が想定されています。The Image property of the MapIcon expects a value of type RandomAccessStreamReference. この型では、Windows.Storage.Streams 名前空間用に using ステートメントが必要になります。This type requires a using statement for the Windows.Storage.Streams namespace.

注意

複数の地図アイコンに同じ画像を使う場合は、パフォーマンスが最大限に高まるように、ページ レベルまたはアプリ レベルで RandomAccessStreamReference を宣言します。If you use the same image for multiple map icons, declare the RandomAccessStreamReference at the page or app level for the best performance.

    MapIcon1.Image =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/customicon.png"));

MapIcon クラスを使うときは、次の考慮事項を念頭に置いてください。Keep these considerations in mind when working with the MapIcon class:

  • Image プロパティがサポートしている最大画像サイズは 2048 × 2048 ピクセルです。The Image property supports a maximum image size of 2048×2048 pixels.
  • 既定では、地図アイコンの画像は必ず表示されるとは限りません。By default, the map icon's image is not guaranteed to be shown. このクラスが地図上の他の要素やラベルを覆い隠す場合には、このクラスは非表示になることがあります。It may be hidden when it obscures other elements or labels on the map. 地図アイコンを表示したままにするには、このアイコンの CollisionBehaviorDesired プロパティを MapElementCollisionBehavior.RemainVisible に設定します。To keep it visible, set the map icon's CollisionBehaviorDesired property to MapElementCollisionBehavior.RemainVisible.
  • MapIcon のオプションの Title は、必ず表示されるとは限りません。The optional Title of the MapIcon is not guaranteed to be shown. テキストが表示されない場合は、MapControlZoomLevel プロパティの値を減らして、地図を縮小してください。If you don't see the text, zoom out by decreasing the value of the ZoomLevel property of the MapControl.
  • 地図上の特定の場所を指す MapIcon 画像 (たとえば、プッシュピンや矢印など) を表示する場合は、NormalizedAnchorPoint プロパティの値を画像上にあるポインターのおおよその位置に設定することを検討してください。When you display a MapIcon image that points to a specific location on the map - for example, a pushpin or an arrow - consider setting the value of the NormalizedAnchorPoint property to the approximate location of the pointer on the image. NormalizedAnchorPoint の値を、画像の左上隅を示す既定値 (0, 0) のままにした場合、地図の ZoomLevel を変更すると、画像が別の場所を示した状態になる可能性があります。If you leave the value of NormalizedAnchorPoint at its default value of (0, 0), which represents the upper left corner of the image, changes in the ZoomLevel of the map may leave the image pointing to a different location.
  • AltitudeAltitudeReferenceSystem を明示的に設定しない場合、MapIcon はサーフェスに配置されます。If you don't explicitly set an Altitude and AltitudeReferenceSystem, the MapIcon will be placed on the surface.

3D プッシュピンの追加Add a 3D pushpin

3 次元オブジェクトをマップに追加できます。You can add three-dimensional objects to a map. MapModel3D クラスを使って、3D Manufacturing Format (3MF) ファイルから 3D オブジェクトをインポートします。Use the MapModel3D class to import a 3D object from a 3D Manufacturing Format (3MF) file.

次の画像では、3D のコーヒー カップを使って、付近の喫茶店の場所を示しています。This image uses 3D coffee cups to mark the locations of coffee shops in a neighborhood.

地図上のマグ

次のコードでは、3MF ファイルのインポートを使って、地図にコーヒー カップを追加します。The following code adds a coffee cup to the map by using importing a 3MF file. シンプルにするために、このコードでは地図の中央に画像を追加していますが、実際のコードでは通常、特定の場所に画像を追加することになります。To keep things simple, this code adds the image to the center of the map, but your code would likely add the image to a specific location.

public async void Add3DMapModel()
{
    var mugStreamReference = RandomAccessStreamReference.CreateFromUri
        (new Uri("ms-appx:///Assets/mug.3mf"));

    var myModel = await MapModel3D.CreateFrom3MFAsync(mugStreamReference,
        MapModel3DShadingOption.Smooth);

    myMap.Layers.Add(new MapElementsLayer
    {
       ZIndex = 1,
       MapElements = new List<MapElement>
       {
          new MapElement3D
          {
              Location = myMap.Center,
              Model = myModel,
          },
       },
    });
}

画像の追加Add an image

レストランやランドマークの画像など、地図の場所に関連する大きい画像を表示します。Display large images that relate to map locations such as a picture of a restaurant or a landmark. ユーザーが地図を縮小すると、画像のサイズも比例的に縮小され、より広い範囲の地図を表示できるようになります。As users zoom out, the image will shrink proportionally in size to enable the user to view more of the map. これは特定の場所をマークする MapIcon とは少し異なります。MapIcon は小さいのが通常で、ユーザーが地図の拡大や縮小を行ってもサイズは変わりません。This is a bit different than a MapIcon which marks a specific location, is typically small, and remains the same size as users zoom in and out of a map.

MapBillboard 画像

次のコードは、上記の画像に表示されている MapBillboard を示しています。The following code shows the MapBillboard presented in the image above.

public void AddLandmarkPhoto()
{
    // Create MapBillboard.

    RandomAccessStreamReference mapBillboardStreamReference =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/billboard.jpg"));

    var mapBillboard = new MapBillboard(myMap.ActualCamera)
    {
        Location = myMap.Center,
        NormalizedAnchorPoint = new Point(0.5, 1.0),
        Image = mapBillboardStreamReference
    };

    // Add MapBillboard to a layer on the map control.

    var MyLandmarkPhotos = new List<MapElement>();

    MyLandmarkPhotos.Add(mapBillboard);

    var LandmarksPhotoLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyLandmarkPhotos
    };

    myMap.Layers.Add(LandmarksPhotoLayer);
}

このコードには、少し詳しく説明するに値する部分が 3 つあります。画像、リファレンス カメラ、および NormalizedAnchorPoint のことです。There's three parts of this code worth examining a little closer: The image, the reference camera, and the NormalizedAnchorPoint property.

画像Image

この例は、プロジェクトの Assets フォルダーに保存されたカスタム画像を示しています。This example shows a custom image saved in the Assets folder of the project. MapBillboardImage プロパティでは、RandomAccessStreamReference 型の値が想定されています。The Image property of the MapBillboard expects a value of type RandomAccessStreamReference. この型では、Windows.Storage.Streams 名前空間用に using ステートメントが必要になります。This type requires a using statement for the Windows.Storage.Streams namespace.

注意

複数の地図アイコンに同じ画像を使う場合は、パフォーマンスが最大限に高まるように、ページ レベルまたはアプリ レベルで RandomAccessStreamReference を宣言します。If you use the same image for multiple map icons, declare the RandomAccessStreamReference at the page or app level for the best performance.

リファレンス カメラReference camera

MapBillboard 画像は地図の ZoomLevel の変更に合わせて拡大および縮小するため、その ZoomLevel が標準の 1x 倍率のときに画像がどこに表示されるかを定義することが重要になります。Because a MapBillboard image scales in and out as the ZoomLevel of the map changes, it's important to define where in that ZoomLevel the image appears at a normal 1x scale. その位置は MapBillboard のリファレンス カメラで定義されます。リファレンス カメラを設定するには、MapCamera オブジェクトを MapBillboard のコンストラクターに渡す必要があります。That position is defined in the reference camera of the MapBillboard, and to set it, you'll have to pass a MapCamera object into the constructor of the MapBillboard.

Geopoint で目的の位置を定義し、その Geopoint を使用することで、MapCamera オブジェクトを作成できます。You can define the position that you want in a Geopoint, and then use that Geopoint to create a MapCamera object. ただし、この例で使用している MapCamera オブジェクトは、単純にマップ コントロールの ActualCamera プロパティから返されたものです。However, in this example, we're just using the MapCamera object returned by the ActualCamera property of the map control. これは地図の内部カメラです。This is the map's internal camera. このカメラの現在の位置がリファレンス カメラの位置となり、1x 倍率ではこの位置に MapBillboard 画像が表示されます。The current position of that camera becomes the reference camera position; the position where the MapBillboard image appears at 1x scale.

アプリでユーザーが地図を縮小できるようにしている場合、画像のサイズも縮小されます。これは、1x 倍率の画像はリファレンス カメラの位置で固定されたままになりますが、地図の内部カメラは高度が上がるためです。If your app gives users the ability to zoom out on the map, the image decreases in size because the maps internal camera is rising in altitude while the image at 1x scale remains fixed at the reference camera's position.

NormalizedAnchorPointNormalizedAnchorPoint

NormalizedAnchorPoint は、MapBillboardLocation プロパティに固定される画像のポイントです。The NormalizedAnchorPoint is the point of the image that is anchored to the Location property of the MapBillboard. ポイント 0.5,1 は画像の下部中央になります。The point 0.5,1 is the bottom center of the image. MapBillboardLocation プロパティをマップ コントロールの中央に設定しているので、画像の下部中央がマップ コントロールの中央に固定されることになります。Because we've set the Location property of the MapBillboard to the center of the map's control, the bottom center of the image will be anchored at the center of the maps control. ポイントが中心になるように画像を表示するには、NormalizedAnchorPoint を 0.5,0.5 に設定します。If you want your image to appear centered directly over a point, set the NormalizedAnchorPoint to 0.5,0.5.

図形の追加Add a shape

マルチポイント図形を地図に表示するには、MapPolygon クラスを使います。Display a multi-point shape on the map by using the MapPolygon class. 次の例は、UWP の地図サンプルから抜粋したもので、地図に赤色のボックス (境界線は青色) を表示します。The following example, from the UWP map sample, displays a red box with blue border on the map.

public void HighlightArea()
{
    // Create MapPolygon.

    double centerLatitude = myMap.Center.Position.Latitude;
    double centerLongitude = myMap.Center.Position.Longitude;

    var mapPolygon = new MapPolygon
    {
        Path = new Geopath(new List<BasicGeoposition> {
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude+0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
                }),
        ZIndex = 1,
        FillColor = Colors.Red,
        StrokeColor = Colors.Blue,
        StrokeThickness = 3,
        StrokeDashed = false,
    };

    // Add MapPolygon to a layer on the map control.
    var MyHighlights = new List<MapElement>();

    MyHighlights.Add(mapPolygon);

    var HighlightsLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyHighlights
    };

    myMap.Layers.Add(HighlightsLayer);
}

線の追加Add a line

線を地図に表示するには、MapPolyline クラスを使います。Display a line on the map by using the MapPolyline class. 次の例は、UWP の地図サンプルから抜粋したもので、地図に破線を表示します。The following example, from the UWP map sample, displays a dashed line on the map.

public void DrawLineOnMap()
{
    // Create Polyline.

    double centerLatitude = myMap.Center.Position.Latitude;
    double centerLongitude = myMap.Center.Position.Longitude;
    var mapPolyline = new MapPolyline
    {
        Path = new Geopath(new List<BasicGeoposition> {
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
                }),
        StrokeColor = Colors.Black,
        StrokeThickness = 3,
        StrokeDashed = true,
    };

   // Add Polyline to a layer on the map control.

   var MyLines = new List<MapElement>();

   MyLines.Add(mapPolyline);

   var LinesLayer = new MapElementsLayer
   {
       ZIndex = 1,
       MapElements = MyLines
   };

   myMap.Layers.Add(LinesLayer);

}

XAML の追加Add XAML

XAML を使って、カスタム UI 要素を地図に表示します。Display custom UI elements on the map using XAML. XAML を地図に配置するには、XAML の位置と正規化されたアンカー ポイントを指定します。Position XAML on the map by specifying the location and normalized anchor point of the XAML.

  • SetLocation を呼び出して、XAML を地図に配置する位置を設定します。Set the location on the map where the XAML is placed by calling SetLocation.
  • SetNormalizedAnchorPoint を呼び出して、指定した位置に対応する XAML 上の相対位置を設定します。Set the relative location on the XAML that corresponds to the specified location by calling SetNormalizedAnchorPoint.

次の例では、シアトル市の地図を表示して、XAML の Border コントロールを追加し、スペース ニードルの場所を示しています。The following example shows a map of the city of Seattle and adds a XAML Border control to indicate the location of the Space Needle. また、そのエリアを地図の中央に配置し、拡大しています。It also centers the map over the area and zooms in. マップ コントロールを使用する方法に関する一般的な情報については、「 2D、3D、Streetside ビューでの地図の表示」をご覧ください。For general info about using the map control, see Display maps with 2D, 3D, and Streetside views.

private void displayXAMLButton_Click(object sender, RoutedEventArgs e)
{
   // Specify a known location.
   BasicGeoposition snPosition = new BasicGeoposition { Latitude = 47.620, Longitude = -122.349 };
   Geopoint snPoint = new Geopoint(snPosition);

   // Create a XAML border.
   Border border = new Border
   {
      Height = 100,
      Width = 100,
      BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue),
      BorderThickness = new Thickness(5),
   };

   // Center the map over the POI.
   MapControl1.Center = snPoint;
   MapControl1.ZoomLevel = 14;

   // Add XAML to the map.
   MapControl1.Children.Add(border);
   MapControl.SetLocation(border, snPoint);
   MapControl.SetNormalizedAnchorPoint(border, new Point(0.5, 0.5));
}

この例では、地図に青色の境界線が表示されます。This example displays a blue border on the map.

地図上の関心がある場所に表示された xaml のスクリーンショット

次の例では、データ バインディングを使って、ページの XAML マークアップで XAML UI 要素を直接追加する方法を示しています。The next examples show how to add XAML UI elements directly in the XAML markup of the page using data binding. コンテンツを表示する他の XAML 要素と同様に、ChildrenMapControl の既定のコンテンツ プロパティであり、XAML マークアップで明示的に指定する必要はありません。As with other XAML elements that display content, Children is the default content property of the MapControl and does not have to be specified explicitly in XAML markup.

次の例では、2 つの XAML コントロールを MapControl の暗黙的な子として表示する方法を示しています。This example shows how to display two XAML controls as implicit children of the MapControl. これらのコントロールは、地図上のデータがバインドされた場所に表示されます。These controls appear on the map at the data bound locations.

<maps:MapControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{x:Bind SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{x:Bind BellevueLocation}"/>
</maps:MapControl>

これらの場所を設定するには、分離コード ファイルでプロパティを使います。Set these locations by using a properties in your code-behind file.

public Geopoint SeattleLocation { get; set; }
public Geopoint BellevueLocation { get; set; }

次の例は、MapItemsControl に含まれる 2 つの XAML コントロールを表示する方法を示しています。これらのコントロールは、地図上のデータがバインドされた場所に表示されます。This example shows how to display two XAML controls contained within a MapItemsControl.These controls appear on the map at the data bound locations.

<maps:MapControl>
  <maps:MapItemsControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{x:Bind SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{x:Bind BellevueLocation}"/>
  </maps:MapItemsControl>
</maps:MapControl>

次の例では、MapItemsControl にバインドされている XAML 要素のコレクションが表示されます。This example displays a collection of XAML elements bound to a MapItemsControl.

<maps:MapControl x:Name="MapControl" MapTapped="MapTapped" MapDoubleTapped="MapTapped" MapHolding="MapTapped">
  <maps:MapItemsControl ItemsSource="{x:Bind LandmarkOverlays}">
      <maps:MapItemsControl.ItemTemplate>
          <DataTemplate>
              <StackPanel Background="Black" Tapped ="Overlay_Tapped">
                  <TextBlock maps:MapControl.Location="{Binding Location}" Text="{Binding Title}"
                    maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
              </StackPanel>
          </DataTemplate>
      </maps:MapItemsControl.ItemTemplate>
  </maps:MapItemsControl>
</maps:MapControl>

上の例の ItemsSource プロパティは、分離コード ファイルで IList 型のプロパティにバインドされます。The ItemsSource property in the example above is bound to a property of type IList in the code-behind file.

public sealed partial class Scenario1 : Page
{
    public IList LandmarkOverlays { get; set; }

    public MyClassConstructor()
    {
         SetLandMarkLocations();
         this.InitializeComponent();   
    }

    private void SetLandMarkLocations()
    {
        LandmarkOverlays = new List<MapElement>();

        var pikePlaceIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.610, Longitude = -122.342 }),
            Title = "Pike Place Market"
        };

        LandmarkOverlays.Add(pikePlaceIcon);

        var SeattleSpaceNeedleIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.6205, Longitude = -122.3493 }),
            Title = "Seattle Space Needle"
        };

        LandmarkOverlays.Add(SeattleSpaceNeedleIcon);
    }
}

レイヤーの使用Working with layers

このガイドの例では、要素を MapElementLayers コレクションに追加しています。The examples in this guide add elements to a MapElementLayers collection. その後、そのコレクションをマップ コントロールの Layers プロパティに追加する方法が示されています。Then they show how to add that collection to the Layers property of the map control. 以前のリリースでは、このガイドで、次のようにマップの要素を MapElements コレクションに追加する方法を示していました。In previous releases, this guide showed you how to add map elements to the MapElements collection as follows:

var pikePlaceIcon = new MapIcon
{
    Location = new Geopoint(new BasicGeoposition
    { Latitude = 47.610, Longitude = -122.342 }),
    NormalizedAnchorPoint = new Point(0.5, 1.0),
    ZIndex = 0,
    Title = "Pike Place Market"
};

myMap.MapElements.Add(pikePlaceIcon);

引き続き同じアプローチを使うこともできますが、その場合は新しいマップ レイヤー モデルの利点が活かされません。While you can still use this approach, you'll miss out on some of the advantages of the new map layer model. 要素をレイヤーにグループ化すると、各レイヤーを互いに独立して操作できます。By grouping your elements into layers, you can manipulate each layer independently from one another. たとえば、各レイヤーには独自のイベント セットがあるため、特定のレイヤーのイベントに応答し、そのイベントに固有の操作を実行することができます。For example, each layer has it's own set of events so you can respond to an event on a specific layer and perform an action specific to that event.

また、XAML を直接 MapLayer にバインドすることもできます。Also, you can bind XAML directly to a MapLayer. これは MapElements コレクションを使う場合にはできないことです。This is something that you can't do by using the MapElements collection.

これを実現するには、1 つの方法として、ビュー モデル クラス、XAML ページの分離コード、および XAML ページを使います。One way you could do this is by using a view model class, code-behind a XAML page, and a XAML page.

ビュー モデル クラスView model class

public class LandmarksViewModel
{
    public ObservableCollection<MapLayer> LandmarkLayer
        { get; } = new ObservableCollection<MapLayer>();

    public LandmarksViewModel()
    {
        var MyElements = new List<MapElement>();

        var pikePlaceIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.610, Longitude = -122.342 }),
            Title = "Pike Place Market"
        };

        MyElements.Add(pikePlaceIcon);

        var LandmarksLayer = new MapElementsLayer
        {
            ZIndex = 1,
            MapElements = MyElements
        };

        LandmarkLayer.Add(LandmarksLayer);         
    }

XAML ページの分離コードCode-behind a XAML page

ビュー モデル クラスを分離コード ページに結び付けます。Connect the view model class to your code behind page.

public LandmarksViewModel ViewModel { get; set; }

public myMapPage()
{
    this.InitializeComponent();
    this.ViewModel = new LandmarksViewModel();
}

XAML ページXAML page

XAML ページで、レイヤーを返すビュー モデル クラスのプロパティにバインドします。In your XAML page, bind to the property in your view model class that returns the layer.

<maps:MapControl
    x:Name="myMap" TransitFeaturesVisible="False" Loaded="MyMap_Loaded" Grid.Row="2"
    MapServiceToken="Your token" Layers="{x:Bind ViewModel.LandmarkLayer}"/>