Color System

json-maps uses a flexible color system. Colors can be static values or data-driven mappings.

Color Value Types

A ColorValue can be one of:

• Static string — "#e74c3c", "rgb(52, 152, 219)", "steelblue"
• Continuous mapping — numeric attribute to gradient
• Categorical mapping — string attribute to discrete colors

Continuous

Map a numeric property to a color gradient using a palette.

{
  "type": "continuous",
  "attr": "temperature",
  "palette": "Sunset",
  "domain": [0, 40]
}

• type — "continuous" (required)
• attr — feature property name (required)
• palette — CartoColor palette name (required)
• domain — [min, max] value range, auto-detected if omitted
• nullColor — color for null/missing values

Categorical

Map a string property to discrete colors.

{
  "type": "categorical",
  "attr": "zone_type",
  "palette": "Bold",
  "categories": ["residential", "commercial", "industrial"]
}

• type — "categorical" (required)
• attr — feature property name (required)
• palette — CartoColor palette name
• categories — explicit category list
• nullColor — color for null/missing values

Palettes

All palettes from CartoColor:

Examples

Choropleth with continuous color:

{
  "layers": {
    "population": {
      "type": "geojson",
      "data": "https://example.com/states.geojson",
      "style": {
        "fillColor": {
          "type": "continuous",
          "attr": "population",
          "palette": "Sunset",
          "domain": [500000, 40000000]
        },
        "opacity": 0.7,
        "lineColor": "#fff",
        "lineWidth": 0.5
      }
    }
  }
}

Zoning map with categorical color:

{
  "layers": {
    "zones": {
      "type": "geojson",
      "data": "https://example.com/zones.geojson",
      "style": {
        "fillColor": {
          "type": "categorical",
          "attr": "zone_type",
          "palette": "Bold"
        },
        "opacity": 0.6
      }
    }
  }
}