New to Kendo UI for Angular? Start a free 30-day trial

Tile Layer

Updated on Feb 11, 2026

The Tile layer in the Map is suitable for displaying raster tile maps from popular online providers such as OpenStreetMap.

The following example demonstrates how to display an OpenStreetMap tile layer.

Change Theme

Theme

Loading ...

Zoom Levels

Raster maps are divided into images (tiles) for serving over the web. Tiles are typically 256px squares.

The top level (zoom level 0) displays the whole world as a single tile. Each progressive zoom level doubles the size of the Map in the following way:

Zoom level 0—1x1 tiles (256px).
Zoom level 1—2x2 tiles (512px).
Zoom level 2—4x4 tiles (1024px).
Zoom level 3—8x8 tiles (2048px).
This pattern continues with each zoom level doubling the number of tiles in both dimensions.

In addition to OpenStreetMap, the Map component can be configured to use tiles from commercial providers such as Azure Maps, Google Maps, and Mapbox. These providers typically require an API key or subscription for access. The following sections provide examples of how to configure the tile layer with these popular providers.

Azure Maps

Azure Maps provides comprehensive mapping capabilities through Microsoft Azure. To use Azure Maps tiles, you must have an Azure Maps subscription key.

Azure Maps is Microsoft's next-generation maps and geospatial services. Bing Maps Web Control SDK has been deprecated and retired. For migration guidance from Bing Maps, see the Bing Maps Migration Overview.

To configure the tile layer with an Azure Maps subscription key:

typescript

import { Component } from '@angular/core';
import { KENDO_MAP, TileUrlTemplateArgs } from '@progress/kendo-angular-map';

@Component({
    selector: 'my-app',
    imports: [KENDO_MAP],
    template: `
        <kendo-map [center]="center" [zoom]="10">
            <kendo-map-layers>
                <kendo-map-tile-layer
                    [urlTemplate]="azureTileUrl"
                    attribution="© Microsoft, © TomTom"
                >
                </kendo-map-tile-layer>
            </kendo-map-layers>
        </kendo-map>
    `
})
export class AppComponent {
    public center = [47.6, -122.33];
    
    public azureTileUrl = (e: TileUrlTemplateArgs): string =>
        `https://atlas.microsoft.com/map/tile?` +
        `subscription-key=YOUR_AZURE_MAPS_SUBSCRIPTION_KEY&` +
        `api-version=2024-04-01&` +
        `tilesetId=microsoft.base.road&` +
        `zoom=${e.zoom}&` +
        `x=${e.x}&` +
        `y=${e.y}&` +
        `tileSize=256`;
}

For more details on available tile options and API parameters, see the Azure Maps Get Map Tile API documentation.

Google Maps

Google Maps provides comprehensive mapping services with extensive global coverage. To use Google Maps tiles, you must have a Google Maps API key.

To configure the tile layer with a Google Maps API key:

typescript

import { Component } from '@angular/core';
import { KENDO_MAP, TileUrlTemplateArgs } from '@progress/kendo-angular-map';

@Component({
    selector: 'my-app',
    imports: [KENDO_MAP],
    template: `
        <kendo-map [center]="center" [zoom]="10">
            <kendo-map-layers>
                <kendo-map-tile-layer
                    [urlTemplate]="googleTileUrl"
                    attribution="© Google"
                >
                </kendo-map-tile-layer>
            </kendo-map-layers>
        </kendo-map>
    `
})
export class AppComponent {
    public center = [47.6, -122.33];
    
    public googleTileUrl = (e: TileUrlTemplateArgs): string =>
        `https://mt1.google.com/vt/lyrs=m&` +
        `x=${e.x}&` +
        `y=${e.y}&` +
        `z=${e.zoom}&` +
        `key=YOUR_GOOGLE_MAPS_API_KEY`;
}

You can also use alternative tile formats:

typescript

// Example using hybrid satellite view
public googleHybridTileUrl = (e: TileUrlTemplateArgs): string =>
    `https://mt1.google.com/vt/lyrs=y&` +
    `x=${e.x}&` +
    `y=${e.y}&` +
    `z=${e.zoom}&` +
    `key=YOUR_GOOGLE_MAPS_API_KEY`;

For more details on available tile options and API capabilities, see the Google Maps Platform documentation.

Mapbox

Mapbox provides customizable mapping solutions with high-quality tile services. To use Mapbox tiles, you must have a Mapbox access token.

To configure the tile layer with a Mapbox access token:

typescript

import { Component } from '@angular/core';
import { KENDO_MAP, TileUrlTemplateArgs } from '@progress/kendo-angular-map';

@Component({
    selector: 'my-app',
    imports: [KENDO_MAP],
    template: `
        <kendo-map [center]="center" [zoom]="10">
            <kendo-map-layers>
                <kendo-map-tile-layer
                    [urlTemplate]="mapboxTileUrl"
                    attribution="© Mapbox © OpenStreetMap"
                >
                </kendo-map-tile-layer>
            </kendo-map-layers>
        </kendo-map>
    `
})
export class AppComponent {
    public center = [47.6, -122.33];
    
    public mapboxTileUrl = (e: TileUrlTemplateArgs): string =>
        `https://api.mapbox.com/v4/mapbox.streets/${e.zoom}/${e.x}/${e.y}.png?` +
        `access_token=YOUR_MAPBOX_ACCESS_TOKEN`;
}

You can also use the v4 API with alternative tile formats:

typescript

// Example using satellite imagery
public mapboxSatelliteTileUrl = (e: TileUrlTemplateArgs): string =>
    `https://api.mapbox.com/v4/mapbox.satellite/${e.zoom}/${e.x}/${e.y}.jpg?` +
    `access_token=YOUR_MAPBOX_ACCESS_TOKEN`;

For more details on available tile options and API capabilities, see the Mapbox Maps API documentation.

Tile Layer

Zoom Levels

Commercial Tile Providers

Azure Maps

Google Maps

Mapbox

Suggested Links