menu

MAUI

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

    Show / Hide Table of Contents

    Class MapTileLayer

    Tile layer which renders the tiles returned from the Web Map Tile Services (WMTS) like OpenStreetMap, Bing Maps, Google Maps, TomTom etc. The UrlTemplate accepts the URL in WMTS format i.e. {z} — zoom level, {x} and {y} — tile coordinates.

    We will replace the {z}, {x}, {y} internally based on the current center point and the zoom level.

    Regarding the tile rendering, at the lowest zoom level (Level 0), the map is 256 x 256 pixels and the whole world map renders as a single tile. At each increase in level, the map width and height grow by a factor of 2 i.e. Level 1 is 512 x 512 pixels with 4 tiles ((0, 0), (0, 1), (1, 0), (1, 1) where 0 and 1 are {x} and {y} in urlTemplate), Level 2 is 2048 x 2048 pixels with 8 tiles (from (0, 0) to (3, 3)), and so on. (These details are just for your information and all these calculation are done internally.)

    However, based on the size of the SfMaps control, initialZoomLevel number of initial tiles needed in the view port alone will be rendered. While zooming and panning, new tiles will be requested and rendered on demand based on the current zoom level.

    The current zoom level can be obtained from the ZoomLevel respectively. Once the particular tile is rendered, it will be stored in the cache and it will be used from it next time for better performance.

    Inheritance
    System.Object
    MapLayer
    MapTileLayer
    Inherited Members
    MapLayer.EnableZoomingAnimation
    MapLayer.EnableZoomingAnimationProperty
    MapLayer.Markers
    MapLayer.MarkerSelected
    MapLayer.MarkersProperty
    MapLayer.MarkerTemplate
    MapLayer.MarkerTemplateProperty
    MapLayer.MarkerTooltipSettings
    MapLayer.MarkerTooltipSettingsProperty
    MapLayer.MarkerTooltipTemplate
    MapLayer.MarkerTooltipTemplateProperty
    MapLayer.Panning
    MapLayer.ShowMarkerTooltip
    MapLayer.ShowMarkerTooltipProperty
    MapLayer.Sublayers
    MapLayer.SublayersProperty
    MapLayer.Tapped
    MapLayer.ZoomLevelChanging
    MapLayer.ZoomPanBehavior
    MapLayer.ZoomPanBehaviorProperty
    Namespace: Syncfusion.Maui.Maps
    Assembly: Syncfusion.Maui.Maps.dll
    Syntax
    public class MapTileLayer : MapLayer, IThemeElement
    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
            <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png" >
                  <map:MapTileLayer.Center>
                      <map:MapLatLng Latitude = "27.175014"
                                     Longitude="78.042152">
                      </map:MapLatLng>
                  </map:MapTileLayer.Center>
                  <map:MapTileLayer.ZoomPanBehavior>
                      <map:MapZoomPanBehavior ZoomLevel = "2" />
                  </ 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";
    tileLayer.Center = new MapLatLng(27.175014, 78.042152);
    MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
    zoomPanBehavior.ZoomLevel = 2;
    tileLayer.ZoomPanBehavior = zoomPanBehavior;
    map.Layer = tileLayer;
    this.Content = map;

    Constructors

    MapTileLayer()

    Initializes a new instance of the MapTileLayer class.

    Declaration
    public MapTileLayer()

    Fields

    CanCacheTilesProperty

    Identifies the CanCacheTiles bindable property.

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

    The identifier for CanCacheTiles bindable property.

    CenterProperty

    Identifies the Center bindable property.

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

    The identifier for Center bindable property.

    DistanceTypeProperty

    Identifies the DistanceType bindable property.

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

    The identifier for DistanceType bindable property.

    EnableCenterAnimationProperty

    Identifies the EnableCenterAnimation bindable property.

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

    The identifier for EnableCenterAnimation bindable property.

    ImageUriSubdomains

    Backing field to store the sub domains of the bing url.

    Declaration
    protected static string[] ImageUriSubdomains
    Field Value
    Type
    System.String[]

    LatLngBoundsProperty

    Identifies the LatLngBounds bindable property.

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

    The identifier for LatLngBounds bindable property.

    RadiusProperty

    Identifies the Radius bindable property.

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

    The identifier for Radius bindable property.

    ServerName

    Backing field to store the server name of the url.

    Declaration
    protected string ServerName
    Field Value
    Type
    System.String

    UrlTemplateProperty

    Identifies the UrlTemplate bindable property.

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

    The identifier for UrlTemplate bindable property.

    Properties

    CanCacheTiles

    Gets or sets the value used to decide whether the tile images should be cached in application memory or not.

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

    true if application memory should be used to cache tile images; otherwise, false. The default value is false.

    Remarks

    CanCacheTiles decides whether the tile images should be cached in application memory or not

    Examples
    • XAML
    • C#
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                              CanCacheTiles= "True">
                  <map:MapTileLayer.ZoomPanBehavior>
                     <map:MapZoomPanBehavior ZoomLevel = "2" />
                  </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";
    tileLayer.CanCacheTiles = true;
    MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
    zoomPanBehavior.ZoomLevel = 2;
    tileLayer.ZoomPanBehavior = zoomPanBehavior;
    map.Layer = tileLayer;
    this.Content = map;

    Center

    Gets or sets the value that specifies the center latitude and longitude position to the maps.

    Declaration
    public MapLatLng Center { get; set; }
    Property Value
    Type Description
    MapLatLng

    The cener latitude and longitude position of tile layer. The default is null.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
            <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png" >
                  <map:MapTileLayer.Center>
                      <map:MapLatLng Latitude = "27.175014"
                                     Longitude="78.042152">
                      </map:MapLatLng>
                  </map:MapTileLayer.Center>
                  <map:MapTileLayer.ZoomPanBehavior>
                      <map:MapZoomPanBehavior ZoomLevel = "2" />
                  </ 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";
    tileLayer.Center = new MapLatLng(27.175014, 78.042152);
    MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
    zoomPanBehavior.ZoomLevel = 2;
    tileLayer.ZoomPanBehavior = zoomPanBehavior;
    map.Layer = tileLayer;
    this.Content = map;

    DistanceType

    Gets or sets the radius distance type in meters or kilometers or miles to calculate the auto zoom level.

    Declaration
    public MapDistanceType DistanceType { get; set; }
    Property Value
    Type Description
    MapDistanceType

    One of the enumeration values that specifies the distance type to calculate zoom level. The default is Kilometer.

    Remarks

    DistanceType will work based upon the Radius and EnableZooming.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapTileLayer Radius = "5"
                             DistanceType="Mile"
                             UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
                  <map:MapTileLayer.Center>
                      <map:MapLatLng Latitude = "38.909804"
                                     Longitude="-77.043442">
                      </map:MapLatLng>
                  </map:MapTileLayer.Center>
            </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.Center = new MapLatLng(38.909804, -77.043442);
    tileLayer.Radius = 5;
    tileLayer.DistanceType = MapDistanceType.Mile;
    map.Layer = tileLayer;
    this.Content = map;

    EnableCenterAnimation

    Gets or sets a value that indicates whether the map has to be animated or not when Center property gets changed.

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

    true if animation is performed on the center changing; otherwise, false. The default value is true.

    Remarks

    EnableCenterAnimation decides whether the center to animated or not.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapTileLayer EnableCenterAnimation = "True"
                             UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
                <map:MapTileLayer.Center>
                     <map:MapLatLng Latitude = "27.175014"
                                    Longitude="78.042152">
                      </map:MapLatLng>
                 </map:MapTileLayer.Center>
                <map:MapTileLayer.ZoomPanBehavior>
                     <map:MapZoomPanBehavior ZoomLevel = "2" />
                </ 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";
    tileLayer.Center = new MapLatLng(27.175014, 78.042152);
    tileLayer.EnableCenterAnimation = true;
    MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
    zoomPanBehavior.ZoomLevel = 2;
    tileLayer.ZoomPanBehavior = zoomPanBehavior;
    map.Layer = tileLayer;
    this.Content = map;

    LatLngBounds

    Gets or sets the southwest and northeast geo-points to calculate auto zoom level.

    Declaration
    public MapLatLngBounds LatLngBounds { get; set; }
    Property Value
    Type Description
    MapLatLngBounds

    The latitude and longitude bounds of map. The default is null.

    Remarks

    LatLngBounds will work based upon the EnableZooming.

    Examples
    • XAML
    • C#
     <map:SfMaps>
        <map:SfMaps.Layer>
           <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png" >
                <map:MapTileLayer.LatLngBounds>
                    <map:MapLatLngBounds>
                          <map:MapLatLngBounds.Northeast>
                              <map:MapLatLng>
                                 <x:Arguments>
                                     <x:Double>38.909804</x:Double>
                                     <x:Double>-77.043442</x:Double>
                                 </x:Arguments>
                             </map:MapLatLng>
                          </map:MapLatLngBounds.Northeast>
                          <map:MapLatLngBounds.Southwest>
                              <map:MapLatLng>
                                 <x:Arguments>
                                     <x:Double>13.048155</x:Double>
                                     <x:Double>80.083858</x:Double>
                                 </x:Arguments>
                             </map:MapLatLng>
                         </map:MapLatLngBounds.Southwest>
                     </map:MapLatLngBounds>
                 </map:MapTileLayer.LatLngBounds>
             </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";
    MapLatLngBounds bounds = new MapLatLngBounds();
    bounds.Northeast = new MapLatLng(38.909804, -77.043442);
    bounds.Southwest = new MapLatLng(13.048155, 80.083858);
    tileLayer.LatLngBounds = bounds;
    map.Layer = tileLayer;
    this.Content = map;

    Radius

    Gets or sets the radius distance from center position to calculate the auto zoom level.

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

    It provides the radius distance needed to calculate the map's zoom level. The default value is 0.

    Remarks

    Radius will work based upon the DistanceType and EnableZooming.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
           <map:MapTileLayer Radius = "5"
                             UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
                  <map:MapTileLayer.Center>
                      <map:MapLatLng Latitude = "38.909804"
                                     Longitude="-77.043442">
                      </map:MapLatLng>
                  </map:MapTileLayer.Center>
            </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.Center = new MapLatLng(38.909804, -77.043442);
    tileLayer.Radius = 5;
    map.Layer = tileLayer;
    this.Content = map;

    UrlTemplate

    Gets or sets the URL template to request the tiles from the providers.

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

    The UrlTemplate representing the tile layer Url. The default is value is empty.

    Examples
    • XAML
    • C#
       <map:SfMaps>
           <map:SfMaps.Layer>
               <map:MapTileLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png" >
               </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";
    map.Layer = tileLayer;
    this.Content = map;

    Methods

    DeleteTilesFromCache()

    To delete the tile layer folder from cache.

    Declaration
    public void DeleteTilesFromCache()
    Examples
    • XAML
    • C#
       <map:SfMaps>
           <map:SfMaps.Layer>
               <map:MapTileLayer  x:Name = "layer"
                                  UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png" >
               </map:MapTileLayer>
          </map:SfMaps.Layer>
       </map:SfMaps>
    layer.DeleteTilesFromCache();

    GetBingUrl(String)

    Method used to get the bing URL which returns the URL in the required format.

    Declaration
    public static Task<string> GetBingUrl(string url)
    Parameters
    Type Name Description
    System.String url

    The url.

    Returns
    Type Description
    System.Threading.Tasks.Task<System.String>

    Returns bing url.

    Remarks

    GetBingUrl(String) method should be called from the async method in load time.

    Examples
    • XAML
    • C#
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapTileLayer x:Name="tileLayer"/>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
    	InitializeComponent();
        this.GenerateBing(tileLayer);
    }
    
    private async Task GenerateBing(MapTileLayer tileLayer)
    {
        tileLayer.UrlTemplate = await MapTileLayer.GetBingUrl("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&include=ImageryProviders&key=subscription_key") + "?name=bingName";
    }

    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.

    GetTileUrl(Int32, Int32, Int32)

    Converts the UrlTemplate format into respective map providers URL format.

    Declaration
    protected virtual string GetTileUrl(int x, int y, int z)
    Parameters
    Type Name Description
    System.Int32 x

    X position

    System.Int32 y

    Y position

    System.Int32 z

    Z position

    Returns
    Type Description
    System.String

    Url string

    Remarks

    GetTileUrl(Int32, Int32, Int32) method can be overriden by inheriting the MapTileLayer class.

    Examples
    • XAML
    • C#
    <map:SfMaps>
        <map:SfMaps.Layer>
            <local:MapImageryLayer UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </map:SfMaps.Layer>
    </map:SfMaps>
    public partial class MapImageryLayer : MapTileLayer
    {
      protected override string GetTileUrl(int x, int y, int z)
      {
           string url = base.GetTileUrl(x, y, z);
           ServerName = "Custom";
           return url;
       }
    }

    OnBindingContextChanged()

    Invoked whenever the binding context of the View changes.

    Declaration
    protected override void OnBindingContextChanged()

    Events

    CenterChanged

    Occurs whenever tapped on the maps.

    Declaration
    public event EventHandler<CenterChangedEventArgs> CenterChanged
    Event Type
    Type
    System.EventHandler<CenterChangedEventArgs>
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved