Country regions map
Map styletype: "map"Generate province and state choropleth images for Canada, Germany, Australia, Brazil and India — each region shaded by value on a fitted projection. Fresh data per API call. Start free with Imejis.
Design JSON — “Country regions” 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": "ON",
"value": 95
},
{
"id": "QC",
"value": 72
},
{
"id": "BC",
"value": 68
},
{
"id": "AB",
"value": 60
},
{
"id": "MB",
"value": 34
},
{
"id": "SK",
"value": 30
},
{
"id": "NS",
"value": 28
},
{
"id": "NB",
"value": 24
},
{
"id": "NL",
"value": 20
},
{
"id": "PE",
"value": 12
}
],
"basemap": "canada-provinces",
"projection": "equirectangular",
"colorMode": "ramp",
"baseColor": "#dc2626",
"emptyColor": "#eef2f7",
"showLegend": true,
"opacity": 1,
"strokeWidth": 0.7
}
}
]
}Map examples
Real renders of the country regions map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Sales by Canadian province
Canada sales shaded in a red ramp, keyed by province code.
API overrides for this example
{
"map.basemap": "canada-provinces",
"map.data": [
{
"id": "ON",
"value": 95
},
{
"id": "QC",
"value": 72
},
{
"id": "BC",
"value": 68
},
{
"id": "AB",
"value": 60
},
{
"id": "MB",
"value": 34
},
{
"id": "SK",
"value": 30
},
{
"id": "NS",
"value": 28
},
{
"id": "NB",
"value": 24
},
{
"id": "NL",
"value": 20
},
{
"id": "PE",
"value": 12
}
],
"map.colorMode": "ramp",
"map.baseColor": "#dc2626",
"map.emptyColor": "#eef2f7",
"map.strokeWidth": 0.7
}Users by German state
German states in a blue ramp, keyed by state code.
API overrides for this example
{
"map.basemap": "germany-states",
"map.data": [
{
"id": "BY",
"value": 92
},
{
"id": "NW",
"value": 88
},
{
"id": "BW",
"value": 80
},
{
"id": "HE",
"value": 62
},
{
"id": "NI",
"value": 58
},
{
"id": "BE",
"value": 55
},
{
"id": "SN",
"value": 44
},
{
"id": "RP",
"value": 40
},
{
"id": "SH",
"value": 34
},
{
"id": "BB",
"value": 30
},
{
"id": "ST",
"value": 28
},
{
"id": "TH",
"value": 26
},
{
"id": "HH",
"value": 48
},
{
"id": "MV",
"value": 22
},
{
"id": "SL",
"value": 16
},
{
"id": "HB",
"value": 18
}
],
"map.colorMode": "ramp",
"map.baseColor": "#2563eb",
"map.emptyColor": "#eef2f7",
"map.strokeWidth": 0.7
}When to use the country regions style
- Sales / users / revenue by province or state
- Regional coverage and availability maps beyond the US
- Election, poll and survey results by state or province
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": "ON",
"value": 95
},
{
"id": "QC",
"value": 72
},
{
"id": "BC",
"value": 68
},
{
"id": "AB",
"value": 60
},
{
"id": "MB",
"value": 34
},
{
"id": "SK",
"value": 30
},
{
"id": "NS",
"value": 28
},
{
"id": "NB",
"value": 24
},
{
"id": "NL",
"value": 20
},
{
"id": "PE",
"value": 12
}
],
"map.basemap": "canada-provinces",
"map.projection": "equirectangular",
"map.colorMode": "ramp",
"map.baseColor": "#dc2626",
"map.emptyColor": "#eef2f7",
"map.showLegend": true,
"map.opacity": 1,
"map.strokeWidth": 0.7
}'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.