MapLibre Style Specification

https://maplibre.org/maplibre-style-spec
Admin
The MapLibre Style Specification defines the visual appearance of a map, outlining what data to...
Tokens:86,308
Snippets:683
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### to-string example with get

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of to-string with a get expression.

```json
"some-property": ["to-string", ["get", "mag"]]
```

--------------------------------

### number-format example with get and format options

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of number-format with a get expression and format options for min and max fraction digits.

```json
"some-property": [
    "number-format",
    ["get", "mag"],
    {"min-fraction-digits": 1, "max-fraction-digits": 1}
]
```

--------------------------------

### object expression example with get

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the object expression using the get expression to retrieve a property value.

```json
"some-property": ["object", ["get", "some-property"]]
```

--------------------------------

### Image source configuration example

Source: https://maplibre.org/maplibre-style-spec/sources

Example of an image source with a URL and coordinates array. The coordinates are [longitude, latitude] pairs in clockwise order: top left, top right, bottom right, bottom left. The url is optional; without it the source starts empty and renders nothing until an image is set at runtime.

```json
"sources": {
    "image": {
        "type": "image",
        "url": "https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif",
        "coordinates": [
            [-80.425, 46.437],
            [-71.516, 46.437],
            [-71.516, 37.936],
            [-80.425, 37.936]
        ]
    }
}
```

--------------------------------

### get expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the get expression to retrieve the value of "someProperty" from the current feature's properties.

```json
"some-property": ["get", "someProperty"]
```

--------------------------------

### string expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the string expression applied to a get expression.

```json
"some-property": ["string", ["get", "name"]]
```

--------------------------------

### to-color example with hex color

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of to-color with a hex color string.

```json
"some-property": ["to-color", "#edf8e9"]
```

--------------------------------

### to-number example with string input

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of to-number with a string input.

```json
"some-property": ["to-number", "someProperty"]
```

--------------------------------

### floor expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the floor expression in a style property.

```json
"some-property": ["floor", 1.5]
```

--------------------------------

### number expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the number expression applied to a get expression.

```json
"some-property": ["number", ["get", "population"]]
```

--------------------------------

### typeof expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the typeof expression applied to a get expression.

```json
"some-property": ["typeof", ["get", "name"]]
```

--------------------------------

### to-boolean example with string input

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of to-boolean with a string input.

```json
"some-property": ["to-boolean", "someProperty"]
```

--------------------------------

### Data expression using get and rgb operators

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of a data expression for the 'circle-color' paint property. It uses the 'get' operator to access the 'temperature' feature property and computes red and blue color components based on that value.

```json
{
    "circle-color": [
        "rgb",
        // red is higher when feature.properties.temperature is higher
        ["get", "temperature"],
        // green is always zero
        0,
        // blue is higher when feature.properties.temperature is lower
        ["-", 100, ["get", "temperature"]]
    ]
}

```

--------------------------------

### asin expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the asin expression in a style property.

```json
"some-property": ["asin", 1]
```

--------------------------------

### min expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the min expression in a style property.

```json
"some-property": ["min", 1, 2]
```

--------------------------------

### match expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the match expression. Returns '#f00' for residential, '#0f0' for commercial, and '#000' as fallback.

```json
"some-property": [
    "match",
    ["get", "building_type"],
    "residential",
    "#f00",
    "commercial",
    "#0f0",
    "#000"
]
```

--------------------------------

### max expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the max expression in a style property.

```json
"some-property": ["max", 1, 2]
```

--------------------------------

### all expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the `all` expression used in a style property to check if the `mag` property is between 4 and 5.

```json
"some-property": ["all", [">=", ["get", "mag"], 4], ["<", ["get", "mag"], 5]]
```

--------------------------------

### let expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the let expression binding a variable and using it in an interpolate expression.

```json
"some-property": [
    "let",
    "someNumber",
    500,
    [
        "interpolate",
        ["linear"],
        ["var", "someNumber"],
        274,
        "#edf8e9",
        1551,
        "#006d2c"
    ]
]
```

--------------------------------

### literal expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the literal expression providing an array of font names.

```json
"some-property": [
    "literal",
    ["DIN Offc Pro Italic", "Arial Unicode MS Regular"]
]
```

--------------------------------

### var expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the var expression referencing a variable named density.

```json
"some-property": ["var", "density"]
```

--------------------------------

### index-of expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the index-of expression to find the position of "foo" in the given array.

```json
"some-property": ["index-of", "foo", ["baz", "bar", "hello", "foo", "world"]]
```

--------------------------------

### global-state expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the global-state expression to retrieve the value of "someProperty" from global state.

```json
"some-property": ["global-state", "someProperty"]
```

--------------------------------

### Light source configuration

Source: https://maplibre.org/maplibre-style-spec/light

Example of the global light source configuration with anchor, color, and intensity properties.

```json
"light": {
  "anchor": "viewport",
  "color": "white",
  "intensity": 0.4
}
```

--------------------------------

### Light position property

Source: https://maplibre.org/maplibre-style-spec/light

Example of setting the position property for the light source.

```json
"position": [1.5, 90, 80]
```

--------------------------------

### Sky configuration example

Source: https://maplibre.org/maplibre-style-spec/sky

Example sky configuration for MapLibre style spec. Shows all sky properties with sample values, including an interpolate expression for atmosphere-blend based on zoom.

```json
"sky": {
    "sky-color": "#199EF3",
    "sky-horizon-blend": 0.5,
    "horizon-color": "#ffffff",
    "horizon-fog-blend": 0.5,
    "fog-color": "#0000ff",
    "fog-ground-blend": 0.5,
    "atmosphere-blend": [
        "interpolate",
        ["linear"],
        ["zoom"],
        0,
        1,
        10,
        1,
        12,
        0
    ]
}
```

--------------------------------

### semiliteral expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the semiliteral expression with get expressions for label coordinates.

```json
"some-property": ["semiliteral", [["get", "label_x"], ["get", "label_y"]]]
```

--------------------------------

### length expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the length expression. Gets the length of the array or string value of the 'myArray' property.

```json
"some-property": ["length", ["get", "myArray"]]
```

--------------------------------

### coalesce expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the coalesce expression. Tries to get an image with a concatenated name, falling back to 'marker_15'.

```json
"some-property": [
    "coalesce",
    ["image", ["concat", ["get", "icon"], "_15"]],
    ["image", "marker_15"]
]
```

--------------------------------

### name property example

Source: https://maplibre.org/maplibre-style-spec/root

Provides a human-readable name for the style.

```json
"name": "Bright"
```

--------------------------------

### *

Source: https://maplibre.org/maplibre-style-spec/expressions

Returns the product of the inputs.

```APIDOC
## [*]

### Description
Returns the product of the inputs.

### Syntax
```
["*", input_1, ..., input_n]: number
```

### Parameters
- `input_i` (number) - Required - Input values to multiply.

### Example
```
"some-property": ["*", 2, 3]
```

### SDK Support
- MapLibre GL JS: 0.41.0
- MapLibre Native Android: 6.0.0
- MapLibre Native iOS: 4.0.0
```

--------------------------------

### transition property example

Source: https://maplibre.org/maplibre-style-spec/root

Defines a global transition with duration and delay. Used as a default for Transitionable properties like fill-color when no property-specific transition is set.

```json
"transition": {"duration": 300, "delay": 0}
```

--------------------------------

### Light anchor property

Source: https://maplibre.org/maplibre-style-spec/light

Example of setting the anchor property to 'map' for the light source.

```json
"anchor": "map"
```

--------------------------------

### distance expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the distance expression in a style property.

```json
"some-property": ["distance", {"type": "Point", "coordinates": [0, 0]}]
```

--------------------------------

### ceil expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the ceil expression in a style property.

```json
"some-property": ["ceil", 1.5]
```

--------------------------------

### abs expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the abs expression in a style property.

```json
"some-property": ["abs", -1.5]
```

--------------------------------

### round expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the round expression in a style property.

```json
"some-property": ["round", 1.5]
```

--------------------------------

### format expression example with style overrides

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of the format expression combining upcase and downcase expressions with style overrides for font-scale and vertical-align.

```json
"some-property": [
    "format",
    ["upcase", ["get", "FacilityName"]],
    {"font-scale": 0.8},
    "\n\n",
    {},
    ["downcase", ["get", "Comments"]],
    {"font-scale": 0.6, "vertical-align": "center"}
]
```

--------------------------------

### step expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example of a step expression. Uses the point_count property as input, with stops at 100, 750, and outputs 20, 30, 40. The output is the value of the stop just less than the input.

```json
"some-property": ["step", ["get", "point_count"], 20, 100, 30, 750, 40]
```

--------------------------------

### atan expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the atan expression in a style property.

```json
"some-property": ["atan", 1]
```

--------------------------------

### layers property example

Source: https://maplibre.org/maplibre-style-spec/root

Defines a style's layers array with a line layer referencing a source and source-layer, with paint styling.

```json
"layers": [
    {
        "id": "coastline",
        "source": "maplibre",
        "source-layer": "countries",
        "type": "line",
        "paint": {"line-color": "#198EC8"}
    }
]
```

--------------------------------

### acos expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the acos expression in a style property.

```json
"some-property": ["acos", 1]
```

--------------------------------

### tan expression example

Source: https://maplibre.org/maplibre-style-spec/expressions

Example usage of the tan expression in a style property.

```json
"some-property": ["tan", 1]
```

--------------------------------

### Color type examples

Source: https://maplibre.org/maplibre-style-spec/types

Shows the permitted color formats for the `color` type: hex, RGB, RGBA, HSL, HSLA, and predefined HTML color names.

```json
{
    "line-color": "#ff0",
    "line-color": "#ffff00",
    "line-color": "rgb(255, 255, 0)",
    "line-color": "rgba(255, 255, 0, 1)",
    "line-color": "hsl(100, 50%, 50%)",
    "line-color": "hsla(100, 50%, 50%, 1)",
    "line-color": "yellow"
}

```
Tokens:
Raw