Categorical map
Map styletype: "map"Render categorical maps — countries or states colored by a category like sales region, tier or segment, with a legend. Fresh data per API call. Create map images free with Imejis.
Edit it — this is the actual editor panel
Design JSON — “Categorical” variant
{
"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": 1,
"category": "Americas"
},
{
"id": "CA",
"value": 1,
"category": "Americas"
},
{
"id": "MX",
"value": 1,
"category": "Americas"
},
{
"id": "BR",
"value": 1,
"category": "Americas"
},
{
"id": "AR",
"value": 1,
"category": "Americas"
},
{
"id": "CL",
"value": 1,
"category": "Americas"
},
{
"id": "CO",
"value": 1,
"category": "Americas"
},
{
"id": "GB",
"value": 1,
"category": "EMEA"
},
{
"id": "FR",
"value": 1,
"category": "EMEA"
},
{
"id": "DE",
"value": 1,
"category": "EMEA"
},
{
"id": "ES",
"value": 1,
"category": "EMEA"
},
{
"id": "IT",
"value": 1,
"category": "EMEA"
},
{
"id": "NL",
"value": 1,
"category": "EMEA"
},
{
"id": "SE",
"value": 1,
"category": "EMEA"
},
{
"id": "PL",
"value": 1,
"category": "EMEA"
},
{
"id": "ZA",
"value": 1,
"category": "EMEA"
},
{
"id": "NG",
"value": 1,
"category": "EMEA"
},
{
"id": "EG",
"value": 1,
"category": "EMEA"
},
{
"id": "SA",
"value": 1,
"category": "EMEA"
},
{
"id": "AE",
"value": 1,
"category": "EMEA"
},
{
"id": "IN",
"value": 1,
"category": "APAC"
},
{
"id": "CN",
"value": 1,
"category": "APAC"
},
{
"id": "JP",
"value": 1,
"category": "APAC"
},
{
"id": "KR",
"value": 1,
"category": "APAC"
},
{
"id": "ID",
"value": 1,
"category": "APAC"
},
{
"id": "TH",
"value": 1,
"category": "APAC"
},
{
"id": "VN",
"value": 1,
"category": "APAC"
},
{
"id": "AU",
"value": 1,
"category": "APAC"
},
{
"id": "NZ",
"value": 1,
"category": "APAC"
}
],
"basemap": "world",
"projection": "equirectangular",
"colorMode": "categorical",
"baseColor": "#2563eb",
"emptyColor": "#eef2f7",
"showLegend": true,
"opacity": 1
}
}
]
}Map examples
Real renders of the categorical map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Sales regions
Countries grouped into Americas, EMEA and APAC.
API overrides for this example
{
"map.colorMode": "categorical",
"map.data": [
{
"id": "US",
"value": 1,
"category": "Americas"
},
{
"id": "CA",
"value": 1,
"category": "Americas"
},
{
"id": "MX",
"value": 1,
"category": "Americas"
},
{
"id": "BR",
"value": 1,
"category": "Americas"
},
{
"id": "AR",
"value": 1,
"category": "Americas"
},
{
"id": "CL",
"value": 1,
"category": "Americas"
},
{
"id": "CO",
"value": 1,
"category": "Americas"
},
{
"id": "GB",
"value": 1,
"category": "EMEA"
},
{
"id": "FR",
"value": 1,
"category": "EMEA"
},
{
"id": "DE",
"value": 1,
"category": "EMEA"
},
{
"id": "ES",
"value": 1,
"category": "EMEA"
},
{
"id": "IT",
"value": 1,
"category": "EMEA"
},
{
"id": "NL",
"value": 1,
"category": "EMEA"
},
{
"id": "SE",
"value": 1,
"category": "EMEA"
},
{
"id": "PL",
"value": 1,
"category": "EMEA"
},
{
"id": "ZA",
"value": 1,
"category": "EMEA"
},
{
"id": "NG",
"value": 1,
"category": "EMEA"
},
{
"id": "EG",
"value": 1,
"category": "EMEA"
},
{
"id": "SA",
"value": 1,
"category": "EMEA"
},
{
"id": "AE",
"value": 1,
"category": "EMEA"
},
{
"id": "IN",
"value": 1,
"category": "APAC"
},
{
"id": "CN",
"value": 1,
"category": "APAC"
},
{
"id": "JP",
"value": 1,
"category": "APAC"
},
{
"id": "KR",
"value": 1,
"category": "APAC"
},
{
"id": "ID",
"value": 1,
"category": "APAC"
},
{
"id": "TH",
"value": 1,
"category": "APAC"
},
{
"id": "VN",
"value": 1,
"category": "APAC"
},
{
"id": "AU",
"value": 1,
"category": "APAC"
},
{
"id": "NZ",
"value": 1,
"category": "APAC"
}
],
"map.emptyColor": "#eef2f7"
}When to use the categorical style
- Sales regions or territories (EMEA / APAC / Americas)
- Plan tier, segment or status by country or state
- Any qualitative grouping rather than a numeric scale
Use it dynamically via the API
Push fresh regions per render with '<key>.data' (or just '<key>') as [{ id, value }]; id is an ISO-3166 code (US, FRA) or country name, and the map recolors to match.
Full API request with this variant'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": 1,
"category": "Americas"
},
{
"id": "CA",
"value": 1,
"category": "Americas"
},
{
"id": "MX",
"value": 1,
"category": "Americas"
},
{
"id": "BR",
"value": 1,
"category": "Americas"
},
{
"id": "AR",
"value": 1,
"category": "Americas"
},
{
"id": "CL",
"value": 1,
"category": "Americas"
},
{
"id": "CO",
"value": 1,
"category": "Americas"
},
{
"id": "GB",
"value": 1,
"category": "EMEA"
},
{
"id": "FR",
"value": 1,
"category": "EMEA"
},
{
"id": "DE",
"value": 1,
"category": "EMEA"
},
{
"id": "ES",
"value": 1,
"category": "EMEA"
},
{
"id": "IT",
"value": 1,
"category": "EMEA"
},
{
"id": "NL",
"value": 1,
"category": "EMEA"
},
{
"id": "SE",
"value": 1,
"category": "EMEA"
},
{
"id": "PL",
"value": 1,
"category": "EMEA"
},
{
"id": "ZA",
"value": 1,
"category": "EMEA"
},
{
"id": "NG",
"value": 1,
"category": "EMEA"
},
{
"id": "EG",
"value": 1,
"category": "EMEA"
},
{
"id": "SA",
"value": 1,
"category": "EMEA"
},
{
"id": "AE",
"value": 1,
"category": "EMEA"
},
{
"id": "IN",
"value": 1,
"category": "APAC"
},
{
"id": "CN",
"value": 1,
"category": "APAC"
},
{
"id": "JP",
"value": 1,
"category": "APAC"
},
{
"id": "KR",
"value": 1,
"category": "APAC"
},
{
"id": "ID",
"value": 1,
"category": "APAC"
},
{
"id": "TH",
"value": 1,
"category": "APAC"
},
{
"id": "VN",
"value": 1,
"category": "APAC"
},
{
"id": "AU",
"value": 1,
"category": "APAC"
},
{
"id": "NZ",
"value": 1,
"category": "APAC"
}
],
"map.basemap": "world",
"map.projection": "equirectangular",
"map.colorMode": "categorical",
"map.baseColor": "#2563eb",
"map.emptyColor": "#eef2f7",
"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.
Other map styles
See the map component page for the full property reference and FAQs.