layers.style.fill Object

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

Example set shape fill

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "shape",
            style: {
                fill: {
                    color: "red",
                    opacity: 1
                }
            },
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>

layers.style.fill.color String

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

Example - setting fill color for shape layer

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "shape",
            style: {
                fill: {
                    color: "red"
                }
            },
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>

layers.style.fill.opacity Number

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

Example - setting fill opacity for shape layer

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "shape",
            style: {
                fill: {
                    color: "red",
                    opacity: 0.5
                }
            },
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>