Default map styles

📘
Note
The 3.1 version of this API has been deprecated. For continued support and feature development, upgrade to the latest 3.2 version.

The following draw styles allow you to render basic map elements, such as polygons, lines, points, and text, with consistency. The Maps API for JavaScript allows you to access and adjust these draw styles to easily customize and maintain the map's appearance as needed, ensuring a coherent visual representation of geographical data across various applications.

📘
Tip

To understand the general structure of the style configuration see Scene structure overview.

To learn how to create a layer in Maps API for JavaScript using a custom style, see Practical examples and applications.

To learn how to extend the default draw styles for reuse across layers, see Custom map styles

Polygons

You can use polygons for rendering filled areas on the map. Polygons are particularly useful for highlighting regions, drawing boundaries, or representing geographical features with distinct, closed shapes. You can assign polygons with the following properties:

color - string, function. The property indicates the color of the feature. The string follows the CSS format of the color definitions and can take following forms:
- CSS named colors
- [r, g, b, a] - array that contains RGBA values in the range 0...1
- '#RRGGBB' - RGB hex string
- rgb(R, G, B) - CSS rgb color in the range 0...255 or 0%...100%
- rgba(R, G, B, A) - CSS rgb color in the range 0...255 and alpha channel in the range 0...1
```
draw:
  polygons:
    color: rgb(255, 0, 0)
```
extrude (optional) - boolean, integer, [min, max], function. The property indicates if the polygon must extrudes along the Z axis (for example, to extrude building outline polygon). The default value is false. You can assign this property the following values:
- boolean - when set to true, the extrusion height derives from the height property of the feature.
- integer - extrusion height in meters
- [min, max] - the range defines that the polygon extrusion must start at min meters over the ground and that the polygon must extrude up to max meters over the ground.
- function - function that returns the number.
interactive (optional) - boolean. The property indicates whether the feature is accessible through the API call (for example, H.Map.getObjectAt call). The default value is false.
order - integer, function. The property defines the rendering order of the logical layers. Layers with the higher values appear on top.
style (optional) - string. The property references the style defined in the styles section of the configuration. For more information, see Custom map styles.
visible (optional) - boolean. The property indicates if the map renders the feature. The default value is true.

Lines

Use the line style for rendering paths, routes, or any linear features on the map. It helps in differentiating road networks, rivers, or any linear objects. You can use lines with the layers that contain either open or closed shapes.

dash - (optional) - [...number]. The property contains an array of numbers and describes the dash pattern used to render the lines. It follows the general logic of the SVG dash-array. For example, the following snippet defines the dash length 2 units long with the 1 unit gaps.
```
draw:
  lines:
    dash: [2, 1]
```
cap (optional) - string. The property sets the shape of the line's ends and could take values butt, square and round. The default value is butt.
color - string, function, mandatory. The property indicates the color of the feature. The string follows the CSS format of the color definitions and can take the following forms:
- CSS named colors
- [r, g, b, a] - array that contains RGBA values in the range 0...1
- '#RRGGBB' - RGB hex string
- rgb(R, G, B) - CSS rgb color in the range 0...255 or 0%...100%
- rgba(R, G, B, A) - CSS rgb color in the range 0...255 and alpha channel in the range 0...1
```
draw:
  lines:
    color: rgb(255, 0, 0)
```
extrude (optional) - boolean, integer, [min, max], function. The property indicates if the polygon must extrude along the Z axis (for example, you might use to extrude building outline polygon). The default value is false.
- boolean - when set to true. the extrusion height derives from the height property of the feature.
- integer - extrusion height in meters
- [min, max] - the range defines that the polygon extrusion must start at min meters over the ground and it extrudes up to max meters over the ground.
- function - function that returns the number, for more information see the [Functions].
interactive (optional) - boolean, optional. The property indicates whether the feature can is accessible through the API call (for example, H.Map.getObjectAt call). The default value is false.
join (optional) - string. The property defines the shape of the line joints and can take values bevel, round and miter. The default value is miter.
miter_limit (optional) - integer. The parameter defines maximum length of the miter join. The default value is 3.
offset (optional) - float, [...[zl, float]]. The parameter sets the offset of the line segment in meters (m) or pixels (px). The offset applies normal to the original segment orientation. The possible formats are:
- A floating point number to use across all zoom levels.
- An array of two-element arrays, where first element is the zoom level and the second element defines the offset. In the following example, offset is 10px at the zoom level 16 and 4px at the zoom level 19.
```
draw:
  lines:
    offset: [[16, 10px], [19, 4px]]
```
order - number, function. The property defines the rendering order of the logical layers. Layers with the higher values appear on top.
outline - block level element that defines the outline style of the line. It can contain any lines style parameters. The following example defines a 1 pixel black outline for the 3 pixel blue polyline tileset.
```
draw:
  lines:
    order: 1
    width: 3px
    color: [0.055, 0.604, 0.914, 1.00]
    outline:
      width: 1px
      color: rgb(0, 0, 0)
```
style (optional) - string. The property references the style defined in the styles section of the configuration. For more information, see Custom map styles.
visible (optional) - boolean. The property indicates whether the map renders the feature. The default value is true.
width - float, [...[zl, float]], function. The property defines width of the line. The width could be in meters - m or pixels - px. The possible formats are:
- A floating point or integer number, that's applicable across all zoom levels.
- An array of two-element arrays, where first element is the zoom level and the second element defines the width. In following example, the width of the line is 5 pixels at the zoom level 15 and 15 pixels at the zoom level 18:
```
draw:
  lines:
    width: [[15, 5px], [18, 15px]]
```
- A function that returns a floating point number.

Points

Employ this style for rendering individual markers or points of interest on the map. It helps in marking locations or highlighting specific spots. Use the points style to visualize open and closed shapes or set of points. The style draws a circle with the defined size in the location of the data point.

anchor (optional) - string, [...string]. The property defines the side of the geometry on which the feature renders. Possible values are center, left, right, top, bottom, top-left, top-right, bottom-left, and bottom-right. When you define the parameter value as an array of strings, the renderer uses the first anchor where the feature doesn't collide with others. The default value is ['bottom', 'top', 'right', 'left'].
collide (optional) - boolean. The property changes the collision detection setting. When set to false, the API discards intersecting points during the rendering. The default value is true.
color - string, mandatory. The property indicates the color of the feature. The string follows the CSS format of the color definitions and can take following forms:
- CSS named colors
- [r, g, b, a] - array that contains RGBA values in the range 0...1
- '#RRGGBB' - RGB hex string
- rgb(R, G, B) - CSS rgb color in the range 0...255 or 0%...100%
- rgba(R, G, B, A) - CSS rgb color in the range 0...255 and alpha channel in the range 0...1
```
draw:
  points:
    color: rgb(255, 0, 0)
```
flat (optional) - boolean. The property indicates if you project the point into the world space. When set to true, the point representation appears "flat" on the map surface and responds to camera movements accordingly.
interactive (optional) - boolean. The property indicates whether the feature is accessible through an API call (for example H.Map.getObjectAt call). The default value is false.
offset (optional) - [integer, integer], [...[zl, [integer, integer]]. The parameter shifts the point from the position defined in the data layer. You define the offset in screen pixels (px) and you apply it to the point feature itself or to the text block element of the point feature. You can also define the offset as an array of two element arrays, where the first element is the zoom level and the second element is [x, y] pixel coordinates. In the following example, the offset is 10 pixels on the X-axis for the zoom level 15 and -10 pixels for the zoom level 16.
```
draw:
  points:
    offset: [[15, [10px, 0px]], [16, [-10px, 0px]]]
```
order - number, function, mandatory. The property defines the rendering order of the logical layers. Layers with the higher values appear on top.
outline - block level element that defines the outline style of the line. It can contain any lines style parameters. The following example defines a 1 pixel black outline for the 3 pixel blue polyline.
```
draw:
  points:
    order: 1
    size: 3px
    color: [0.055, 0.604, 0.914, 1.00]
    outline:
      width: 1px
      color: rgb(0, 0, 0)
```
placement (optional) - string. The parameter defines the placement of the point when the data layer contains polygons or lines data. Possible values are:
- vertex - places points on the line or polygon vertices.
- midpoint - places points on the geometry segment midpoint.
- spaced - places points along the geometry with the intervals between points provided in the placement_spacing property.
- centroid - places the point at the geometry centroid. The data layer must provide polygons. The default value is vertex.
placement_min_length_ratio (optional) - integer, [...[zl, integer]], function. The parameter defines the ratio between the geometry's segment (applicable only for lines and polygons) and the point size. Use this parameter to prevent points rendering on the segments that are smaller than the point itself.
placement_spacing - float, [...[zl, float]], function, optional. The parameter defines the distance in screen pixels (px) between two points. Use this parameter when the placement property value is spaced. The default value is 80px.
priority (optional) - integer, function. The parameter defines the drawing priority of the feature. Lower number indicates higher priority, where features have more chance to render. The default value is Number.MAX_SAFE_INTEGER.
size (optional) - integer, [integer, integer], [...[zl, integer]], [...[zl, [integer, integer]]]. The parameter defines the size of the point in px or %. When you set the value to a single integer, for example, 6px, the API renders a point with a 6-pixel diameter. If you set the parameter to an array of two integer values, for example, [5px, 10px], the API renders an ellipsoid with a diameter of 5 pixels on the X-axis and 10 pixels on the Y-axis.
style (optional) - string. The property references the style defined in the styles section of the configuration. For more information, see Custom map styles.
text (optional) - The parameter represents the block level element that defines the rendering of the text label associated with the point. For available properties, see the text style.
visible (optional) - boolean. The property indicates if the feature renders. The default value is true.

Text

The text style is useful for displaying labels, annotations, or textual information on the map. It enhances the readability of map elements. You can use this style with open or closed geometries and points. When you use the style with an open geometry (for example, line), the API places the label along the line. If you use a polygon as a source geometry, the API places text in the centroid. This style has the following properties available:

align (optional) - string. The property sets the alignment of the text for the multiline labels. Possible values are left, center and right. The default value is center.
anchor (optional) - string, [...string]. The property defines the side of the geometry on which to render the feature. Possible values are center, left, right, top, bottom, top-left, top-right, bottom-left, and bottom-right. When you define the parameter value as an array of strings, the renderer uses the first anchor where the feature doesn't collide with others. The default value is ['bottom', 'top', 'right', 'left'].
background (optional) - the property defines text box background.
- color - string, function. The property indicates background color of the text box. The string follows the CSS format of the color definitions and can take the same forms as outline color.
collide (optional) - boolean. The property changes the collision detection setting. When set to false, the API discards intersecting text labels during the rendering. The default value is true.
font. Block level element that defines the appearance of the font.
- family (optional) - string. The parameter sets the typeface. The default value is Helvetica.
- fill (optional) - string. The property indicates the color of the text and follows the general color definition rules. The default value is white.
- size - integer. The parameter defines the size of the text, possible units are px, pt and em.
- stroke - {color: string, width: integer}, optional. The parameter defines the color and width of the font outline. The following example set the stroke width to 2 pixels and the color the blue:
```
draw:
  text:
    font:
      size: 20px
      stroke:
        color: blue
        width: 2
```
  📘
  Note
  Color and width follow the general rules outlined in the size and color properties.
- style (optional) - string. The parameter defines the font style, the values could be italic and normal. The default value is normal.
- transform (optional) - string. The parameter transforms the text into uppercase or lowercase register and takes lowercase and uppercase as values, respectively.
interactive (optional) - boolean. The property indicates whether the feature is accessible through an API call (for example, H.Map.getObjectAt call). The default value is false.
max_lines - integer, optional. The parameter sets the maximum number of lines that the text can occupy, and is relevant only when you enabled the text wrapping (for more information, see the text_wrap property definition).
offset - [integer, integer], [...[zl, [integer, integer]], optional. The parameter shifts the text from the position defined in the data layer. The offset works in the screen pixels (px). It can be also defined as an array of two element arrays, where the first element is the zoom level and the second element is the [x, y] pixel coordinates. In the following example, the offset is 10 pixels on the X-axis for the zoom level 15 and -10 pixels for the zoom level 16.
```
draw:
  text:
    offset: [[15, [10px, 0px]], [16, [-10px, 0px]]]
```
outline - optional. The property defines the color and width of the text box outline.
- color - string, function, mandatory. The property indicates the color of the outline. The string follows the CSS format of the color definitions and can take the following forms:
  - CSS named colors
  - [r, g, b, a] - array that contains RGBA values in the range 0...1
  - '#RRGGBB' - RGB hex string
  - rgb(R, G, B) - CSS rgb color in the range 0...255 or 0%...100%
  - rgba(R, G, B, A) - CSS rgb color in the range 0...255 and alpha channel in the range 0...1
- width - integer, mandatory. The property defines outline width in pixels.
order - number, function, mandatory. The property defines the rendering order of the logical layers. Layers with the higher values appear on top.
padding - [integer, integer, integer, integer], [integer, integer], optional. The property defines text padding. You can specify this property value as an array of 4 elements that define top, right, bottom, and left padding correspondingly. You can also specify the value as an array of 2 elements that define vertical and horizontal padding.
priority - integer, function, optional. The parameter defines the drawing priority of the feature. Lower number indicates higher priority, features with the higher priority have more chance of rendering. The default value is Number.MAX_SAFE_INTEGER.
repeat_distance - integer, optional. The property defines the label frequency within the tile boundaries. The API measures the distance from the center point of the label and can be treated as a bounding sphere for the current repeat_group. The default value is 256px.
repeat_group - string, optional. The property defines the name according the labels grouping. Labels from the different data layers can have the same repeat_group name. For these labels, the same repeat_distance applies.
style - string, optional. The property references the style defined in the styles section of the configuration. For more information, see Custom map styles.
text_source - string, function, [...string|function], optional. The parameter sets the name of the property for the label text. This can be a string literal that's the name of the property, a function that returns the string literal, or an array of strings or functions. In the latter case, the API uses the first non-null value for the label. The default value is name.
text_wrap - integer, optional. The property sets the number of characters after the wrapped text label.
visible - boolean, optional. The property indicates whether the feature renders. The default value is true.