Diverging map
Map styletype: "map"Render diverging choropleth world maps — signed values colored red→green by country — for GDP growth, net change and over/under-target maps. Fresh data per API call. Try Imejis free.
Edit it — this is the actual editor panel
Design JSON — “Diverging” 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": 2.5
},
{
"id": "CA",
"value": 1.2
},
{
"id": "MX",
"value": 3.1
},
{
"id": "BR",
"value": 2.9
},
{
"id": "AR",
"value": -1.6
},
{
"id": "GB",
"value": 0.6
},
{
"id": "FR",
"value": 0.9
},
{
"id": "DE",
"value": -0.3
},
{
"id": "ES",
"value": 2.4
},
{
"id": "IT",
"value": 0.7
},
{
"id": "NL",
"value": 0.2
},
{
"id": "SE",
"value": -0.8
},
{
"id": "PL",
"value": 3
},
{
"id": "UA",
"value": -4.2
},
{
"id": "RU",
"value": -2.1
},
{
"id": "TR",
"value": 4.5
},
{
"id": "EG",
"value": 3.8
},
{
"id": "ZA",
"value": 0.9
},
{
"id": "NG",
"value": 3.3
},
{
"id": "SA",
"value": -0.9
},
{
"id": "IN",
"value": 6.8
},
{
"id": "CN",
"value": 5
},
{
"id": "JP",
"value": 1.1
},
{
"id": "KR",
"value": 2.2
},
{
"id": "ID",
"value": 5.1
},
{
"id": "VN",
"value": 6
},
{
"id": "AU",
"value": 1.5
},
{
"id": "NZ",
"value": -0.6
}
],
"basemap": "world",
"projection": "equirectangular",
"colorMode": "diverging",
"baseColor": "#2563eb",
"emptyColor": "#e5e7eb",
"showLegend": true,
"opacity": 1,
"positiveColor": "#16a34a",
"negativeColor": "#dc2626"
}
}
]
}Map examples
Real renders of the diverging map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
GDP growth
Year-over-year GDP growth — green expanding, red contracting.
API overrides for this example
{
"map.data": [
{
"id": "US",
"value": 2.5
},
{
"id": "CA",
"value": 1.2
},
{
"id": "MX",
"value": 3.1
},
{
"id": "BR",
"value": 2.9
},
{
"id": "AR",
"value": -1.6
},
{
"id": "GB",
"value": 0.6
},
{
"id": "FR",
"value": 0.9
},
{
"id": "DE",
"value": -0.3
},
{
"id": "ES",
"value": 2.4
},
{
"id": "IT",
"value": 0.7
},
{
"id": "NL",
"value": 0.2
},
{
"id": "SE",
"value": -0.8
},
{
"id": "PL",
"value": 3
},
{
"id": "UA",
"value": -4.2
},
{
"id": "RU",
"value": -2.1
},
{
"id": "TR",
"value": 4.5
},
{
"id": "EG",
"value": 3.8
},
{
"id": "ZA",
"value": 0.9
},
{
"id": "NG",
"value": 3.3
},
{
"id": "SA",
"value": -0.9
},
{
"id": "IN",
"value": 6.8
},
{
"id": "CN",
"value": 5
},
{
"id": "JP",
"value": 1.1
},
{
"id": "KR",
"value": 2.2
},
{
"id": "ID",
"value": 5.1
},
{
"id": "VN",
"value": 6
},
{
"id": "AU",
"value": 1.5
},
{
"id": "NZ",
"value": -0.6
}
],
"map.colorMode": "diverging",
"map.positiveColor": "#16a34a",
"map.negativeColor": "#dc2626"
}Net change vs target
Over-target countries in green, under-target in red.
API overrides for this example
{
"map.data": [
{
"id": "US",
"value": 15
},
{
"id": "CA",
"value": 2
},
{
"id": "MX",
"value": 21
},
{
"id": "BR",
"value": 19
},
{
"id": "AR",
"value": -26
},
{
"id": "GB",
"value": -4
},
{
"id": "FR",
"value": -1
},
{
"id": "DE",
"value": -13
},
{
"id": "ES",
"value": 14
},
{
"id": "IT",
"value": -3
},
{
"id": "NL",
"value": -8
},
{
"id": "SE",
"value": -18
},
{
"id": "PL",
"value": 20
},
{
"id": "UA",
"value": -52
},
{
"id": "RU",
"value": -31
},
{
"id": "TR",
"value": 35
},
{
"id": "EG",
"value": 28
},
{
"id": "ZA",
"value": -1
},
{
"id": "NG",
"value": 23
},
{
"id": "SA",
"value": -19
},
{
"id": "IN",
"value": 58
},
{
"id": "CN",
"value": 40
},
{
"id": "JP",
"value": 1
},
{
"id": "KR",
"value": 12
},
{
"id": "ID",
"value": 41
},
{
"id": "VN",
"value": 50
},
{
"id": "AU",
"value": 5
},
{
"id": "NZ",
"value": -16
}
],
"map.colorMode": "diverging",
"map.positiveColor": "#2563eb",
"map.negativeColor": "#f97316"
}When to use the diverging style
- GDP / revenue growth by country (+/-)
- Net change vs last period or vs target
- Sentiment or approval swing maps
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": 2.5
},
{
"id": "CA",
"value": 1.2
},
{
"id": "MX",
"value": 3.1
},
{
"id": "BR",
"value": 2.9
},
{
"id": "AR",
"value": -1.6
},
{
"id": "GB",
"value": 0.6
},
{
"id": "FR",
"value": 0.9
},
{
"id": "DE",
"value": -0.3
},
{
"id": "ES",
"value": 2.4
},
{
"id": "IT",
"value": 0.7
},
{
"id": "NL",
"value": 0.2
},
{
"id": "SE",
"value": -0.8
},
{
"id": "PL",
"value": 3
},
{
"id": "UA",
"value": -4.2
},
{
"id": "RU",
"value": -2.1
},
{
"id": "TR",
"value": 4.5
},
{
"id": "EG",
"value": 3.8
},
{
"id": "ZA",
"value": 0.9
},
{
"id": "NG",
"value": 3.3
},
{
"id": "SA",
"value": -0.9
},
{
"id": "IN",
"value": 6.8
},
{
"id": "CN",
"value": 5
},
{
"id": "JP",
"value": 1.1
},
{
"id": "KR",
"value": 2.2
},
{
"id": "ID",
"value": 5.1
},
{
"id": "VN",
"value": 6
},
{
"id": "AU",
"value": 1.5
},
{
"id": "NZ",
"value": -0.6
}
],
"map.basemap": "world",
"map.projection": "equirectangular",
"map.colorMode": "diverging",
"map.baseColor": "#2563eb",
"map.emptyColor": "#e5e7eb",
"map.showLegend": true,
"map.opacity": 1,
"map.positiveColor": "#16a34a",
"map.negativeColor": "#dc2626"
}'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.