New to Kendo UI for jQuery? Start a free 30-day trial

LayerDefaults.bubble

configuration

The default configuration for bubble layers.

layerDefaults.bubble

Object

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                attribution: "&copy; Company Inc."
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layerDefaults.bubble.attribution

String

The attribution for all bubble layers.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                attribution: "&copy; Company Inc."
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layerDefaults.bubble.maxSize

Number

The maximum symbol size for bubble layer symbols.

Default: 100

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                maxSize: 50
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layerDefaults.bubble.minSize

Number

The minimum symbol size for bubble layer symbols.

Setting non-zero value will distort symbol area to value ratio.

Default: 0

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                minSize: 10
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layerDefaults.bubble.opacity

Number

The opacity of all bubble layers.

Default: 1

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                opacity: 0.5
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layerDefaults.bubble.style

Object

The default style for bubble layer symbols.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                style: {
                    fill: {
                        color: "red",
                        opacity: 1
                    },
                    stroke: {
                        color: "green",
                        width: 4,
                        dashType: "longDashDot",
                        opacity: 0.5
                    }
                }
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

layerDefaults.bubble.symbol

String|Function

The default symbol for bubble layers. Possible values:

"circle" - A circle.
"square" - A square symbol.
function - An user defined symbol.

The function must accept an object with the following fields:

center - The symbol center on the current layer.
size - The symbol size.
style - The symbol style.
dataItem - The dataItem used to create the symbol.
location - The location of the data point.

The function return value must be a kendo.drawing.Shape.

Default: "circle"

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                symbol: "square"
            }
        },
        layers: [{
            type: "bubble",
            dataSource: {
                data: [{
                    "location": [42, 12], "value": 10
                }, {
                    "location": [45, 15], "value": 25
                }]
            }
        }]
    });
</script>

Related Members