New to Kendo UI for Angular? Start a free 30-day trial
Customizing Map
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-map-border-width | Number | 0px | 0px |
Description
The border width of the Map. | |||
| $kendo-map-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Map. | |||
| $kendo-map-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Map. | |||
| $kendo-map-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Map. | |||
| $kendo-map-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Map. | |||
| $kendo-map-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) |
Description
The text color of the Map. | |||
| $kendo-map-border | String | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description
The border color of the Map. | |||
| $kendo-map-navigator-margin | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The margin of the Map navigator. | |||
| $kendo-map-navigator-padding | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The padding of the Map navigator. | |||
| $kendo-map-navigator-width | Calculation | calc( calc( #{$kendo-icon-size} * 3 ) + calc( #{$kendo-map-navigator-padding} * 2 ) ) | calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) |
Description
The width of the Map navigator. | |||
| $kendo-map-navigator-height | Calculation | $kendo-map-navigator-width | calc(16px * 3 + var(--kendo-spacing-0\.5, 0.125rem) * 2) |
Description
The height of the Map navigator. | |||
| $kendo-map-navigator-border-width | Number | 1px | 1px |
Description
The border width of the Map navigator. | |||
| $kendo-map-zoom-control-margin | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The margin of the Map zoom control. | |||
| $kendo-map-zoom-control-button-padding-x | String | $kendo-button-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Map zoom control. | |||
| $kendo-map-zoom-control-button-padding-y | String | $kendo-map-zoom-control-button-padding-x | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the Map zoom control. | |||
| $kendo-map-attribution-padding-x | String | $kendo-padding-sm-x | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the Map attribution. | |||
| $kendo-map-attribution-padding-y | String | $kendo-padding-sm-y | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the Map attribution. | |||
| $kendo-map-attribution-font-size | Calculation | calc( #{$kendo-map-font-size} * .75) | calc(var(--kendo-font-size, inherit) * 0.75) |
Description
The font size of the Map attribution. | |||
| $kendo-map-attribution-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) | color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent) |
Description
The background color of the Map attribution. | |||
| $kendo-map-marker-fill | String | $kendo-color-primary | var(--kendo-color-primary, #ff6358) |
Description
The fill color of the Map marker. | |||