Dark map
Map styletype: "map"Generate dark-mode choropleth world-map images — a bright ramp on a dark card, shaded by country. Fresh data per API call. Create map graphics free with Imejis.
Edit it — this is the actual editor panel
Design JSON — “Dark” variant
{
"title": "Map sample",
"description": "A choropleth world map shaded by value",
"dimensions": {
"width": 860,
"height": 460
},
"background": {
"color": "#0d1117"
},
"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": "#1e293b",
"showLegend": true,
"opacity": 1,
"strokeColor": "#0f172a",
"labelColor": "#94a3b8",
"colors": [
"#0e7490",
"#0891b2",
"#06b6d4",
"#22d3ee",
"#67e8f9"
]
}
}
]
}Map examples
Real renders of the dark map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Dark sales map
Global sales in a cyan ramp on a near-black card.
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.emptyColor": "#1e293b",
"map.strokeColor": "#0f172a",
"map.labelColor": "#94a3b8",
"map.colors": [
"#0e7490",
"#0891b2",
"#06b6d4",
"#22d3ee",
"#67e8f9"
]
}Dark coverage map
Where the product is available, in a violet ramp on dark.
API overrides for this example
{
"map.data": [
{
"id": "US",
"value": 100
},
{
"id": "CA",
"value": 100
},
{
"id": "MX",
"value": 40
},
{
"id": "BR",
"value": 100
},
{
"id": "AR",
"value": 40
},
{
"id": "CL",
"value": 40
},
{
"id": "CO",
"value": 40
},
{
"id": "GB",
"value": 100
},
{
"id": "FR",
"value": 100
},
{
"id": "DE",
"value": 100
},
{
"id": "ES",
"value": 100
},
{
"id": "IT",
"value": 100
},
{
"id": "PT",
"value": 40
},
{
"id": "NL",
"value": 100
},
{
"id": "SE",
"value": 40
},
{
"id": "NO",
"value": 40
},
{
"id": "PL",
"value": 40
},
{
"id": "UA",
"value": 40
},
{
"id": "RU",
"value": 100
},
{
"id": "TR",
"value": 100
},
{
"id": "EG",
"value": 40
},
{
"id": "ZA",
"value": 40
},
{
"id": "NG",
"value": 40
},
{
"id": "KE",
"value": 40
},
{
"id": "MA",
"value": 40
},
{
"id": "SA",
"value": 100
},
{
"id": "AE",
"value": 40
},
{
"id": "IN",
"value": 100
},
{
"id": "CN",
"value": 100
},
{
"id": "JP",
"value": 100
},
{
"id": "KR",
"value": 100
},
{
"id": "ID",
"value": 100
},
{
"id": "TH",
"value": 40
},
{
"id": "VN",
"value": 40
},
{
"id": "AU",
"value": 100
},
{
"id": "NZ",
"value": 40
}
],
"map.emptyColor": "#1e293b",
"map.strokeColor": "#0f172a",
"map.labelColor": "#94a3b8",
"map.colors": [
"#4c1d95",
"#6d28d9",
"#8b5cf6",
"#a78bfa",
"#c4b5fd"
]
}When to use the dark style
- Dark-theme geographic dashboards
- Year-in-review and launch graphics on dark backgrounds
- Social cards with a world-map 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 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": 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": "#1e293b",
"map.showLegend": true,
"map.opacity": 1,
"map.strokeColor": "#0f172a",
"map.labelColor": "#94a3b8",
"map.colors": [
"#0e7490",
"#0891b2",
"#06b6d4",
"#22d3ee",
"#67e8f9"
]
}'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.