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.MarkerTooltipSettingsProperty

MapLayer.MarkersProperty

MapLayer.MarkerTemplateProperty

MapLayer.ShowMarkerTooltipProperty

MapLayer.MarkerTooltipTemplateProperty

MapLayer.SublayersProperty

MapLayer.ZoomPanBehaviorProperty

MapLayer.EnableZoomingAnimationProperty

MapLayer.Markers

MapLayer.MarkerTemplate

MapLayer.ShowMarkerTooltip

MapLayer.MarkerTooltipTemplate

MapLayer.MarkerTooltipSettings

MapLayer.Sublayers

MapLayer.EnableZoomingAnimation

MapLayer.ZoomPanBehavior

MapLayer.MarkerSelected

MapLayer.ZoomLevelChanging

MapLayer.Panning

MapLayer.Tapped

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapTileLayer : MapLayer

<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	Description
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	Description
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()