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.

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;

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;

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>