New to Kendo UI for AngularStart a free 30-day trial

BubbleLayerComponent

Represents the Kendo UI BubbleLayer component for Angular. Displays data as bubbles on vector shape layers for bubble maps.

typescript
@Component({
  selector: 'my-app',
  template: `
    <kendo-map>
      <kendo-map-bubble-layer 
        [data]="bubbleData"
        locationField="location"
        valueField="population"
        [maxSize]="50"
        [minSize]="10">
      </kendo-map-bubble-layer>
    </kendo-map>
  `
})
export class AppComponent {
  public bubbleData = [
    { location: [40.7128, -74.0060], population: 8000000 }
  ];
}

Selector

kendo-map-bubble-layer

Inputs

NameTypeDefaultDescription

data?

any[]

Sets the array of data items for this layer.

locationField?

string

Sets the data item field which contains the symbol location. The field should be an array with two numbers — latitude and longitude in decimal degrees.

maxSize?

number

100

Sets the maximum symbol size for bubble layer symbols.

minSize?

number

0

Sets the minimum symbol size for bubble layer symbols. Setting a non-zero value will distort the symbol area to value ratio.

style?

ShapeOptions

Sets the default style for symbols.

symbol?

BubbleLayerSymbol

Sets the symbol to use for bubble layers.

valueField?

string

Sets the value field for the symbols used to determine their relative size. The data item field should be a number.

Methods

notifyChanges

Updates the component fields with the specified values and refreshes the Chart.

Use this method when the configuration values cannot be set through the template.

ts
item.notifyChanges({ visible: true });
Parameters

changes

any

An object containing the updated input fields.

In this article
SelectorInputsMethods
Not finding the help you need?
Contact Support