• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

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

In this article

Not finding the help you need?