Getting Started
Components
- Barcodes
- Buttons
- Chartsupdated
- Conversational UIupdated
- Data Query
- Date Inputsupdated
- Date Math
- Dialogs
- Drawing
- Dropdownsupdated
- Editor
- Excel Export
- File Saver
- Filter
- Gantt
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- ListBox
- ListView
- Map
- - Overview
  - Getting Started
  - Map Layers
  - Events
  - API
- Menus
- Navigation
- Notification
- Pager
- PDF Export
- PDFViewer
- PivotGridupdated
- Popup
- ProgressBars
- Ripple
- Schedulerupdated
- ScrollView
- Sortable
- Spreadsheetupdated
- ToolBar
- Tooltips
- TreeList
- TreeView
- Typography
- Uploads
- Utilities
Styling & Themes
Common Features
Project Setup
Knowledge Base
Sample Applications
FAQ
Troubleshooting
Updates
Changelogs

Components / Map / Map Layers / Tile Layer /

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

Tile Layer

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.

Example

View Source

Change Theme:

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

Shape Layer (GeoJSON)