Class MapLayer

Base class for shape layer, holds the common items of MapShapeLayer.

Inheritance

System.Object

MapLayer

MapShapeLayer

MapTileLayer

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public abstract class MapLayer : Element, IThemeElement

Constructors

MapLayer()

Initializes a new instance of the MapLayer class.

Declaration

public MapLayer()

Fields

EnableZoomingAnimationProperty

Identifies the EnableZoomingAnimation bindable property.

Declaration

public static readonly BindableProperty EnableZoomingAnimationProperty

Field Value

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

MarkerSelectedCommandParameterProperty

Identifies the MarkerSelectedCommandParameter bindable property.

Declaration

public static readonly BindableProperty MarkerSelectedCommandParameterProperty

Field Value

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

MarkerSelectedCommandProperty

Identifies the MarkerSelectedCommand bindable property.

Declaration

public static readonly BindableProperty MarkerSelectedCommandProperty

Field Value

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

MarkersProperty

Identifies the Markers bindable property.

Declaration

public static readonly BindableProperty MarkersProperty

Field Value

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

MarkerTemplateProperty

Identifies the MarkerTemplate bindable property.

Declaration

public static readonly BindableProperty MarkerTemplateProperty

Field Value

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

MarkerTooltipSettingsProperty

Identifies the MarkerTooltipSettings bindable property.

Declaration

public static readonly BindableProperty MarkerTooltipSettingsProperty

Field Value

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

MarkerTooltipTemplateProperty

Identifies the MarkerTooltipTemplate bindable property.

Declaration

public static readonly BindableProperty MarkerTooltipTemplateProperty

Field Value

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

ShowMarkerTooltipProperty

Identifies the ShowMarkerTooltip bindable property.

Declaration

public static readonly BindableProperty ShowMarkerTooltipProperty

Field Value

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

SublayersProperty

Identifies the Sublayers bindable property.

Declaration

public static readonly BindableProperty SublayersProperty

Field Value

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

ZoomPanBehaviorProperty

Identifies the ZoomPanBehavior bindable property.

Declaration

public static readonly BindableProperty ZoomPanBehaviorProperty

Field Value

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

Properties

EnableZoomingAnimation

Gets or sets a value indicating whether to perform animation on zoom level changing.

Declaration

public bool EnableZoomingAnimation { get; set; }

Property Value

Type	Description
System.Boolean	true if animation is performed on the centre change; otherwise, false. The default value is true.

Remarks

EnableZoomingAnimation decides whether to perform animation on center change or not.

<map:SfMaps>
    <map:SfMaps.Layer>
        <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                          EnableZoomingAnimation="True" >
        </map:MapTileLayer>
    </map:SfMaps.Layer>
</map:SfMaps>

SfMaps map = new SfMaps();
MapTileLayer tileLayer = new MapTileLayer();
tileLayer.UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
tileLayer.EnableZoomingAnimation = true;
map.Layer = tileLayer;
this.Content = map;

Markers

Gets or sets the collection of marker to the map.

Declaration

public IEnumerable<MapMarker> Markers { get; set; }

Property Value

Type	Description
System.Collections.Generic.IEnumerable<MapMarker>	The marker collection. By default, the collection is empty.

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:MapShapeLayer.Markers>
             <map:MapMarkerCollection>
                 <map:MapMarker x:Name="Seattle"
                                Latitude="47.60621"
                                Longitude="-122.332071" />
                 <map:MapMarker x:Name="Belem"
                                Latitude="-1.455833"
                                Longitude="-48.503887" />
             </map:MapMarkerCollection>
         </map:MapShapeLayer.Markers>

      </map:MapShapeLayer>
   </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"));
MapMarker mapMarker1 = new MapMarker();
mapMarker1.Latitude = 47.60621;
mapMarker1.Longitude = -122.332071;
MapMarker mapMarker2 = new MapMarker();
mapMarker2.Latitude = -1.455833;
mapMarker2.Longitude = -48.503887;
MapMarkerCollection mapMarkers = new MapMarkerCollection();
mapMarkers.Add(mapMarker1);
mapMarkers.Add(mapMarker2);
layer.Markers = mapMarkers;
maps.Layer = layer;
this.Content = maps;

MarkerSelectedCommand

Gets or sets the command that is executed when a map marker is selected.

Declaration

public ICommand MarkerSelectedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	An System.Windows.Input.ICommand implementation to execute. The default value is `null`.

Remarks

This command is invoked after the MarkerSelected event is raised, enabling MVVM-friendly marker interaction handling without code-behind event handlers. The MarkerSelectedEventArgs passed as command parameter.

Examples

The following code demonstrates, how to use the MarkerSelectedCommand property of MapLayer in the SfMaps.

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer MarkerSelectedCommand="{Binding MyCommand}"/>
   </map:SfMaps.Layer>
</map:SfMaps>

 
SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer
{
    MarkerSelectedCommand = new Command<object>(parameter =>
    {
        // Handle marker selection
    })
};
maps.Layer = layer;

MarkerSelectedCommandParameter

Gets or sets the parameter passed to the command when it is executed.

Declaration

public object MarkerSelectedCommandParameter { get; set; }

Property Value

Type	Description
System.Object	An object that is supplied as the command parameter. The default value is `null`.

Remarks

This parameter is passed to both the Execute and CanExecute methods of the associated command. For map markers, this is typically a MarkerSelectedEventArgs instance, which provides details about the selected marker

Examples

The below examples shows, how to use the MarkerSelectedCommandParameter property of MapLayer in the SfMaps.

XAML

 <map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer MarkerSelectedCommand="{Binding MyCommand}"
                         MarkerSelectedCommandParameter="{Binding SelectionContext}"/>
   </map:SfMaps.Layer>
</map:SfMaps>

MarkerTemplate

Gets or sets the data template that is used to display marker with custom content.

Declaration

public DataTemplate MarkerTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	The data template for the map marker. It also supports DataTemplateSelector. The default is `null`.

Remarks

The corresponding underlying data of the current marker is the BindingContext of MarkerTemplate.

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:MapShapeLayer.Markers>
             <map:MapMarkerCollection>
                 <map:MapMarker x:Name="Seattle"
                                Latitude="47.60621"
                                Longitude="-122.332071" />
                 <map:MapMarker x:Name="Belem"
                                Latitude="-1.455833"
                                Longitude="-48.503887" />
             </map:MapMarkerCollection>
         </map:MapShapeLayer.Markers>

         <map:MapShapeLayer.MarkerTemplate>
            <DataTemplate>
               <Image Source="pin.png"
                      Aspect="AspectFit"
                      HorizontalOptions="StartAndExpand"
                      VerticalOptions="Center"
                      HeightRequest="15"
                      WidthRequest="23" />
            </DataTemplate>
         </map:MapShapeLayer.MarkerTemplate>

      </map:MapShapeLayer>
   </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"));
MapMarker mapMarker1 = new MapMarker();
mapMarker1.Latitude = 47.60621;
mapMarker1.Longitude = -122.332071;
MapMarker mapMarker2 = new MapMarker();
mapMarker2.Latitude = -1.455833;
mapMarker2.Longitude = -48.503887;
MapMarkerCollection mapMarkers = new MapMarkerCollection();
mapMarkers.Add(mapMarker1);
mapMarkers.Add(mapMarker2);
layer.Markers = mapMarkers;
layer.MarkerTemplate = CreateDataTemplate();
maps.Layer = layer;
this.Content = maps;

// Method
private DataTemplate CreateDataTemplate()
{
return new DataTemplate(() =>
{
   var image = new Image
   {
       Source = "pin.png",
       Aspect = Aspect.AspectFit,
       HorizontalOptions = LayoutOptions.StartAndExpand,
       VerticalOptions = LayoutOptions.Center,
       WidthRequest = 15,
       HeightRequest = 23
   };
   return image;
});
}

MarkerTooltipSettings

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

Declaration

public MapTooltipSettings MarkerTooltipSettings { 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"
                           ShowMarkerTooltip="True">

            <map:MapShapeLayer.Markers>
                <map:MapMarkerCollection>
                    <map:MapMarker x:Name="Seattle"
                                   Latitude="47.60621"
                                   Longitude="-122.332071" />
                    <map:MapMarker x:Name="Belem"
                                   Latitude="-1.455833"
                                   Longitude="-48.503887" />
                </map:MapMarkerCollection>
            </map:MapShapeLayer.Markers>

            <map:MapShapeLayer.MarkerTooltipTemplate>
                <DataTemplate>
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <Label Text="Latitude: "
                               TextColor="{Binding TextStyle.TextColor}" />
                        <Label Grid.Column="1"
                               Margin="5,0,0,0"
                               HorizontalTextAlignment="End"
                               Text="{Binding DataItem.Latitude}"
                               TextColor="{Binding TextStyle.TextColor}" />

                        <BoxView Grid.Row="1"
                                 Grid.ColumnSpan="2"
                                 HeightRequest="1"
                                 BackgroundColor="Red" />

                        <Label Grid.Row="3"
                               Text="Longitude: "
                               TextColor="{Binding TextStyle.TextColor}" />
                        <Label Grid.Row="3"
                               Grid.Column="1"
                               Margin="5,0,0,0"
                               HorizontalTextAlignment="End"
                               Text="{Binding DataItem.Longitude}"
                               TextColor="{Binding TextStyle.TextColor}" />

                    </Grid>
                </DataTemplate>
            </map:MapShapeLayer.MarkerTooltipTemplate>

            <map:MapShapeLayer.MarkerTooltipSettings>
                <map:MapTooltipSettings Background="White"
                                        Padding="2">
                    <map:MapTooltipSettings.TextStyle>
                        <map:MapLabelStyle FontSize="12"
                                           TextColor="Black"
                                           FontAttributes="Italic" />
                    </map:MapTooltipSettings.TextStyle>
                </map:MapTooltipSettings>
            </map:MapShapeLayer.MarkerTooltipSettings>
        </map:MapShapeLayer>
    </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.ShowMarkerTooltip = true;
MapMarker mapMarker1 = new MapMarker();
mapMarker1.Latitude = 47.60621;
mapMarker1.Longitude = -122.332071;
MapMarker mapMarker2 = new MapMarker();
mapMarker2.Latitude = -1.455833;
mapMarker2.Longitude = -48.503887;
MapMarkerCollection mapMarkers = new MapMarkerCollection();
mapMarkers.Add(mapMarker1);
mapMarkers.Add(mapMarker2);
layer.Markers = mapMarkers;
layer.MarkerTooltipTemplate = CreateMarkerTooltipTemplate();
maps.Layer = layer;
this.Content = maps;
 private DataTemplate CreateMarkerTooltipTemplate()
{
return new DataTemplate(() =>
{
   var grid = new Grid()
   {
       RowDefinitions =
       {
         new RowDefinition(){Height = new GridLength(2, GridUnitType.Auto)},
         new RowDefinition(){Height = new GridLength(2, GridUnitType.Auto)},
         new RowDefinition(){Height = new GridLength(2, GridUnitType.Auto)}
       },
       ColumnDefinitions =
       {
           new ColumnDefinition(),
          new ColumnDefinition(),
       }
   };
Label label1 = new Label();
label1.Text = "Latitude:";
label1.TextColor = Colors.White;
Label label2 = new Label();
label2.TextColor = Colors.White;
label2.Margin = new Thickness(5, 0, 0, 0);
label2.HorizontalTextAlignment = TextAlignment.End;
grid.SetColumn(label2, 1);
Binding binding1 = new Binding();
binding1.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(MapMarker.Latitude);
label2.SetBinding(Label.TextProperty, binding1);
BoxView boxView = new BoxView();
boxView.HeightRequest = 1;
boxView.BackgroundColor = Colors.Red;
grid.SetColumnSpan(boxView, 2);
grid.SetRow(boxView, 1);
Label label3 = new Label();
label3.Text = "Longitude:";
label3.TextColor = Colors.White;
grid.SetRow(label3, 3);
Label label4 = new Label();
label4.TextColor = Colors.White;
label4.Margin = new Thickness(5, 0, 0, 0);
label4.HorizontalTextAlignment = TextAlignment.End;
grid.SetColumn(label4, 1);
grid.SetRow(label4, 3);
Binding binding2 = new Binding();
binding2.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(MapMarker.Longitude);
label4.SetBinding(Label.TextProperty, binding2);
return grid;
});
}

MarkerTooltipTemplate

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

Declaration

public DataTemplate MarkerTooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	The data template for the marker tooltip. It also supports DataTemplateSelector. The default is `null`.

Remarks

The corresponding MapTooltipInfo of the current map marker is the BindingContext of MarkerTooltipTemplate.

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                         ShowMarkerTooltip="True">

         <map:MapShapeLayer.Markers>
             <map:MapMarkerCollection>
                 <map:MapMarker x:Name="Seattle"
                                Latitude="47.60621"
                                Longitude="-122.332071" />
                 <map:MapMarker x:Name="Belem"
                                Latitude="-1.455833"
                                Longitude="-48.503887" />
             </map:MapMarkerCollection>
         </map:MapShapeLayer.Markers>

         <map:MapShapeLayer.MarkerTooltipTemplate>
            <DataTemplate>
                <Grid Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Label Text="Latitude: "
                           TextColor="White" />
                    <Label Grid.Column="1"
                           Margin="5,0,0,0"
                           HorizontalTextAlignment="End"
                           Text="{Binding DataItem.Latitude}"
                           TextColor="White" />

                    <BoxView Grid.Row="1"
                             Grid.ColumnSpan="2"
                             HeightRequest="1"
                             BackgroundColor="Red" />

                    <Label Grid.Row="3"
                           Text="Longitude: "
                           TextColor="White" />
                    <Label Grid.Row="3"
                           Grid.Column="1"
                           Margin="5,0,0,0"
                           HorizontalTextAlignment="End"
                           Text="{Binding DataItem.Longitude}"
                           TextColor="White" />
                </Grid>
            </DataTemplate>
         </map:MapShapeLayer.MarkerTooltipTemplate>

      </map:MapShapeLayer>
   </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.ShowMarkerTooltip = true;
MapMarker mapMarker1 = new MapMarker();
mapMarker1.Latitude = 47.60621;
mapMarker1.Longitude = -122.332071;
MapMarker mapMarker2 = new MapMarker();
mapMarker2.Latitude = -1.455833;
mapMarker2.Longitude = -48.503887;
MapMarkerCollection mapMarkers = new MapMarkerCollection();
mapMarkers.Add(mapMarker1);
mapMarkers.Add(mapMarker2);
layer.Markers = mapMarkers;
layer.MarkerTooltipTemplate = CreateMarkerTooltipTemplate();
maps.Layer = layer;
this.Content = maps;
 private DataTemplate CreateMarkerTooltipTemplate()
{
return new DataTemplate(() =>
{
   var grid = new Grid()
   {
       RowDefinitions =
       {
         new RowDefinition(){Height = new GridLength(2, GridUnitType.Auto)},
         new RowDefinition(){Height = new GridLength(2, GridUnitType.Auto)},
         new RowDefinition(){Height = new GridLength(2, GridUnitType.Auto)}
       },
       ColumnDefinitions =
       {
           new ColumnDefinition(),
          new ColumnDefinition(),
       }
   };
Label label1 = new Label();
label1.Text = "Latitude:";
label1.TextColor = Colors.White;
Label label2 = new Label();
label2.TextColor = Colors.White;
label2.Margin = new Thickness(5, 0, 0, 0);
label2.HorizontalTextAlignment = TextAlignment.End;
grid.SetColumn(label2, 1);
Binding binding1 = new Binding();
binding1.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(MapMarker.Latitude);
label2.SetBinding(Label.TextProperty, binding1);
BoxView boxView = new BoxView();
boxView.HeightRequest = 1;
boxView.BackgroundColor = Colors.Red;
grid.SetColumnSpan(boxView, 2);
grid.SetRow(boxView, 1);
Label label3 = new Label();
label3.Text = "Longitude:";
label3.TextColor = Colors.White;
grid.SetRow(label3, 3);
Label label4 = new Label();
label4.TextColor = Colors.White;
label4.Margin = new Thickness(5, 0, 0, 0);
label4.HorizontalTextAlignment = TextAlignment.End;
grid.SetColumn(label4, 1);
grid.SetRow(label4, 3);
Binding binding2 = new Binding();
binding2.Path = nameof(MapTooltipInfo.DataItem) + "." + nameof(MapMarker.Longitude);
label4.SetBinding(Label.TextProperty, binding2);
return grid;
});
}

ShowMarkerTooltip

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

Declaration

public bool ShowMarkerTooltip { get; set; }

Property Value

Type	Description
System.Boolean	true if marker 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"
                         ShowMarkerTooltip="True">

         <map:MapShapeLayer.Markers>
             <map:MapMarkerCollection>
                 <map:MapMarker x:Name="Seattle"
                                Latitude="47.60621"
                                Longitude="-122.332071" />
                 <map:MapMarker x:Name="Belem"
                                Latitude="-1.455833"
                                Longitude="-48.503887" />
             </map:MapMarkerCollection>
         </map:MapShapeLayer.Markers>

         <map:MapShapeLayer.MarkerTemplate>
            <DataTemplate>
               <Image Source="pin.png"
                      Aspect="AspectFit"
                      HorizontalOptions="StartAndExpand"
                      VerticalOptions="Center"
                      HeightRequest="15"
                      WidthRequest="23" />
            </DataTemplate>
         </map:MapShapeLayer.MarkerTemplate>

      </map:MapShapeLayer>
   </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.ShowMarkerTooltip = true;
MapMarker mapMarker1 = new MapMarker();
mapMarker1.Latitude = 47.60621;
mapMarker1.Longitude = -122.332071;
MapMarker mapMarker2 = new MapMarker();
mapMarker2.Latitude = -1.455833;
mapMarker2.Longitude = -48.503887;
MapMarkerCollection mapMarkers = new MapMarkerCollection();
mapMarkers.Add(mapMarker1);
mapMarkers.Add(mapMarker2);
layer.Markers = mapMarkers;
layer.MarkerTemplate = CreateDataTemplate();
maps.Layer = layer;
this.Content = maps;

// Method
private DataTemplate CreateDataTemplate()
{
return new DataTemplate(() =>
{
   var image = new Image
   {
       Source = "pin.png",
       Aspect = Aspect.AspectFit,
       HorizontalOptions = LayoutOptions.StartAndExpand,
       VerticalOptions = LayoutOptions.Center,
       WidthRequest = 15,
       HeightRequest = 23
   };
   return image;
});
}

Sublayers

Gets or sets the collection of sublayer to the map.

Declaration

public ObservableCollection<MapSublayer> Sublayers { get; set; }

Property Value

Type	Description
System.Collections.ObjectModel.ObservableCollection<MapSublayer>	The sublayer collection. By default, the collection is empty.

Examples

XAML
C#

<map:SfMaps>
    <map:SfMaps.Layer>
        <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
            <map:MapShapeLayer.Sublayers>
                 <map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"/>
                 <map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/india.json"/>
                 <map:MapLineLayer>
                    <map:MapLineLayer.Lines>
                       <map:MapLine>
                             <map:MapLine.From>
                                <map:MapLatLng Latitude="26.841944"
                                               Longitude="114.561183" />
                             </map:MapLine.From>
                             <map:MapLine.To>
                                   <map:MapLatLng Latitude="37.316207"
                                                  Longitude="89.494558" />
                             </map:MapLine.To>
                        </map:MapLine>
                    </map:MapLineLayer.Lines>
                 <map:MapLineLayer
            </map:MapShapeLayer.Sublayers>
        </map:MapShapeLayer>
    </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"));
MapShapeSublayer sublayer = new MapShapeSublayer();
sublayer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/australia.json"));
MapShapeSublayer indiaLayer = new MapShapeSublayer();
indiaLayer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
MapLineLayer mapLineLayer = new MapLineLayer();
MapLine mapLine = new MapLine();
mapLine.From = new MapLatLng(26.841944, 114.561183);
mapLine.To = new MapLatLng(37.316207, 89.494558);
mapLineLayer.Lines.Add(mapLine);
layer.Sublayers.Add(sublayer);
layer.Sublayers.Add(indiaLayer);
layer.Sublayers.Add(mapLineLayer);
maps.Layer = layer;
this.Content = maps;

ZoomPanBehavior

Enables zooming and panning in MapShapeLayer and MapTileLayer.

Declaration

public MapZoomPanBehavior ZoomPanBehavior { get; set; }

Property Value

Type	Description
MapZoomPanBehavior	It enables zoom and pan. The default value is `null`.

Examples

XAML
C#

<map:SfMaps>
    <map:SfMaps.Layer>
        <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png">
              <map:MapTileLayer.ZoomPanBehavior>
                 <map:MapZoomPanBehavior ZoomLevel = "2"
                                         MinZoomLevel= "2"
                                         MaxZoomLevel="18"
                                         EnablePanning="True"
                                         EnableZooming="True" />
              </map:MapTileLayer.ZoomPanBehavior>
        </map:MapTileLayer>
    </map:SfMaps.Layer>
</map:SfMaps>

SfMaps map = new SfMaps();
MapTileLayer tileLayer = new MapTileLayer();
tileLayer.UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
zoomPanBehavior.ZoomLevel = 2;
zoomPanBehavior.MinZoomLevel = 2;
zoomPanBehavior.MaxZoomLevel = 18;
zoomPanBehavior.EnablePanning = true;
zoomPanBehavior.EnableZooming = true;
tileLayer.ZoomPanBehavior = zoomPanBehavior;
map.Layer = tileLayer;
this.Content = map;

Methods

ShowTooltip(MapMarker)

Method to programmatically display the tooltip for the specified marker.

Declaration

public void ShowTooltip(MapMarker marker)

Parameters

Type	Name	Description
MapMarker	marker	The MapMarker instance for which the tooltip is displayed.

Remarks

The specified marker must exist in this layerâ€™s Markers collection, and ShowMarkerTooltip must be enabled. The tooltip is automatically hidden after the duration specified by Duration.

Events

MarkerSelected

Called when the user selecting or unselecting the marker.

Declaration

public event EventHandler<MarkerSelectedEventArgs> MarkerSelected

Event Type

Type
System.EventHandler<MarkerSelectedEventArgs>

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                         MarkerSelected="layer_MarkerSelected">

         <map:MapShapeLayer.Markers>
             <map:MapMarkerCollection>
                 <map:MapMarker x:Name="Seattle"
                                Latitude="47.60621"
                                Longitude="-122.332071"
                                IconType="Triangle" />
             </map:MapMarkerCollection>
         </map:MapShapeLayer.Markers>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

private void layer_MarkerSelected(object sender, MarkerSelectedEventArgs e)
{
    var selectedMarker = e.SelectedMarker;
}

Panning

Occurs whenever the mouse gets moved over the maps.

Declaration

public event EventHandler<PanningEventArgs> Panning

Event Type

Type
System.EventHandler<PanningEventArgs>

Tapped

Occurs whenever tapped on the maps.

Declaration

public event EventHandler<TappedEventArgs> Tapped

Event Type

Type
System.EventHandler<TappedEventArgs>

ZoomLevelChanging

Occurs whenever the zoom level changes while zooming.

Declaration

public event EventHandler<ZoomLevelChangingEventArgs> ZoomLevelChanging

Event Type

Type
System.EventHandler<ZoomLevelChangingEventArgs>