---
title: Overview
position: 1
seo_title: Overview of the Map Component
seo_description: Learn about the basic features of the Telerik and Kendo UI Map
  component and its types, check out the extensive set of available options in
  its live demo.
---

## Map Overview

The Telerik and Kendo UI Map component allows you to display geospatial information organized in layers. You can connect the component to various online providers, such as OpenStreetMap, OpenWeatherMap, ArcGIS, Azure, and many more.

The Map component includes tile, shape bubble, and marker layers. It also provides support for the GeoJSON data format.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/map/"},{"text":"Blazor","url":"https://docs.telerik.com/blazor-ui/components/map/overview"},{"text":"jQuery","url":"https://docs.telerik.com/kendo-ui/controls/map/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/map/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/map-wrapper/"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/diagrams-and-maps/map/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/diagrams-and-maps/map/overview"}],"demo":"components/map/overview"}'></LiveDemo>

#### Anatomy

The anatomy of the Map summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Map controls"},{"text":"Navigator"},{"text":"Zoom control"},{"text":"Marker"}]}'>![A Telerik and Kendo UI Map component](images/components-map-overview-anatomy-2.png 'Anatomy and elements of a Telerik and Kendo UI Map')</BlueprintImage>

### Layer Views

The Telerik and Kendo UI Map component has built-in layer options that let you configure the visualization of locations:

- Marker Layer&mdash;Displays a marker over a specific location.
- Bubble Layer&mdash;Displays bubbles over another layer to mark regions.

<BlueprintImage data='{"description":"","labels":[{"text":"Marker layer"},{"text":"Bubble layer"}]}'>![Two layer views for the Telerik and Kendo UI Map component.](images/components-map-overview-layer-views-3.png 'In the Telerik and Kendo UI Map you can set custom layer views.')</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>

<ExternalResource data='{"title":"Kendo UI for Angular Map","description":"Find more information about the Kendo UI for Angular Map in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/map/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Map","description":"Find more information about the Telerik UI for Blazor Map in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/map/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Map","description":"Find more information about the Kendo UI for jQuery Map in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/map/"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Map","description":"Find more information about the KendoReact Map in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/map/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Map","description":"Find more information about the Kendo UI for Vue Map in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/map-wrapper/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Map","description":"Find more information about the Telerik UI for ASP.NET Core Map component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/diagrams-and-maps/map/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Map","description":"Find more information about the Telerik UI for ASP.NET MVC Map component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/diagrams-and-maps/map/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>