menu

MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class MapShapeLayer - MAUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class MapShapeLayer

    The shape layer in which geographical rendering is done.

    The actual geographical rendering is done here using the ShapesSource property. The shape source can be set as the GeoJSON file or shapefile from the local file, URL, Stream or Resource.

    The ShapeDataField property is used to refer the unique field name in the GeoJSON file or shapefile to identify each shapes and map with the respective data in the data source.

    By default, the value specified for the ShapeDataField in the GeoJSON or shapefile will be used in the elements like data labels, tooltip, and legend for their respective shapes.

    However, it is possible to keep a data source and customize these elements based on the requirement. The value of the ShapeDataField will be used to map with the respective data returned in
    PrimaryValuePath from the data source.

    Once the above mapping is done, you can customize the elements data label, color mapping etc.

    Inheritance
    System.Object
    MapLayer
    MapShapeLayer
    Implements
    IShapeLayer
    Inherited Members
    MapLayer.EnableZoomingAnimation
    MapLayer.EnableZoomingAnimationProperty
    MapLayer.Markers
    MapLayer.MarkerSelected
    MapLayer.MarkersProperty
    MapLayer.MarkerTemplate
    MapLayer.MarkerTemplateProperty
    MapLayer.MarkerTooltipSettings
    MapLayer.MarkerTooltipSettingsProperty
    MapLayer.MarkerTooltipTemplate
    MapLayer.MarkerTooltipTemplateProperty
    MapLayer.Panning
    MapLayer.ShowMarkerTooltip
    MapLayer.ShowMarkerTooltipProperty
    MapLayer.Sublayers
    MapLayer.SublayersProperty
    MapLayer.Tapped
    MapLayer.ZoomLevelChanging
    MapLayer.ZoomPanBehavior
    MapLayer.ZoomPanBehaviorProperty
    Namespace: Syncfusion.Maui.Maps
    Assembly: Syncfusion.Maui.Maps.dll
    Syntax
    public class MapShapeLayer : MapLayer, IThemeElement, IShapeLayer
    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
             <map:MapShapeLayer.ShapeTooltipTemplate>
                 <DataTemplate>
                     <HorizontalStackLayout>
                         <Label Text="{Binding CountryName}"
                                TextColor="White" />
                         <Label Text=":"
                                TextColor="White"
                                Margin="2,0,2,0"/>
                         <Label Text="{Binding Density}"
                                TextColor="White" />
                         <Label Text="per sq. km."
                                TextColor="White"
                                Margin="2,0,0,0" />
                     </HorizontalStackLayout>
                 </DataTemplate>
             </map:MapShapeLayer.ShapeTooltipTemplate>
    
             <map:MapShapeLayer.BubbleTooltipTemplate>
                 <DataTemplate>
                     <HorizontalStackLayout>
                         <Label Text="{Binding CountryName}"
                                TextColor="White" />
                         <Label Text=":"
                                TextColor="White"
                                Margin="2,0,2,0"/>
                         <Label Text="{Binding Density}"
                                TextColor="White" />
                         <Label Text="per sq. km."
                                TextColor="White"
                                Margin="2,0,0,0" />
                     </HorizontalStackLayout>
                 </DataTemplate>
             </map:MapShapeLayer.BubbleTooltipTemplate>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    layer.ShapeTooltipTemplate = CreateTooltipTemplate();
    maps.Layer = layer;
    this.Content = maps;
    
    private DataTemplate CreateTooltipTemplate()
    {
    return new DataTemplate(() =>
    {
       var layout = new HorizontalStackLayout();
       var label1 = new Label
       {
           TextColor = Colors.White
       };
       Binding binding1 = new Binding();
       binding1.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(CountryDensity.CountryName);
      label1.SetBinding(Label.TextProperty, binding1);
       var label2 = new Label
       {
           Text = ":",
           TextColor = Colors.White,
          Margin = new Thickness(2, 0, 2, 0)
       };
       var label3 = new Label
       {
           TextColor = Colors.White,
       };
       Binding binding2 = new Binding();
       binding2.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(CountryDensity.Density);
       label3.SetBinding(Label.TextProperty, binding2);
       var label4 = new Label
       {
           Text = "per sq. km.",
           TextColor = Colors.White,
           Margin = new Thickness(2, 0, 0, 0)
       };
       layout.Children.Add(label1);
       layout.Children.Add(label2);
       layout.Children.Add(label3);
       layout.Children.Add(label4);
       return layout;
    });
    }
    
    // Model.
    public class CountryDensity
    {
        public string CountryName { get; set; }
        public double Density { get; set; }
    
        public CountryDensity(string countryName, double density)
        {
            this.CountryName = countryName;
            this.Density = density;
        }
    }
    
    // View Model.
    public class RangeViewModel
    {
        public ObservableCollection<CountryDensity> WorldPopulationDensity { get; set; }
    
        public RangeViewModel()
        {
            WorldPopulationDensity = new ObservableCollection<CountryDensity>()
            {
               new CountryDensity("Monaco", 19341),
               new CountryDensity("Macao", 21055),
               new CountryDensity("Singapore", 8041),
               new CountryDensity("Hong kong", 6677),
               new CountryDensity("China", 149)
            };
        }
    }    

    Constructors

    MapShapeLayer()

    Initializes a new instance of the MapShapeLayer class.

    Declaration
    public MapShapeLayer()

    Fields

    BubbleSettingsProperty

    Identifies the BubbleSettings bindable property.

    Declaration
    public static readonly BindableProperty BubbleSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for BubbleSettings bindable property.

    BubbleTooltipSettingsProperty

    Identifies the BubbleTooltipSettings bindable property.

    Declaration
    public static readonly BindableProperty BubbleTooltipSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for BubbleTooltipSettings bindable property.

    BubbleTooltipTemplateProperty

    Identifies the BubbleTooltipTemplate bindable property.

    Declaration
    public static readonly BindableProperty BubbleTooltipTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for BubbleTooltipTemplate bindable property.

    ColorMappingsProperty

    Identifies the ColorMappings bindable property.

    Declaration
    public static readonly BindableProperty ColorMappingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ColorMappings bindable property.

    DataLabelSettingsProperty

    Identifies the DataLabelSettings bindable property.

    Declaration
    public static readonly BindableProperty DataLabelSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for DataLabelSettings bindable property.

    DataSourceProperty

    Identifies the DataSource bindable property.

    Declaration
    public static readonly BindableProperty DataSourceProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for DataSource bindable property.

    EnableSelectionProperty

    Identifies the EnableSelection bindable property.

    Declaration
    public static readonly BindableProperty EnableSelectionProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for EnableSelection bindable property.

    GeometryProperty

    Identifies the Geometry bindable property.

    Declaration
    public static readonly BindableProperty GeometryProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Geometry bindable property.

    LegendProperty

    Identifies the Legend bindable property.

    Declaration
    public static readonly BindableProperty LegendProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Legend bindable property.

    PrimaryValuePathProperty

    Identifies the PrimaryValuePath bindable property.

    Declaration
    public static readonly BindableProperty PrimaryValuePathProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for PrimaryValuePath bindable property.

    SelectedItemsProperty

    Identifies the SelectedItems bindable property.

    Declaration
    public static readonly BindableProperty SelectedItemsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectedItems bindable property.

    SelectedShapeFillProperty

    Identifies the SelectedShapeFill bindable property.

    Declaration
    public static readonly BindableProperty SelectedShapeFillProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectedShapeFill bindable property.

    SelectedShapeStrokeProperty

    Identifies the SelectedShapeStroke bindable property.

    Declaration
    public static readonly BindableProperty SelectedShapeStrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectedShapeStroke bindable property.

    SelectedShapeStrokeThicknessProperty

    Identifies the SelectedShapeStrokeThickness bindable property.

    Declaration
    public static readonly BindableProperty SelectedShapeStrokeThicknessProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectedShapeStrokeThickness bindable property.

    SelectionModeProperty

    Identifies the SelectionMode bindable property.

    Declaration
    public static readonly BindableProperty SelectionModeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SelectionMode bindable property.

    ShapeColorValuePathProperty

    Identifies the ShapeColorValuePath bindable property.

    Declaration
    public static readonly BindableProperty ShapeColorValuePathProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeColorValuePath bindable property.

    ShapeDataFieldProperty

    Identifies the ShapeDataField bindable property.

    Declaration
    public static readonly BindableProperty ShapeDataFieldProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeDataField bindable property.

    ShapeFillProperty

    Identifies the ShapeFill bindable property.

    Declaration
    public static readonly BindableProperty ShapeFillProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeFill bindable property.

    ShapeHoverFillProperty

    Identifies the ShapeHoverFill bindable property.

    Declaration
    public static readonly BindableProperty ShapeHoverFillProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeHoverFill bindable property.

    ShapeHoverStrokeProperty

    Identifies the ShapeHoverStroke bindable property.

    Declaration
    public static readonly BindableProperty ShapeHoverStrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeHoverStroke bindable property.

    ShapeHoverStrokeThicknessProperty

    Identifies the ShapeHoverStrokeThickness bindable property.

    Declaration
    public static readonly BindableProperty ShapeHoverStrokeThicknessProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeHoverStrokeThickness bindable property.

    ShapesSourceProperty

    Identifies the ShapesSource bindable property.

    Declaration
    public static readonly BindableProperty ShapesSourceProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapesSource bindable property.

    ShapeStrokeProperty

    Identifies the ShapeStroke bindable property.

    Declaration
    public static readonly BindableProperty ShapeStrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeStroke bindable property.

    ShapeStrokeThicknessProperty

    Identifies the ShapeStrokeThickness bindable property.

    Declaration
    public static readonly BindableProperty ShapeStrokeThicknessProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeStrokeThickness bindable property.

    ShapeTooltipSettingsProperty

    Identifies the ShapeTooltipSettings bindable property.

    Declaration
    public static readonly BindableProperty ShapeTooltipSettingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeTooltipSettings bindable property.

    ShapeTooltipTemplateProperty

    Identifies the ShapeTooltipTemplate bindable property.

    Declaration
    public static readonly BindableProperty ShapeTooltipTemplateProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShapeTooltipTemplate bindable property.

    ShowBubblesProperty

    Identifies the ShowBubbles bindable property.

    Declaration
    public static readonly BindableProperty ShowBubblesProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShowBubbles bindable property.

    ShowBubbleTooltipProperty

    Identifies the ShowBubbleTooltip bindable property.

    Declaration
    public static readonly BindableProperty ShowBubbleTooltipProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShowBubbleTooltip bindable property.

    ShowDataLabelsProperty

    Identifies the ShowDataLabels bindable property.

    Declaration
    public static readonly BindableProperty ShowDataLabelsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShowDataLabels bindable property.

    ShowShapeTooltipProperty

    Identifies the ShowShapeTooltip bindable property.

    Declaration
    public static readonly BindableProperty ShowShapeTooltipProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ShowShapeTooltip bindable property.

    Properties

    BubbleSettings

    Gets or sets the map bubble settings to customizing the bubbles of map shapes.

    Declaration
    public MapBubbleSettings BubbleSettings { get; set; }
    Property Value
    Type Description
    MapBubbleSettings

    The bubble settings. The default is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    BubbleTooltipSettings

    Gets or sets bubble tooltip settings that allows to customize the bubble tooltip appearance.

    Declaration
    public MapTooltipSettings BubbleTooltipSettings { get; set; }
    Property Value
    Type Description
    MapTooltipSettings

    This property takes MapTooltipSettings instance as value and its default value is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
             <map:MapShapeLayer.BubbleTooltipSettings>
                 <map:MapTooltipSettings Background="White"
                                         Padding="2">
                        <map:MapTooltipSettings.TextStyle>
                            <map:MapLabelStyle FontSize="12"
                                               TextColor="Black"
                                               FontAttributes="Italic" />
                        </map:MapTooltipSettings.TextStyle>
                 </map:MapTooltipSettings>
             </map:MapShapeLayer.BubbleTooltipSettings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    layer.BubbleTooltipSettings = new MapTooltipSettings()
    {
       Background = Colors.White,
       Padding = new Thickness(2),
       TextStyle = new MapLabelStyle()
       {
           FontSize = 12,
           TextColor = Colors.Black,
           FontAttributes = FontAttributes.Italic
       }
    };
    maps.Layer = layer;
    this.Content = maps;

    BubbleTooltipTemplate

    Gets or sets the data template to customize the visual representation of bubble tooltip.

    Declaration
    public DataTemplate BubbleTooltipTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.DataTemplate

    The template for the bubble tooltip. It also supports DataTemplateSelector. The default is null.

    Remarks

    The corresponding MapTooltipInfo of the current bubble is the BindingContext of BubbleTooltipTemplate.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
             <map:MapShapeLayer.ShapeTooltipTemplate>
                 <DataTemplate>
                     <HorizontalStackLayout>
                         <Label Text="{Binding DataItem.CountryName}"
                                TextColor="White" />
                         <Label Text=":"
                                TextColor="White"
                                Margin="2,0,2,0"/>
                         <Label Text="{Binding DataItem.Density}"
                                TextColor="White" />
                         <Label Text="per sq. km."
                                TextColor="White"
                                Margin="2,0,0,0" />
                     </HorizontalStackLayout>
                 </DataTemplate>
             </map:MapShapeLayer.ShapeTooltipTemplate>
    
             <map:MapShapeLayer.BubbleTooltipTemplate>
                 <DataTemplate>
                     <HorizontalStackLayout>
                         <Label Text="{Binding DataItem.CountryName}"
                                TextColor="White" />
                         <Label Text=":"
                                TextColor="White"
                                Margin="2,0,2,0"/>
                         <Label Text="{Binding DataItem.Density}"
                                TextColor="White" />
                         <Label Text="per sq. km."
                                TextColor="White"
                                Margin="2,0,0,0" />
                     </HorizontalStackLayout>
                 </DataTemplate>
             </map:MapShapeLayer.BubbleTooltipTemplate>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    layer.BubbleTooltipTemplate = CreateTooltipTemplate();
    maps.Layer = layer;
    this.Content = maps;
    
     private DataTemplate CreateTooltipTemplate()
    {
    return new DataTemplate(() =>
    {
       var layout = new HorizontalStackLayout();
       var label1 = new Label
       {
           TextColor = Colors.White
       };
       Binding binding1 = new Binding();
       binding1.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(CountryDensity.CountryName);
      label1.SetBinding(Label.TextProperty, binding1);
       var label2 = new Label
       {
           Text = ":",
           TextColor = Colors.White,
          Margin = new Thickness(2, 0, 2, 0)
       };
       var label3 = new Label
       {
           TextColor = Colors.White,
       };
       Binding binding2 = new Binding();
       binding2.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(CountryDensity.Density);
       label3.SetBinding(Label.TextProperty, binding2);
       var label4 = new Label
       {
           Text = "per sq. km.",
           TextColor = Colors.White,
           Margin = new Thickness(2, 0, 0, 0)
       };
       layout.Children.Add(label1);
       layout.Children.Add(label2);
       layout.Children.Add(label3);
       layout.Children.Add(label4);
       return layout;
    });
    }

    ColorMappings

    Gets or sets the collection of ColorMapping which specifes shape's color based on the data.

    Declaration
    public ObservableCollection<ColorMapping> ColorMappings { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<ColorMapping>

    ObservableCollection of ColorMapping. The default value is empty collection.

    Remarks

    It provides option to set the shape color based on the specific Value or the range of values which falls between From and To.

    Based on the values, legend items will be rendered. The text of legend item will be Text of the ColorMapping.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    maps.Layer = layer;
    this.Content = maps;

    DataLabelSettings

    Gets or sets the data label settings to customizing the data labels of map shapes.

    Declaration
    public MapDataLabelSettings DataLabelSettings { get; set; }
    Property Value
    Type Description
    MapDataLabelSettings

    The data label settings. The default is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    maps.Layer = layer;
    this.Content = maps;

    DataSource

    Gets or sets the data source value to the shape layer of the maps. Its used to render bubbles, data labels, shape colors, tooltip in their respective shape's coordinates.

    Declaration
    public object DataSource { get; set; }
    Property Value
    Type Description
    System.Object

    The collection of data source. The default is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.BindingContext>
           <local:RangeViewModel/>
       </map:SfMaps.BindingContext>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    maps.Layer = layer;
    this.Content = maps;
    // Model.
    public class CountryDensity
    {
        public string CountryName { get; set; }
        public double Density { get; set; }
    
        public CountryDensity(string countryName, double density)
        {
            this.CountryName = countryName;
            this.Density = density;
        }
    }
    
    // View Model.
    public class RangeViewModel
    {
        public ObservableCollection<CountryDensity> WorldPopulationDensity { get; set; }
    
        public RangeViewModel()
        {
            WorldPopulationDensity = new ObservableCollection<CountryDensity>()
            {
               new CountryDensity("Monaco", 19341),
               new CountryDensity("Macao", 21055),
               new CountryDensity("Singapore", 8041),
               new CountryDensity("Hong kong", 6677),
               new CountryDensity("China", 149)
            };
        }
    }    

    EnableSelection

    Gets or sets a value indicate whether the selection is enabled or not.

    Declaration
    public bool EnableSelection { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if shape selection is enabled; otherwise, false. The default value is false.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    Geometry

    Gets or sets geometry type of shape file layer.

    Declaration
    public MapGeometryType Geometry { get; set; }
    Property Value
    Type Description
    MapGeometryType

    One of the enumeration values that specifies the geometry type of the shape file layer. The default is GeographicPoints.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True"
                             ShowBubbleTooltip="True"
                             Geometry="GeographicPoints">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
             <map:MapShapeLayer.BubbleTooltipSettings>
                 <map:MapTooltipSettings Background="White"
                                         Padding="2">
                        <map:MapTooltipSettings.TextStyle>
                            <map:MapLabelStyle FontSize="12"
                                               TextColor="Black"
                                               FontAttributes="Italic" />
                        </map:MapTooltipSettings.TextStyle>
                 </map:MapTooltipSettings>
             </map:MapShapeLayer.BubbleTooltipSettings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    layer.Geometry = MapGeometryType.GeographicPoints;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    layer.BubbleTooltipSettings = new MapTooltipSettings()
    {
       Background = Colors.White,
       Padding = new Thickness(2),
       TextStyle = new MapLabelStyle()
       {
           FontSize = 12,
           TextColor = Colors.Black,
           FontAttributes = FontAttributes.Italic
       }
    };
    maps.Layer = layer;
    this.Content = maps;

    Legend

    Gets or sets the map legend to convey clear information on data plotted in the map using shape and bubble colors.

    Declaration
    public MapLegend Legend { get; set; }
    Property Value
    Type Description
    MapLegend

    The map legend for shape or bubble. The default is null.

    Remarks

    Information provided in the legend helps to identify the data rendered in the map shapes or bubbles.

    **Legend for shape**

    Set SourceType to Shape to show legend for shapes.

    If ColorMappings is provided, then Color and Text will be used for the legend item's icon and the legend item's text respectively.

    **Legend for bubble**

    Set SourceType to Bubble to show legend for bubbles.

    If ColorMappings is provided, then Color and Text will be used for the legend item's icon and the legend item's text respectively.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Shape" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    PrimaryValuePath

    Gets or sets primary value for the data in the DataSource collection.

    Declaration
    public string PrimaryValuePath { get; set; }
    Property Value
    Type Description
    System.String

    The primary value path of the DataSource. The default value is string.Empty.

    Remarks

    This primary value will be mapped with the ShapeDataField value in the respective shape detail in the GeoJSON file or shapefile. This mapping will then be used in the rendering of bubbles, data labels, shape colors, tooltip in their respective shape's coordinates.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.BindingContext>
           <local:RangeViewModel/>
       </map:SfMaps.BindingContext>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    maps.Layer = layer;
    this.Content = maps;
    // Model.
    public class CountryDensity
    {
        public string CountryName { get; set; }
        public double Density { get; set; }
    
        public CountryDensity(string countryName, double density)
        {
            this.CountryName = countryName;
            this.Density = density;
        }
    }
    
    // View Model.
    public class RangeViewModel
    {
        public ObservableCollection<CountryDensity> WorldPopulationDensity { get; set; }
    
        public RangeViewModel()
        {
            WorldPopulationDensity = new ObservableCollection<CountryDensity>()
            {
               new CountryDensity("Monaco", 19341),
               new CountryDensity("Macao", 21055),
               new CountryDensity("Singapore", 8041),
               new CountryDensity("Hong kong", 6677)
            };
        }
    }    

    SelectedItems

    Gets or sets to create instance of shape layer collection.

    Declaration
    public ObservableCollection<object> SelectedItems { get; set; }
    Property Value
    Type
    System.Collections.ObjectModel.ObservableCollection<System.Object>

    SelectedShapeFill

    Gets or sets the brush that paints the interior of the selected shape.

    Declaration
    public Brush SelectedShapeFill { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map selected shape interior is painted.

    Remarks
    • If SelectedShapeFill is Microsoft.Maui.Graphics.Colors.Transparent, then the selection effect will be disabled.
    • If SelectedShapeFill is null, then the saturated ShapeFill color will be applied when selecting the shape.
    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    SelectedShapeStroke

    Gets or sets the Brush that specifies how the selected shape outline to be painted.

    Declaration
    public Brush SelectedShapeStroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map selected shape outline is painted.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    SelectedShapeStrokeThickness

    Gets or sets the value that specifies the width of the selected shape stroke outline.

    Declaration
    public double SelectedShapeStrokeThickness { get; set; }
    Property Value
    Type Description
    System.Double

    It specifies the width of the map selected shape stroke outline. The default value is 1.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    SelectionMode

    Gets or sets the selection type of the shape.

    Declaration
    public MapSelectionMode SelectionMode { get; set; }
    Property Value
    Type
    MapSelectionMode

    ShapeColorValuePath

    Gets or sets the field value to be fetched from data for each shape used to determine the shape color in the shape layer of the maps.

    Declaration
    public string ShapeColorValuePath { get; set; }
    Property Value
    Type Description
    System.String

    The color value path of shapes. The default value is string.Empty.

    Remarks

    If the field represents direct color value, then the color is applied to shape; otherwise, the shape color applied based on the specific Value or the range of values which falls between From and To in the ColorMappings.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    maps.Layer = layer;
    this.Content = maps;

    ShapeDataField

    Gets or sets the primary field name in the GeoJSON file or shapefile to identify each shape.

    Declaration
    public string ShapeDataField { get; set; }
    Property Value
    Type Description
    System.String

    The shape data field value. The default value is string.Empty.

    Remarks

    It is used to refer the field name in the GeoJSON file or shapefile to identify each shape and map that shape with the respective data in the data source.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.BindingContext>
           <local:RangeViewModel/>
       </map:SfMaps.BindingContext>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    maps.Layer = layer;
    this.Content = maps;
    // Model.
    public class CountryDensity
    {
        public string CountryName { get; set; }
        public double Density { get; set; }
    
        public CountryDensity(string countryName, double density)
        {
            this.CountryName = countryName;
            this.Density = density;
        }
    }
    
    // View Model.
    public class RangeViewModel
    {
        public ObservableCollection<CountryDensity> WorldPopulationDensity { get; set; }
    
        public RangeViewModel()
        {
            WorldPopulationDensity = new ObservableCollection<CountryDensity>()
            {
               new CountryDensity("Monaco", 19341),
               new CountryDensity("Macao", 21055),
               new CountryDensity("Singapore", 8041),
               new CountryDensity("Hong kong", 6677)
            };
        }
    }    

    ShapeFill

    Gets or sets the Brush that paints the interior of the shape.

    Declaration
    public Brush ShapeFill { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map shape interior is painted.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    maps.Layer = layer;
    this.Content = maps;

    ShapeHoverFill

    Gets or sets the Brush that paints the interior of the mouse hovered shape on desktop.

    Declaration
    public Brush ShapeHoverFill { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map shape interior is painted while hovered.

    Remarks
    • If ShapeHoverFill is Microsoft.Maui.Graphics.Colors.Transparent, then the hover effect will be disabled.
    • If ShapeHoverFill is null, then the saturated ShapeFill color will be applied when hovering the shape.
    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    ShapeHoverStroke

    Gets or sets the Brush that specifies how the mouse hovered shape outline to be painted on desktop.

    Declaration
    public Brush ShapeHoverStroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map shape outline is painted while hovered.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    ShapeHoverStrokeThickness

    Gets or sets the value that specifies the width of the mouse hovered shape stroke outline on desktop.

    Declaration
    public double ShapeHoverStrokeThickness { get; set; }
    Property Value
    Type Description
    System.Double

    It specifies the width of the map shape stroke outline while hovered. The default value is double.NaN.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    ShapesSource

    Gets or sets the source of the map shapes. The shape source can be set as the GeoJSON file or shapefile from the local file, URL, stream or embedded resource path.

    Declaration
    public MapSource ShapesSource { get; set; }
    Property Value
    Type Description
    MapSource

    The MapSource representing the shape source. The default is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer" 
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"/>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    maps.Layer = layer;
    this.Content = maps;

    ShapeStroke

    Gets or sets the Brush that specifies how the shape outline to be painted.

    Declaration
    public Brush ShapeStroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map shape outline is painted.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    maps.Layer = layer;
    this.Content = maps;

    ShapeStrokeThickness

    Gets or sets the value that specifies the width of the shape stroke outline.

    Declaration
    public double ShapeStrokeThickness { get; set; }
    Property Value
    Type Description
    System.Double

    It specifies the width of the map shape stroke outline. The default value is 0.5.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    maps.Layer = layer;
    this.Content = maps;

    ShapeTooltipSettings

    Gets or sets shape tooltip settings that allows to customize the shape tooltip appearance.

    Declaration
    public MapTooltipSettings ShapeTooltipSettings { get; set; }
    Property Value
    Type Description
    MapTooltipSettings

    This property takes MapTooltipSettings instance as value and its default value is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer x:Name="layer"
                               ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                               ShapeFill="Gray"
                               ShapeStroke="White"
                               ShapeStrokeThickness="2"
                               DataSource="{Binding WorldPopulationDensity}"
                               ShapeDataField="name"
                               PrimaryValuePath="CountryName"
                               ShapeColorValuePath="Density"
                               ShowDataLabels="True"
                               ShowBubbles="True"
                               EnableSelection="True"
                               SelectedShapeFill="Yellow"
                               SelectedShapeStroke="Red"
                               SelectedShapeStrokeThickness="6"
                               ShapeHoverFill="DarkGray"
                               ShapeHoverStroke="Yellow"
                               ShapeHoverStrokeThickness="4"
                               ShowShapeTooltip="True">
    
                <map:MapShapeLayer.ColorMappings>
                    <map:RangeColorMapping Color="#809fff"
                                           From="0"
                                           To="100"
                                           Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff"
                                           From="100"
                                           To="500"
                                           Text="100-500" />
                    <map:RangeColorMapping Color="#0039e6"
                                           From="500"
                                           To="1000"
                                           Text="500-1000" />
                    <map:RangeColorMapping Color="#002db3"
                                           From="1000"
                                           To="5000"
                                           Text="1000-5000" />
                    <map:RangeColorMapping Color="#001a66"
                                           From="5000"
                                           To="50000"
                                           Text="5000-50000" />
                </map:MapShapeLayer.ColorMappings>
    
                <map:MapShapeLayer.DataLabelSettings>
                    <map:MapDataLabelSettings DataLabelPath="Density" />
                </map:MapShapeLayer.DataLabelSettings>
    
                <map:MapShapeLayer.BubbleSettings>
                    <map:MapBubbleSettings SizeValuePath="Density" />
                </map:MapShapeLayer.BubbleSettings>
    
                <map:MapShapeLayer.Legend>
                    <map:MapLegend SourceType="Bubble" />
                </map:MapShapeLayer.Legend>
    
                <map:MapShapeLayer.ShapeTooltipSettings>
                    <map:MapTooltipSettings Background="White"
                                            Padding="2">
                        <map:MapTooltipSettings.TextStyle>
                            <map:MapLabelStyle FontSize="12"
                                               TextColor="Black"
                                               FontAttributes="Italic" />
                        </map:MapTooltipSettings.TextStyle>
                    </map:MapTooltipSettings>
                </map:MapShapeLayer.ShapeTooltipSettings>
    
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    layer.ShapeTooltipSettings = new MapTooltipSettings()
    {
       Background = Colors.White,
       Padding = new Thickness(2),
       TextStyle = new MapLabelStyle()
       {
           FontSize = 12,
           TextColor = Colors.Black,
           FontAttributes = FontAttributes.Italic
       }
    };
    maps.Layer = layer;
    this.Content = maps;

    ShapeTooltipTemplate

    Gets or sets the data template to customize the visual representation of shape tooltip.

    Declaration
    public DataTemplate ShapeTooltipTemplate { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.DataTemplate

    The template for the shape tooltip. It also supports DataTemplateSelector. The default is null.

    Remarks

    The corresponding MapTooltipInfo of the current shape is the BindingContext of ShapeTooltipTemplate.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
             <map:MapShapeLayer.ShapeTooltipTemplate>
                 <DataTemplate>
                     <HorizontalStackLayout>
                         <Label Text="{Binding DataItem.CountryName}"
                                TextColor="White" />
                         <Label Text=":"
                                TextColor="White"
                                Margin="2,0,2,0"/>
                         <Label Text="{Binding DataItem.Density}"
                                TextColor="White" />
                         <Label Text="per sq. km."
                                TextColor="White"
                                Margin="2,0,0,0" />
                     </HorizontalStackLayout>
                 </DataTemplate>
             </map:MapShapeLayer.ShapeTooltipTemplate>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    layer.ShapeTooltipTemplate = CreateTooltipTemplate();
    maps.Layer = layer;
    this.Content = maps;
    
     private DataTemplate CreateTooltipTemplate()
    {
    return new DataTemplate(() =>
    {
       var layout = new HorizontalStackLayout();
       var label1 = new Label
       {
           TextColor = Colors.White
       };
       Binding binding1 = new Binding();
       binding1.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(CountryDensity.CountryName);
      label1.SetBinding(Label.TextProperty, binding1);
       var label2 = new Label
       {
           Text = ":",
           TextColor = Colors.White,
          Margin = new Thickness(2, 0, 2, 0)
       };
       var label3 = new Label
       {
           TextColor = Colors.White,
       };
       Binding binding2 = new Binding();
       binding2.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(CountryDensity.Density);
       label3.SetBinding(Label.TextProperty, binding2);
       var label4 = new Label
       {
           Text = "per sq. km.",
           TextColor = Colors.White,
           Margin = new Thickness(2, 0, 0, 0)
       };
       layout.Children.Add(label1);
       layout.Children.Add(label2);
       layout.Children.Add(label3);
       layout.Children.Add(label4);
       return layout;
    });
    }

    ShowBubbles

    Gets or sets a value indicating whether bubbles will be showed or not.

    Declaration
    public bool ShowBubbles { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if shown bubbles; otherwise, false. The default value is false.

    Remarks

    ShowBubbles decides whether the bubbles to be shown or not.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    ShowBubbleTooltip

    Gets or sets a value indicating whether the bubble tooltip will be showed or not.

    Declaration
    public bool ShowBubbleTooltip { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if bubble tooltip is shown; otherwise, false. The default value is false.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    layer.ShowBubbleTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    ShowDataLabels

    Gets or sets a value indicating whether data labels will be showed or not.

    Declaration
    public bool ShowDataLabels { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if the data labels shown; otherwise, false. The default value is false.

    Remarks

    ShowDataLabels decides whether the data labels to be shown or not.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    maps.Layer = layer;
    this.Content = maps;

    ShowShapeTooltip

    Gets or sets a value indicating whether the shape tooltip will be showed or not.

    Declaration
    public bool ShowShapeTooltip { get; set; }
    Property Value
    Type Description
    System.Boolean

    true if shape tooltip is shown; otherwise, false. The default value is false.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density"
                             ShowDataLabels="True"
                             ShowBubbles="True"
                             EnableSelection="True"
                             SelectedShapeFill="Yellow"
                             SelectedShapeStroke="Red"
                             SelectedShapeStrokeThickness="6"
                             ShapeHoverFill="DarkGray"
                             ShapeHoverStroke="Yellow"
                             ShapeHoverStrokeThickness="4"
                             ShowShapeTooltip="True">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
             <map:MapShapeLayer.DataLabelSettings>
                 <map:MapDataLabelSettings DataLabelPath="Density"/>
             </map:MapShapeLayer.DataLabelSettings>
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="Density" />
             </map:MapShapeLayer.BubbleSettings>
    
             <map:MapShapeLayer.Legend>
                 <map:MapLegend SourceType="Bubble" />
             </map:MapShapeLayer.Legend>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    layer.ShowDataLabels = true;
    layer.ShowBubbles = true;
    layer.SelectedShapeFill=Colors.Yellow;
    layer.SelectedShapeStroke = Colors.Red;
    layer.SelectedShapeStrokeThickness = 6;
    layer.EnableSelection = true;
    layer.ShapeHoverFill = Colors.DarkGray;
    layer.ShapeHoverStroke = Colors.Yellow;
    layer.ShapeHoverStrokeThickness = 4;
    layer.ShowShapeTooltip = true;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    layer.DataLabelSettings = new MapDataLabelSettings()
    {
        DataLabelPath = "Density"
    };
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "Density"
    };
    layer.BubbleSettings = bubbleSetting;
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Shape;
    layer.Legend = legendSet;
    maps.Layer = layer;
    this.Content = maps;

    Methods

    GetLatLngFromPoint(Point)

    Method used to convert the pixel point to latitude and longitude value.

    Declaration
    public MapLatLng GetLatLngFromPoint(Point point)
    Parameters
    Type Name Description
    Microsoft.Maui.Graphics.Point point

    The pixel point.

    Returns
    Type Description
    MapLatLng

    The latitude and longitude.

    OnBindingContextChanged()

    Invoked whenever the binding context of the View changes.

    Declaration
    protected override void OnBindingContextChanged()

    Events

    ShapeSelected

    Called when the map shape is selecting or unselecting.

    Declaration
    public event EventHandler<ShapeSelectedEventArgs> ShapeSelected
    Event Type
    Type
    System.EventHandler<ShapeSelectedEventArgs>
    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                             ShapeSelected="layer_ShapeSelected" />
       </map:SfMaps.Layer>
    </map:SfMaps>
    private void layer_ShapeSelected(object sender, ShapeSelectedEventArgs e)
    {
        var item = e.DataItem;
        var isSelected = e.IsSelected;
    }

    Explicit Interface Implementations

    IShapeLayer.ShapeSelected

    Declaration
    EventHandler<ShapeSelectedEventArgs> IShapeLayer.ShapeSelected { get; }
    Returns
    Type
    System.EventHandler<ShapeSelectedEventArgs>

    Implements

    IShapeLayer
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved