layerDefaults.bubble.style.fill Object

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

Example - Set default fill for all bubble layers

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

layerDefaults.bubble.style.fill.color String

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

Example - Set default fill color for all bubble layers

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

layerDefaults.bubble.style.fill.opacity Number

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

Example - Set default fill with opacity for all bubble layers

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