Class MapTooltipSettings

Represents the MapTooltipSettings class.

Inheritance

System.Object

MapTooltipSettings

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapTooltipSettings : Element, IThemeElement

Constructors

MapTooltipSettings()

Initializes a new instance of the MapTooltipSettings class.

Declaration

public MapTooltipSettings()

Fields

BackgroundProperty

Identifies the Background bindable property.

Declaration

public static readonly BindableProperty BackgroundProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Background bindable property.

DurationProperty

Identifies the Duration bindable property.

Declaration

public static readonly BindableProperty DurationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Duration bindable property.

PaddingProperty

Identifies the Padding bindable property.

Declaration

public static readonly BindableProperty PaddingProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Padding bindable property.

TextStyleProperty

Identifies the TextStyle dependency property.

Declaration

public static readonly BindableProperty TextStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TextStyle dependency property.

Properties

Background

Gets or sets the background brush of tooltip.

Declaration

public Brush Background { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A `Brush` that specifies Background of the tooltip.

<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"
                           ShowShapeTooltip="True"
                           ShowMarkerTooltip="True"
                           ShowBubbleTooltip="True">

            <map:MapShapeLayer.DataLabelSettings>
                <map:MapDataLabelSettings DataLabelPath="Density" />
            </map:MapShapeLayer.DataLabelSettings>

           <map:MapShapeLayer.Markers>
           <map:MapMarkerCollection>
               <map:MapMarker Latitude = "1454.6"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Diamond" 
                              Longitude="36.0" />
                <map:MapMarker Latitude = "34.0479"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Circle" 
                              Longitude="100.6124" />
          </map:MapMarkerCollection>
          </map:MapShapeLayer.Markers>

            <map:MapShapeLayer.BubbleSettings>
                <map:MapBubbleSettings SizeValuePath="Density"
                                       Fill="DarkViolet"/>
            </map:MapShapeLayer.BubbleSettings>

            <map:MapShapeLayer.ShapeTooltipSettings>
                <map:MapTooltipSettings Background="#002080"
                                        Padding="2">
                    <map:MapTooltipSettings.TextStyle>
                        <map:MapLabelStyle FontSize="12"
                                           TextColor="White"
                                           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.ShowMarkerTooltip = true;
layer.ShowShapeTooltip = true;
layer.ShowBubbleTooltip = true;
layer.DataLabelSettings = new MapDataLabelSettings()
{
    DataLabelPath = "Density"
};

 MapMarker diamondMarker = new MapMarker();
 diamondMarker.Longitude = 36.0;
 diamondMarker.Latitude = 1454.6;
 diamondMarker.IconHeight = 20;
 diamondMarker.IconWidth = 20;
 diamondMarker.IconType = MapIconType.Diamond;
 MapMarker circleMarker = new MapMarker();
 circleMarker.Longitude = 100.6124;
 circleMarker.Latitude = 34.0479;
 circleMarker.IconHeight = 20;
 circleMarker.IconWidth = 20;
 circleMarker.IconType = MapIconType.Circle;

 MapMarkerCollection mapMarkers = new MapMarkerCollection();
 mapMarkers.Add(diamondMarker);
 mapMarkers.Add(circleMarker);

 layer.Markers = mapMarkers;

MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
   SizeValuePath = "Density",
   Fill= Colors.DarkViolet
};
layer.BubbleSettings = bubbleSetting;
layer.ShapeTooltipSettings = new MapTooltipSettings()
{
   Background = Color.FromArgb("#002080"),
   Padding = new Thickness(2),
   TextStyle = new MapLabelStyle()
   {
       FontSize = 12,
       TextColor = Colors.White,
       FontAttributes = FontAttributes.Italic
   }
};
maps.Layer = layer;
this.Content = maps;

Duration

Gets or sets the duration of tooltip.

Declaration

public TimeSpan Duration { get; set; }

Property Value

Type	Description
System.TimeSpan	A `TimeSpan` that specifies duration of the tooltip. The default value of duration is 2 seconds.

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"
                           ShowShapeTooltip="True"
                           ShowMarkerTooltip="True"
                           ShowBubbleTooltip="True">

            <map:MapShapeLayer.DataLabelSettings>
                <map:MapDataLabelSettings DataLabelPath="Density" />
            </map:MapShapeLayer.DataLabelSettings>

           <map:MapShapeLayer.Markers>
           <map:MapMarkerCollection>
               <map:MapMarker Latitude = "1454.6"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Diamond" 
                              Longitude="36.0" />
                <map:MapMarker Latitude = "34.0479"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Circle" 
                              Longitude="100.6124" />
          </map:MapMarkerCollection>
          </map:MapShapeLayer.Markers>

            <map:MapShapeLayer.BubbleSettings>
                <map:MapBubbleSettings SizeValuePath="Density"
                                       Fill="DarkViolet"/>
            </map:MapShapeLayer.BubbleSettings>

            <map:MapShapeLayer.ShapeTooltipSettings>
                <map:MapTooltipSettings Background="#002080"
                                        Padding="2"
                                        Duration="0:0:10">
                    <map:MapTooltipSettings.TextStyle>
                        <map:MapLabelStyle FontSize="12"
                                           TextColor="White"
                                           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.ShowMarkerTooltip = true;
layer.ShowShapeTooltip = true;
layer.ShowBubbleTooltip = true;
layer.DataLabelSettings = new MapDataLabelSettings()
{
    DataLabelPath = "Density"
};

 MapMarker diamondMarker = new MapMarker();
 diamondMarker.Longitude = 36.0;
 diamondMarker.Latitude = 1454.6;
 diamondMarker.IconHeight = 20;
 diamondMarker.IconWidth = 20;
 diamondMarker.IconType = MapIconType.Diamond;
 MapMarker circleMarker = new MapMarker();
 circleMarker.Longitude = 100.6124;
 circleMarker.Latitude = 34.0479;
 circleMarker.IconHeight = 20;
 circleMarker.IconWidth = 20;
 circleMarker.IconType = MapIconType.Circle;

 MapMarkerCollection mapMarkers = new MapMarkerCollection();
 mapMarkers.Add(diamondMarker);
 mapMarkers.Add(circleMarker);

 layer.Markers = mapMarkers;

MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
   SizeValuePath = "Density",
   Fill= Colors.DarkViolet
};
layer.BubbleSettings = bubbleSetting;
layer.ShapeTooltipSettings = new MapTooltipSettings()
{
   Background = Color.FromArgb("#002080"),
   Padding = new Thickness(2),
   Duration = new TimeSpan(0, 0, 10),
   TextStyle = new MapLabelStyle()
   {
       FontSize = 12,
       TextColor = Colors.White,
       FontAttributes = FontAttributes.Italic
   }
};
maps.Layer = layer;
this.Content = maps;

Padding

Gets or sets the padding of tooltip text.

Declaration

public Thickness Padding { get; set; }

Property Value

Type	Description
Microsoft.Maui.Thickness	It specifies the padding of tooltip text. The default value is 0.

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"
                           ShowMarkerTooltip="True"
                           ShowBubbleTooltip="True"
                           ShowShapeTooltip="True">

            <map:MapShapeLayer.DataLabelSettings>
                <map:MapDataLabelSettings DataLabelPath="Density" />
            </map:MapShapeLayer.DataLabelSettings>

           <map:MapShapeLayer.Markers>
           <map:MapMarkerCollection>
               <map:MapMarker Latitude = "1454.6"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Diamond" 
                              Longitude="36.0" />
                <map:MapMarker Latitude = "34.0479"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Circle" 
                              Longitude="100.6124" />
          </map:MapMarkerCollection>
          </map:MapShapeLayer.Markers>

            <map:MapShapeLayer.BubbleSettings>
                <map:MapBubbleSettings SizeValuePath="Density"
                                       Fill="DarkViolet"/>
            </map:MapShapeLayer.BubbleSettings>

            <map:MapShapeLayer.ShapeTooltipSettings>
                <map:MapTooltipSettings Background="#002080"
                                        Padding="2">
                    <map:MapTooltipSettings.TextStyle>
                        <map:MapLabelStyle FontSize="12"
                                           TextColor="White"
                                           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.ShowMarkerTooltip = true;
layer.ShowShapeTooltip = true;
layer.ShowBubbleTooltip = true;
layer.DataLabelSettings = new MapDataLabelSettings()
{
    DataLabelPath = "Density"
};

 MapMarker diamondMarker = new MapMarker();
 diamondMarker.Longitude = 36.0;
 diamondMarker.Latitude = 1454.6;
 diamondMarker.IconHeight = 20;
 diamondMarker.IconWidth = 20;
 diamondMarker.IconType = MapIconType.Diamond;
 MapMarker circleMarker = new MapMarker();
 circleMarker.Longitude = 100.6124;
 circleMarker.Latitude = 34.0479;
 circleMarker.IconHeight = 20;
 circleMarker.IconWidth = 20;
 circleMarker.IconType = MapIconType.Circle;

 MapMarkerCollection mapMarkers = new MapMarkerCollection();
 mapMarkers.Add(diamondMarker);
 mapMarkers.Add(circleMarker);

 layer.Markers = mapMarkers;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
   SizeValuePath = "Density",
   Fill= Colors.DarkViolet
};
layer.BubbleSettings = bubbleSetting;
layer.ShapeTooltipSettings = new MapTooltipSettings()
{
   Background = Color.FromArgb("#002080"),
   Padding = new Thickness(2),
   TextStyle = new MapLabelStyle()
   {
       FontSize = 12,
       TextColor = Colors.White,
       FontAttributes = FontAttributes.Italic
   }
};
maps.Layer = layer;
this.Content = maps;

TextStyle

Gets or sets the map text style to customize the appearance of tooltip text.

Declaration

public MapLabelStyle TextStyle { get; set; }

Property Value

Type	Description
MapLabelStyle	It specifies the styles of tooltip text.

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"
                           ShowMarkerTooltip="True"
                           ShowBubbleTooltip="True"
                           ShowShapeTooltip="True">

            <map:MapShapeLayer.DataLabelSettings>
                <map:MapDataLabelSettings DataLabelPath="Density" />
            </map:MapShapeLayer.DataLabelSettings>

           <map:MapShapeLayer.Markers>
           <map:MapMarkerCollection>
               <map:MapMarker Latitude = "1454.6"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Diamond" 
                              Longitude="36.0" />
                <map:MapMarker Latitude = "34.0479"
                              IconWidth="20" 
                              IconHeight="20" 
                              IconType="Circle" 
                              Longitude="100.6124" />
          </map:MapMarkerCollection>
          </map:MapShapeLayer.Markers>

            <map:MapShapeLayer.BubbleSettings>
                <map:MapBubbleSettings SizeValuePath="Density"
                                       Fill="DarkViolet"/>
            </map:MapShapeLayer.BubbleSettings>

            <map:MapShapeLayer.ShapeTooltipSettings>
                <map:MapTooltipSettings Background="#002080"
                                        Padding="2">
                    <map:MapTooltipSettings.TextStyle>
                        <map:MapLabelStyle FontSize="12"
                                           TextColor="White"
                                           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.ShowMarkerTooltip = true;
layer.ShowShapeTooltip = true;
layer.ShowBubbleTooltip = true;
layer.DataLabelSettings = new MapDataLabelSettings()
{
    DataLabelPath = "Density"
};

 MapMarker diamondMarker = new MapMarker();
 diamondMarker.Longitude = 36.0;
 diamondMarker.Latitude = 1454.6;
 diamondMarker.IconHeight = 20;
 diamondMarker.IconWidth = 20;
 diamondMarker.IconType = MapIconType.Diamond;
 MapMarker circleMarker = new MapMarker();
 circleMarker.Longitude = 100.6124;
 circleMarker.Latitude = 34.0479;
 circleMarker.IconHeight = 20;
 circleMarker.IconWidth = 20;
 circleMarker.IconType = MapIconType.Circle;

 MapMarkerCollection mapMarkers = new MapMarkerCollection();
 mapMarkers.Add(diamondMarker);
 mapMarkers.Add(circleMarker);

 layer.Markers = mapMarkers;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
   SizeValuePath = "Density",
   Fill= Colors.DarkViolet
};
layer.BubbleSettings = bubbleSetting;
layer.ShapeTooltipSettings = new MapTooltipSettings()
{
   Background = Color.FromArgb("#002080"),
   Padding = new Thickness(2),
   TextStyle = new MapLabelStyle()
   {
       FontSize = 12,
       TextColor = Colors.White,
       FontAttributes = FontAttributes.Italic
   }
};
maps.Layer = layer;
this.Content = maps;