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

LayerDefaults.bubble.style.stroke

configuration

The default stroke for bubble layer symbols. Accepts a valid CSS color string or object with detailed configuration.

layerDefaults.bubble.style.stroke

Object

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            bubble: {
                style: {
                    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.style.stroke.color

String

The default stroke color for bubble layer symbols. Accepts a valid CSS color string, including hex and rgb.

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

layerDefaults.bubble.style.stroke.dashType

String

The default dash type for layer symbols. The following dash types are supported:

"dash" - a line consisting of dashes
"dashDot" - a line consisting of a repeating pattern of dash-dot
"dot" - a line consisting of dots
"longDash" - a line consisting of a repeating pattern of long-dash
"longDashDot" - a line consisting of a repeating pattern of long-dash-dot
"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
"solid" - a solid line

Default: "solid"

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

layerDefaults.bubble.style.stroke.opacity

Number

The default stroke opacity (0 to 1) for bubble layer symbols.

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

layerDefaults.bubble.style.stroke.width

Number

The default stroke width for bubble layer symbols.

Default: 1

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