Map component

Datatype: "map"

A choropleth world map — countries shaded by value on a color scale, with an optional legend. Key your data by ISO-3166 code (or country name) and swap it on every API call to build sales-by-country, coverage and geographic dashboards straight into an image.

Edit it — this is the actual editor panel
Design JSON
{
  "title": "Map sample",
  "description": "A choropleth world map shaded by value",
  "dimensions": {
    "width": 860,
    "height": 460
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-map",
      "key": "map",
      "type": "map",
      "position": {
        "x": 20,
        "y": 20
      },
      "rotation": 0,
      "size": {
        "width": 820,
        "height": 420
      },
      "dynamic": true,
      "properties": {
        "data": [
          {
            "id": "US",
            "value": 920
          },
          {
            "id": "CA",
            "value": 410
          },
          {
            "id": "MX",
            "value": 250
          },
          {
            "id": "BR",
            "value": 300
          },
          {
            "id": "AR",
            "value": 160
          },
          {
            "id": "CL",
            "value": 120
          },
          {
            "id": "CO",
            "value": 140
          },
          {
            "id": "GB",
            "value": 610
          },
          {
            "id": "FR",
            "value": 540
          },
          {
            "id": "DE",
            "value": 700
          },
          {
            "id": "ES",
            "value": 300
          },
          {
            "id": "IT",
            "value": 340
          },
          {
            "id": "PT",
            "value": 130
          },
          {
            "id": "NL",
            "value": 260
          },
          {
            "id": "SE",
            "value": 180
          },
          {
            "id": "NO",
            "value": 150
          },
          {
            "id": "PL",
            "value": 210
          },
          {
            "id": "UA",
            "value": 120
          },
          {
            "id": "RU",
            "value": 480
          },
          {
            "id": "TR",
            "value": 260
          },
          {
            "id": "EG",
            "value": 190
          },
          {
            "id": "ZA",
            "value": 230
          },
          {
            "id": "NG",
            "value": 210
          },
          {
            "id": "KE",
            "value": 110
          },
          {
            "id": "MA",
            "value": 100
          },
          {
            "id": "SA",
            "value": 280
          },
          {
            "id": "AE",
            "value": 240
          },
          {
            "id": "IN",
            "value": 480
          },
          {
            "id": "CN",
            "value": 700
          },
          {
            "id": "JP",
            "value": 560
          },
          {
            "id": "KR",
            "value": 320
          },
          {
            "id": "ID",
            "value": 260
          },
          {
            "id": "TH",
            "value": 180
          },
          {
            "id": "VN",
            "value": 190
          },
          {
            "id": "AU",
            "value": 340
          },
          {
            "id": "NZ",
            "value": 120
          }
        ],
        "basemap": "world",
        "projection": "equirectangular",
        "colorMode": "ramp",
        "baseColor": "#2563eb",
        "emptyColor": "#e5e7eb",
        "showLegend": true,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Map examples

Real renders of the map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Sales by country

A global sales dashboard shaded in a blue intensity ramp.

API overrides for this example
{
  "map.data": [
    {
      "id": "US",
      "value": 920
    },
    {
      "id": "CA",
      "value": 410
    },
    {
      "id": "MX",
      "value": 250
    },
    {
      "id": "BR",
      "value": 300
    },
    {
      "id": "AR",
      "value": 160
    },
    {
      "id": "CL",
      "value": 120
    },
    {
      "id": "CO",
      "value": 140
    },
    {
      "id": "GB",
      "value": 610
    },
    {
      "id": "FR",
      "value": 540
    },
    {
      "id": "DE",
      "value": 700
    },
    {
      "id": "ES",
      "value": 300
    },
    {
      "id": "IT",
      "value": 340
    },
    {
      "id": "PT",
      "value": 130
    },
    {
      "id": "NL",
      "value": 260
    },
    {
      "id": "SE",
      "value": 180
    },
    {
      "id": "NO",
      "value": 150
    },
    {
      "id": "PL",
      "value": 210
    },
    {
      "id": "UA",
      "value": 120
    },
    {
      "id": "RU",
      "value": 480
    },
    {
      "id": "TR",
      "value": 260
    },
    {
      "id": "EG",
      "value": 190
    },
    {
      "id": "ZA",
      "value": 230
    },
    {
      "id": "NG",
      "value": 210
    },
    {
      "id": "KE",
      "value": 110
    },
    {
      "id": "MA",
      "value": 100
    },
    {
      "id": "SA",
      "value": 280
    },
    {
      "id": "AE",
      "value": 240
    },
    {
      "id": "IN",
      "value": 480
    },
    {
      "id": "CN",
      "value": 700
    },
    {
      "id": "JP",
      "value": 560
    },
    {
      "id": "KR",
      "value": 320
    },
    {
      "id": "ID",
      "value": 260
    },
    {
      "id": "TH",
      "value": 180
    },
    {
      "id": "VN",
      "value": 190
    },
    {
      "id": "AU",
      "value": 340
    },
    {
      "id": "NZ",
      "value": 120
    }
  ],
  "map.colorMode": "ramp",
  "map.baseColor": "#2563eb"
}

Users by country (green)

Monthly active users by country in a green ramp with explicit swatches.

API overrides for this example
{
  "map.data": [
    {
      "id": "US",
      "value": 736
    },
    {
      "id": "CA",
      "value": 328
    },
    {
      "id": "MX",
      "value": 200
    },
    {
      "id": "BR",
      "value": 240
    },
    {
      "id": "AR",
      "value": 128
    },
    {
      "id": "CL",
      "value": 96
    },
    {
      "id": "CO",
      "value": 112
    },
    {
      "id": "GB",
      "value": 488
    },
    {
      "id": "FR",
      "value": 432
    },
    {
      "id": "DE",
      "value": 560
    },
    {
      "id": "ES",
      "value": 240
    },
    {
      "id": "IT",
      "value": 272
    },
    {
      "id": "PT",
      "value": 104
    },
    {
      "id": "NL",
      "value": 208
    },
    {
      "id": "SE",
      "value": 144
    },
    {
      "id": "NO",
      "value": 120
    },
    {
      "id": "PL",
      "value": 168
    },
    {
      "id": "UA",
      "value": 96
    },
    {
      "id": "RU",
      "value": 384
    },
    {
      "id": "TR",
      "value": 208
    },
    {
      "id": "EG",
      "value": 152
    },
    {
      "id": "ZA",
      "value": 184
    },
    {
      "id": "NG",
      "value": 168
    },
    {
      "id": "KE",
      "value": 88
    },
    {
      "id": "MA",
      "value": 80
    },
    {
      "id": "SA",
      "value": 224
    },
    {
      "id": "AE",
      "value": 192
    },
    {
      "id": "IN",
      "value": 384
    },
    {
      "id": "CN",
      "value": 560
    },
    {
      "id": "JP",
      "value": 448
    },
    {
      "id": "KR",
      "value": 256
    },
    {
      "id": "ID",
      "value": 208
    },
    {
      "id": "TH",
      "value": 144
    },
    {
      "id": "VN",
      "value": 152
    },
    {
      "id": "AU",
      "value": 272
    },
    {
      "id": "NZ",
      "value": 96
    }
  ],
  "map.colorMode": "ramp",
  "map.colors": [
    "#dcfce7",
    "#86efac",
    "#22c55e",
    "#16a34a",
    "#166534"
  ]
}

All map styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

DivergingSigned values on a diverging red→green scale — for growth and change.
DarkA choropleth on a dark card with a bright ramp — built for social.
US statesA US state choropleth (Albers-USA, Alaska & Hawaii as insets).
Country regionsProvince / state choropleths for Canada, Germany, Australia, Brazil and India.
BubbleProportional-symbol map — a circle at each region sized by value, on a flat basemap.
CategoricalColor regions by a category (not a number) — for groupings like sales regions.

Use cases

What developers typically build with the map component.

  • Sales / revenue / users by country dashboards
  • Coverage and availability maps (where a product ships or works)
  • Survey, election or sentiment results by country
  • Growth / change maps with a diverging red→green scale
  • Year-in-review and report graphics with a geographic breakdown

Use it dynamically via the API

Push fresh regions per render with '<key>.data' as [{ id, value }]; id is an ISO-3166 code (US, FRA) or country name, and the map recolors to match.

Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "map.data": [
        {
            "id": "US",
            "value": 920
        },
        {
            "id": "CA",
            "value": 410
        },
        {
            "id": "MX",
            "value": 250
        },
        {
            "id": "BR",
            "value": 300
        },
        {
            "id": "AR",
            "value": 160
        },
        {
            "id": "CL",
            "value": 120
        },
        {
            "id": "CO",
            "value": 140
        },
        {
            "id": "GB",
            "value": 610
        },
        {
            "id": "FR",
            "value": 540
        },
        {
            "id": "DE",
            "value": 700
        },
        {
            "id": "ES",
            "value": 300
        },
        {
            "id": "IT",
            "value": 340
        },
        {
            "id": "PT",
            "value": 130
        },
        {
            "id": "NL",
            "value": 260
        },
        {
            "id": "SE",
            "value": 180
        },
        {
            "id": "NO",
            "value": 150
        },
        {
            "id": "PL",
            "value": 210
        },
        {
            "id": "UA",
            "value": 120
        },
        {
            "id": "RU",
            "value": 480
        },
        {
            "id": "TR",
            "value": 260
        },
        {
            "id": "EG",
            "value": 190
        },
        {
            "id": "ZA",
            "value": 230
        },
        {
            "id": "NG",
            "value": 210
        },
        {
            "id": "KE",
            "value": 110
        },
        {
            "id": "MA",
            "value": 100
        },
        {
            "id": "SA",
            "value": 280
        },
        {
            "id": "AE",
            "value": 240
        },
        {
            "id": "IN",
            "value": 480
        },
        {
            "id": "CN",
            "value": 700
        },
        {
            "id": "JP",
            "value": 560
        },
        {
            "id": "KR",
            "value": 320
        },
        {
            "id": "ID",
            "value": 260
        },
        {
            "id": "TH",
            "value": 180
        },
        {
            "id": "VN",
            "value": 190
        },
        {
            "id": "AU",
            "value": 340
        },
        {
            "id": "NZ",
            "value": 120
        }
    ],
    "map.basemap": "world",
    "map.projection": "equirectangular",
    "map.colorMode": "ramp",
    "map.baseColor": "#2563eb",
    "map.emptyColor": "#e5e7eb",
    "map.showLegend": true,
    "map.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Property reference

Every property the map component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
dataobject[]text[]Regions: array of { id, value, label? } — id is an ISO-3166 code or name.
basemap'world' | 'us-states' | 'canada-provinces' | 'germany-states' | 'australia-states' | 'brazil-states' | 'india-states'worldus-statescanada-provincesgermany-statesaustralia-statesbrazil-statesindia-states"world"Which bundled basemap to draw: 'world' countries, 'us-states', 'canada-provinces', 'germany-states', 'australia-states', 'brazil-states' or 'india-states'.
mode'choropleth' | 'bubble'choroplethbubble"choropleth"'choropleth' shades regions by value; 'bubble' draws a flat map with a proportional circle at each region's center.
projection'equirectangular' | 'mercator'equirectangularmercator"equirectangular"Map projection: 'equirectangular' (flat) or 'mercator'.
matchBy'auto' | 'iso2' | 'iso3' | 'name'autoiso2iso3name"auto"How a row's id joins to a region: 'auto', 'iso2', 'iso3' or 'name'.
colorMode'ramp' | 'diverging' | 'categorical'rampdivergingcategorical"ramp"'ramp' shades by intensity in one hue; 'diverging' colors +/− values; 'categorical' colors by each row's category.
colorscolor[]text[]Ramp swatches (lightest→darkest); also the palette for categorical mode.
baseColorcolor#2563eb"#2563eb"Ramp hue used when no swatches are given.
emptyColorcolor#e5e7eb"#e5e7eb"Fill for regions with no matching data value.
positiveColorcolor#16a34a"#16a34a"Positive color in diverging mode.
negativeColorcolor#dc2626"#dc2626"Negative color in diverging mode.
scaleMaxnumber00Value mapped to the most saturated color (0 = auto from the data).
levelsnumber55Number of intensity buckets in ramp mode.
strokeColorcolor#ffffff"#ffffff"Color of region borders.
strokeWidthnumber0.50.5Width of region borders (px).
bubbleColorcolor#2563eb"#2563eb"Fill for the proportional bubbles in bubble mode.
bubbleSizenumber11Bubble size multiplier in bubble mode (1 = default).
showLabelsbooleanfalsefalseDraw a label on each region that has data (value or name).
labelField'value' | 'name'valuename"value"What each region label shows: 'value' or the region 'name'.
labelSizenumber11Per-region label size multiplier (1 = default).
showLegendbooleantruetrueDraw a low→high legend strip.
labelColorcolor#64748b"#64748b"Legend + label text color.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently asked questions

Send '<key>.data' as an array of { id, value } objects — id is an ISO-3166 alpha-2 code (US), alpha-3 code (USA) or the country name. Each country is shaded by its value; countries with no row render in emptyColor.

Seven basemaps: 'world' covers every sovereign country (keyed by ISO-3166 code or name), and admin-1 sets cover 'us-states', 'canada-provinces', 'germany-states', 'australia-states', 'brazil-states' and 'india-states' (keyed by the local region code, ISO-3166-2 like 'CA-ON', or region name). Set the basemap property to switch.

Yes — set colorMode to "diverging" and positive values shade toward positiveColor, negatives toward negativeColor, with a neutral middle. Great for GDP growth, net change or over/under-target maps.

Set scaleMax to the value that should map to the darkest color (e.g. 100 for a percentage). Leave it 0 and the scale auto-fits each render’s data range.

We use cookies to run the site and, with your consent, for analytics and marketing. See our Cookie Policy. You can change this any time from “Cookie settings” in the footer.