Edit this page

layerDefaults.shape.style.stroke Object

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

Example - Set default stroke for all shape layers

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

layerDefaults.shape.style.stroke.color String

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

Example - Set default stroke color for all shape layers

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

layerDefaults.shape.style.stroke.dashType String (default: "solid")

The default dash type for layer shapes. 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

Example - Set default dashed stroke for all shape layers

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            shape: {
                style: {
                    stroke: {
                        width: 4,
                        dashType: "longDashDot"
                    }
                }
            }
        },
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>

layerDefaults.shape.style.stroke.opacity Number

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

Example - Set default stroke with opacity for all shape layers

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

layerDefaults.shape.style.stroke.width Number (default: 1)

The default stroke width for layer shapes.

Example - Set default stroke width for all shape layers

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            shape: {
                style: {
                    stroke: {
                        width: 4
                    }
                }
            }
        },
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                data: [{
                    "type": "Polygon",
                    "coordinates": [
                        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
                    ]
                }]
            }
        }]
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy