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

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapShapeLayer : MapLayer, IThemeElement, IShapeLayer

<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

Class MapShapeLayer

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

Examples

Constructors

MapShapeLayer()

Declaration

Fields

BubbleSettingsProperty

Declaration

Field Value

BubbleTooltipSettingsProperty

Declaration

Field Value

BubbleTooltipTemplateProperty

Declaration

Field Value

ColorMappingsProperty

Declaration

Field Value

DataLabelSettingsProperty

Declaration

Field Value

DataSourceProperty

Declaration

Field Value

EnableSelectionProperty

Declaration

Field Value

GeometryProperty

Declaration

Field Value

LegendProperty

Declaration

Field Value

PrimaryValuePathProperty

Declaration

Field Value

SelectedItemsProperty

Declaration

Field Value

SelectedShapeFillProperty

Declaration

Field Value

SelectedShapeStrokeProperty

Declaration

Field Value

SelectedShapeStrokeThicknessProperty

Declaration

Field Value

SelectionModeProperty

Declaration

Field Value

ShapeColorValuePathProperty

Declaration

Field Value

ShapeDataFieldProperty

Declaration

Field Value

ShapeFillProperty

Declaration

Field Value

ShapeHoverFillProperty

Declaration

Field Value

ShapeHoverStrokeProperty

Declaration

Field Value

ShapeHoverStrokeThicknessProperty

Declaration

Field Value

ShapesSourceProperty

Declaration

Field Value

ShapeStrokeProperty

Declaration