Skip to main content

​
Overview

Open Mobile Maps provides comprehensive styling capabilities for vector layers, polygons, lines, and other map elements. The SDK supports most of the Vector tiles standard and allows you to customize colors, patterns, and visual properties.

​
Vector Layer Styling

​
Style JSON

Vector layers are styled using a style.json file that follows the Mapbox vector tiles standard: 
val tiledVectorLayer = TiledVectorLayer(
    context, 
    "https://www.sample.org/base-map/style.json"
)
mapView.add(tiledVectorLayer)

​
Style Expressions

The SDK’s style parser supports various expressions for dynamic styling:
  • Data expressions: get, has, !has, in, !in
  • Comparison: ==, !=, <, <=, >, >=
  • Math operations: -, +, /, *, %, ^
  • Logical: all, any, !
  • Control flow: case, match, coalesce
  • Type conversion: to-string, to-boolean, to-number
  • Interpolation: interpolate, step
  • Text formatting: format, number-format, concat, length
  • Zoom-based: zoom
  • State-based: feature-state, global-state

​
Colors

​
Color Structure

Colors in Open Mobile Maps are represented with RGBA values (0.0 to 1.0 range): 
struct Color {
    float r;  // Red component (0.0 - 1.0)
    float g;  // Green component (0.0 - 1.0)
    float b;  // Blue component (0.0 - 1.0)
    float a;  // Alpha/transparency (0.0 - 1.0)
}

​
Color State List

Many elements support different colors for normal and highlighted states: 
struct ColorStateList {
    Color normal;
    Color highlighted;
}

LineStyle(
    color = ColorStateList(
        normal = Color(1.0f, 0.0f, 0.0f, 1.0f),      // Red
        highlighted = Color(1.0f, 0.5f, 0.0f, 1.0f)  // Orange
    ),
    // ... other properties
)

​
Line Styling

​
Line Style Properties

Lines can be customized with extensive styling options: 
val line = LineFactory.createLine(
    identifier = "lineIdentifier",
    coordinates = lineCoordinates,
    style = LineStyle(
        color = ColorStateList(
            normal = Color(1.0f, 0.0f, 0.0f, 1.0f),
            highlighted = Color(1.0f, 0.5f, 0.0f, 1.0f)
        ),
        gapColor = ColorStateList(
            normal = Color(0.0f, 0.0f, 0.0f, 0.0f),
            highlighted = Color(0.0f, 0.0f, 0.0f, 0.0f)
        ),
        opacity = 1.0f,
        blur = 0.0f,
        widthType = SizeType.SCREEN_PIXEL,
        width = lineWidth,
        dashArray = arrayListOf(4.0f, 2.0f),
        dashFade = 0f,
        dashAnimationSpeed = 0f,
        lineCap = LineCapType.SQUARE,
        lineJoin = LineJoinType.ROUND,
        offset = 0f,
        dotted = false,
        dottedSkew = 0.0
    )
)

​
Line Style Parameters

ParameterTypeDescription
colorColorStateListLine color for normal and highlighted states
gapColorColorStateListColor for gaps in dashed lines
opacityfloatLine opacity (0.0 - 1.0)
blurfloatBlur amount applied to the line
widthTypeSizeTypeSCREEN_PIXEL or MAP_UNIT
widthfloatLine width in specified units
dashArrayfloat[]Pattern for dashed lines (e.g., [4.0, 2.0])
dashFadefloatFade distance for dash transitions
dashAnimationSpeedfloatSpeed of dash animation
lineCapLineCapTypeBUTT, ROUND, or SQUARE
lineJoinLineJoinTypeMITER, BEVEL, or ROUND
offsetfloatPerpendicular offset from line center
dottedbooleanEnable dotted line pattern
dottedSkewfloatSkew angle for dotted pattern

​
Polygon Styling

​
Polygon Style Properties

Polygons support fill color and opacity: 
val polygonInfo = PolygonInfo(
    identifier = "Polygon",
    coordinates = PolygonCoord(
        positions = coordinates,
        holes = holeCoordinates
    ),
    color = Color(1.0f, 0.0f, 0.0f, 0.5f),  // Semi-transparent red
    highlightColor = Color(1.0f, 0.4f, 0.4f, 0.7f)
)

​
Polygon Patterns

The SDK supports pattern fills for polygons through the polygon pattern tile system. Pattern textures can be applied to create textured polygon fills.

​
Raster Shader Styling

Raster layers can be styled using shader-based effects: 
struct RasterShaderStyle {
    float brightness;
    float contrast;
    float saturation;
    float gamma;
    // Additional shader parameters
}
This allows for dynamic adjustment of raster layer appearance including brightness, contrast, saturation, and gamma correction.

​
Best Practices

  • Use SCREEN_PIXEL for UI elements that should maintain consistent size
  • Use MAP_UNIT for geographic features that should scale with the map
  • Limit the number of style variations to improve rendering performance
  • Cache style objects when reusing the same style across multiple features
  • Use RGBA values in the 0.0-1.0 range for consistency across platforms
  • Consider accessibility when choosing color combinations
  • Test colors under different lighting conditions
  • Use alpha channel for transparency effects
  • Use data-driven expressions for dynamic styling based on feature properties
  • Leverage zoom expressions to change styles at different zoom levels
  • Combine expressions using case and match for complex logic
  • Test expression performance with large datasets

Layer Configuration

Configure tiled layer settings and zoom levels

Touch Handlers

Customize gesture handling and interactions

Build docs developers (and LLMs) love

Get started for freeTalk to us