# Style techniques reference for custom layers This reference describes the style techniques that can be used to customize the visual appearance of a custom layer through the use of custom styles - as described in the [style guide for custom layers](custom-map-styles-style-guide.md). ## Technique index * [raster](#raster-technique) * [line](#line-technique) * [polygon](#polygon-technique) * [icon-text](#icon-text-technique) ## Techniques ### raster technique #### opacity Factor applied to the texture color alpha value in order to control the opacity of the texture. > Type: `real` > Default Value: `1.0` #### brightness Factor applied to the texture color rgb values in order to control the brightness. > Type: `real` > Default Value: `1.0` #### gamma Texture gamma correction value. > Type: `real` > Default Value: `1.0` ### line technique #### width The width of the line in meters. > Type: `real` > Default Value: `1.0` #### color The [color](custom-map-styles-style-expressions.md#color) of the line. > Type: `color` > Default Value: `"#ffffff"` #### visible Whether the line is visible (drawn on the map). > Type: `boolean` > Default Value: `true` #### z-order The relative rendering order of items within a category. Higher z-order item will be drawn on top of lower z-order item. The order between items within one category and with the same z-order is undefined. > Type: `unsigned integer` > Default Value: `0` ### polygon technique #### color The [color](custom-map-styles-style-expressions.md#color) of the polygon. > Type: `color` > Default Value: `"#ffffff"` #### visible Whether the polygon is visible (drawn on the map). > Type: `boolean` > Default Value: `true` #### z-order The relative rendering order of items within a category. Higher z-order item will be drawn on top of lower z-order item. The order between items within one category and with the same z-order is undefined. > Type: `unsigned integer` > Default Value: `0` ### icon text technique #### icon-source Source of the icon to display. Can be an asset file path or an absolute file path. Icon supported formats are PNG, JPEG, SVG Tiny. > Type: `string` > Default Value: `""` #### icon-width Width of the icon. When not provided, the `icon-height` matching value that would preserve the icon source aspect ratio is used. > Type: `real` > Default Value: `-1.0` Examples using an icon with original width of 600 pixels and height of 400 pixels: | icon-width | icon-height | Displayed width | Displayed height | | ---------- | ----------- | --------------- | ---------------- | | - | - | 600 | 400 | | 300 | 200 | 300 | 200 | | 300 | - | 300 | 200 | | - | 800 | 1200 | 800 | #### icon-height Height of the icon. When not provided, the `icon-width` matching value that would preserve the icon source aspect ratio is used. > Type: `real` > Default Value: `-1.0` Examples using an icon with original width of 600 pixels and height of 400 pixels: | icon-width | icon-height | Displayed width | Displayed height | | ---------- | ----------- | --------------- | ---------------- | | - | - | 600 | 400 | | 300 | 200 | 300 | 200 | | 300 | - | 300 | 200 | | - | 800 | 1200 | 800 | #### icon-placement List of cardinal directions to define the placement of the icon with respect to the anchor point. One or more comma separated values: TR, R, BR, B, BL, L, TL, T, C. > Type: `string` > Default Value: `"C"` | Placement | Details | | --------- | ------------------------------------------------------------- | | C | Center: icon center would match with the anchor point. | | T | Top: icon bottom center will match with the anchor point. | | L | Left: icon right-center will match with the anchor point. | | R | Right: icon left-center will match with the anchor point. | | B | Bottom: icon top-center will match with the anchor point. | | TL | Top-Left: icon bottom-right will match with the anchor point. | | TR | Top-Right: icon bottom-left will match with the anchor point. | | BL | Bottom-Left: icon top-right will match with the anchor point. | | BR | Bottom-Right: icon top-left will match with the anchor point. | #### icon-dx Offset to apply to the icon in pixels on the x axis. The displacement direction depends on the icon's placement. Positive values move the icon to the right for C, T, TR, R, BR, B and to the left for TL, L, BL. > Type: `real` > Default Value: `0.0` #### icon-dy Offset to apply to the icon in pixels on the y axis. The displacement direction depends on the icon's placement. Positive values move the icon upwards for C, L, TL, T, TR, R and downwards for BL, B, BR. > Type: `real` > Default Value: `0.0` #### text Text to be displayed. > Type: `string` > Default Value: `""` #### text-placement Cardinal directions that define the text's placement with respect to the icon. Can be defined as one or more comma separated values. The possible values are comprised of C, T, TR, R, BR, B, BL, L, TL. > Type: `string` > Default Value: `"C"` | Placement | Details | | --------- | ------------------------------------------------------------------------------------------------------------------------- | | C | Center: text centered in the icon. | | T | Top: text centered top of the icon. The bottom-center of the text area would match with the icon top-center. | | L | Left: text placed left of the icon. The right-center of the text area would match with the icon left-center. | | R | Right: text placed right of the icon. The left-center of the text area would match with the icon right-center. | | B | Bottom: text placed at the bottom of the icon. The top-center of the text area would match with the icon bottom-center. | | TL | Top-Left: text placed top-left of the icon. The bottom-right of the text area would match with the icon top-left. | | TR | Top-Right: text placed top-right of the icon. The bottom-left of the text area would match with the icon top-right. | | BL | Bottom-Left: text placed bottom-left of the icon. The top-right of the text area would match with the icon bottom-left. | | BR | Bottom-Right: text placed bottom-right of the icon. The top-left of the text area would match with the icon bottom-right. | #### text-dx Offset to apply to the text in pixels on the x axis. The displacement direction depends on the text's placement. Positive values move the text to the right for C, T, TR, R, BR, B and to the left for TL, L, BL. > Type: `real` > Default Value: `0.0` #### text-dy Offset to apply to the text in pixels on the y axis. The displacement direction depends on the text's placement. Positive values move the text upwards for C, L, TL, T, TR, R and downwards for BL, B, BR. > Type: `real` > Default Value: `0.0` #### text-color Text [color](custom-map-styles-style-expressions.md#color). > Type: `color` > Default Value: `"#ffffffff"` #### text-outline-width Text outline width in pixels. > Type: `real` > Default Value: `0.0` #### text-outline-color Text outline [color](custom-map-styles-style-expressions.md#color). > Type: `color` > Default Value: `"#000000ff"` #### text-size Text font size in pixels. The font used is FiraGO. > Type: `real` > Default Value: `18.0` #### z-order The relative rendering order of items within a category. Higher z-order item will be drawn on top of lower z-order item. The order between items within one category and with the same z-order is undefined. > Type: `unsigned integer` > Default Value: `0` #### visible Whether the item is visible (drawn on the map). > Type: `boolean` > Default Value: `true`