Interface RecolorOptions

Configuration options for recoloring all map colors.

The transformations (if specified) are done in the following order:

  1. Invert brightness
  2. Rotate hue
  3. Saturate
  4. Gamma correction
  5. Contrast adjustment
  6. Brightness adjustment
  7. Tinting
  8. Blending

Usage Examples

const style = VersaTilesStyle.colorful({
  recolor: {
    rotate: 180,
    saturate: 0.5,
    brightness: 0.2,
  }
};

If you want do make you map simply brighter or darker, you can use the blend option:

const style = VersaTilesStyle.colorful({
  recolor: {
    blend: 0.5,
    blendColor: '#000000', // to blend all colors with black
    // or blendColor: '#FFFFFF', // to blend all colors with white
  }
};
interface RecolorOptions {
    blend?: number;
    blendColor?: string;
    brightness?: number;
    contrast?: number;
    gamma?: number;
    invertBrightness?: boolean;
    rotate?: number;
    saturate?: number;
    tint?: number;
    tintColor?: string;
}

Properties

blend? blendColor? brightness? contrast? gamma? invertBrightness? rotate? saturate? tint? tintColor?

Properties

Optionalblend

blend?: number

Intensity of the blending effect (0 = none, 1 = full effect). See also RGB.blend

OptionalblendColor

blendColor?: string

The blending color in hex format (default: '#000000'). See also RGB.blend

Optionalbrightness

brightness?: number

Adjust the brightness level.
Positive values make it brighter, negative values make it darker.
Defaults to 0.
See also RGB.brightness

Optionalcontrast

contrast?: number

Adjust the contrast level.
Values > 1 increase contrast, values < 1 decrease it.
Defaults to 1.
See also RGB.contrast

Optionalgamma

gamma?: number

Adjust the gamma (non-linear brightness adjustment).
Defaults to 1.
See also RGB.gamma

OptionalinvertBrightness

invertBrightness?: boolean

If true, inverts all colors' brightness. See also HSL.invertLuminosity

Optionalrotate

rotate?: number

Rotate the hue of all colors in degrees (0-360). See also HSL.rotateHue

Optionalsaturate

saturate?: number

Adjust the saturation level. Positive values increase, negative values decrease saturation.

value effect
-1 grayscale
0 no effect
1 double saturation

See also HSL.saturate

Optionaltint

tint?: number

Intensity of the tinting effect (0 = none, 1 = full effect). See also RGB.tint

OptionaltintColor

tintColor?: string

The tinting color in hex format (default: '#FF0000'). See also RGB.tint

Settings

Member Visibility

On This Page

Properties