diff --git a/docs/user-interface/controls/map.md b/docs/user-interface/controls/map.md index dad1273513..2e8e6786bc 100644 --- a/docs/user-interface/controls/map.md +++ b/docs/user-interface/controls/map.md @@ -173,6 +173,8 @@ For information about the `ItemsSource`, `ItemTemplate`, and `ItemTemplateSelect A can be displayed by adding it to a layout or page: +::: moniker range="=net-maui-7.0" + ```xaml @@ -183,6 +185,19 @@ A can be displayed by adding it to a lay > [!NOTE] > In XAML, an `xmlns` namespace definition should be added for the control. While this isn't required, it prevents a collision between the `Polygon` and `Polyline` types, which exist in both the and namespaces. +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + +``` + +::: moniker-end + The equivalent C# code is: ```csharp @@ -237,6 +252,8 @@ Map map = new Map The region of a map to display when a map is loaded can be set by passing a `MapSpan` argument to the constructor: +::: moniker range="=net-maui-7.0" + ```xaml ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + + + + + + 36.9628066 + -122.0194722 + + + 0.01 + 0.01 + + + + + +``` + +::: moniker-end + The equivalent C# code is: ```csharp @@ -512,6 +558,8 @@ In addition, the `Pin` class defines `MarkerClicked` and `InfoWindowClicked` eve A `Pin` can be added to a in XAML: +::: moniker range="=net-maui-7.0" + ```xaml in XAML: ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + + + + + + 36.9628066 + -122.0194722 + + + 0.01 + 0.01 + + + + + + + + + 36.9628066 + -122.0194722 + + + + + + + +``` + +::: moniker-end + This XAML creates a object that shows the region that is specified by the `MapSpan` object. The `MapSpan` object is centered on the latitude and longitude represented by a `Location` object, which extends 0.01 latitude and longitude degrees. A `Pin` object is added to the `Map.Pins` collection, and drawn on the at the location specified by its `Location` property. For information about the `Location` class, see [Location and distance](#location-and-distance). For information about passing arguments in XAML to objects that lack default constructors, see [Pass arguments in XAML](~/xaml/pass-arguments.md). The equivalent C# code is: @@ -652,6 +743,8 @@ The class defines the following bindable A can be populated with pins by using data binding to bind its `ItemsSource` property to an `IEnumerable` collection: +::: moniker range="=net-maui-7.0" + ```xaml @@ -672,6 +765,32 @@ A can be populated with pins by using da ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + ... + + + + + + + + ... + + +``` + +::: moniker-end + The `ItemsSource` property data binds to the `Positions` property of the connected viewmodel, which returns an `ObservableCollection` of `Position` objects, which is a custom type. Each `Position` object defines `Address` and `Description` properties, of type `string`, and a `Location` property, of type `Location`. The appearance of each item in the `IEnumerable` collection is defined by setting the `ItemTemplate` property to a that contains a `Pin` object that data binds to appropriate properties. @@ -684,6 +803,8 @@ The following screenshot shows a display The appearance of each item in the `IEnumerable` collection can be chosen at runtime, based on the item value, by setting the `ItemTemplateSelector` property to a : +::: moniker range="=net-maui-7.0" + ```xaml ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + + + + + + + + + + + + + + + + ... + + ... + + +``` + +::: moniker-end + The following example shows the `MapItemTemplateSelector` class: ```csharp @@ -770,6 +930,8 @@ The `Circle` class defines the following bindable properties: A `Polygon` object can be added to a map by instantiating it and adding it to the map's `MapElements` collection: +::: moniker range="=net-maui-7.0" + ```xaml ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + + + + + + 47.6458676 + -122.1356007 + + + + + 47.6458097 + -122.142789 + + + ... + + + + + +``` + +::: moniker-end + The equivalent C# code is: ```csharp @@ -837,6 +1035,8 @@ The `StrokeColor` and `StrokeWidth` properties are specified to set the polygon' A `Polyline` object can be added to a map by instantiating it and adding it to the map's `MapElements` collection: +::: moniker range="=net-maui-7.0" + ```xaml ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + + + + + + 47.6381401 + -122.1317367 + + + + + 47.6381473 + -122.1350841 + + + ... + + + + + +``` + +::: moniker-end + +The equivalent C# code is: + ```csharp using Microsoft.Maui.Controls.Maps; using Microsoft.Maui.Maps; @@ -897,6 +1134,8 @@ The `StrokeColor` and `StrokeWidth` properties are specified to set the line app A `Circle` object can be added to a map by instantiating it and adding it to the map's `MapElements` collection: +::: moniker range="=net-maui-7.0" + ```xaml ``` +::: moniker-end + +::: moniker range=">=net-maui-8.0" + +```xaml + + + + + + + + 37.79752 + -122.40183 + + + + + + + 250 + + + + + + + +``` + +::: moniker-end + The equivalent C# code is: ```csharp