# Bubble Map layer

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-react-ui-develop/components/map/api/mapbubblelayerprops#symbol)

## Binding to Data

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

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

The following example demonstrates how to create a bubble layer:

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

## Tooltips

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

The available fields in the bubble tooltip [renderer context](https://www.telerik.com/kendo-react-ui-develop/components/map/api/bubbletooltipcontext) are:

* `dataItem`—The original data item used to create the bubble.
* `layerIndex`—The index of the bubble layer in the Map.
* `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-react-ui/map/layers/bubble-tooltip/func/source.txt)