# Bubble Map layer

## Overview

The bubble map layer displays value proportions over geographic regions.

At each location, the layer will render a circle with an area proportional to the value. The rendered shape can be customized by setting [`symbol`](https://www.telerik.com/kendo-angular-ui-develop/components/map/api/bubblelayercomponent#symbol)

## Binding to Data

The Bubble map layer expects the data to contain two fields:

* Location, specified by [locationField](https://www.telerik.com/kendo-angular-ui-develop/components/map/api/bubblelayercomponent#locationfield)
* Value, specified by [valueField](https://www.telerik.com/kendo-angular-ui-develop/components/map/api/bubblelayercomponent#valuefield)

The following example demonstrates how to create a bubble layer:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/map/layers/bubble/source.txt)

## Tooltips

The Map has a built-in tooltip for bubbles. To display the tooltip, define a bubble tooltip template.

The available inputs for the bubble tooltip template are:

* `dataItem`—The original data item used to create the bubble.
* `location`—The location of the bubble.
* `value`—The value of the bubble.

The bubble tooltip is demonstrated in the example below:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/map/layers/bubble-tooltip/source.txt)

## Suggested Links

* [Map Layers Overview](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers)
* [Tile Layer](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers/tile)
* [Shape Layer (GeoJSON)](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers/shape)
* [Marker Layer](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers/marker)
* [API Index of the Map](https://www.telerik.com/kendo-angular-ui-develop/components/map/api)