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 editorMap 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' (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 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.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| data | object[] | 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. |
| colors | color[] | text | [] | Ramp swatches (lightest→darkest); also the palette for categorical mode. |
| baseColor | color | #2563eb | "#2563eb" | Ramp hue used when no swatches are given. |
| emptyColor | color | #e5e7eb | "#e5e7eb" | Fill for regions with no matching data value. |
| positiveColor | color | #16a34a | "#16a34a" | Positive color in diverging mode. |
| negativeColor | color | #dc2626 | "#dc2626" | Negative color in diverging mode. |
| scaleMax | number | 0 | 0 | Value mapped to the most saturated color (0 = auto from the data). |
| levels | number | 5 | 5 | Number of intensity buckets in ramp mode. |
| strokeColor | color | #ffffff | "#ffffff" | Color of region borders. |
| strokeWidth | number | 0.5 | 0.5 | Width of region borders (px). |
| bubbleColor | color | #2563eb | "#2563eb" | Fill for the proportional bubbles in bubble mode. |
| bubbleSize | number | 1 | 1 | Bubble size multiplier in bubble mode (1 = default). |
| showLabels | boolean | false | false | Draw 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'. |
| labelSize | number | 1 | 1 | Per-region label size multiplier (1 = default). |
| showLegend | boolean | true | true | Draw a low→high legend strip. |
| labelColor | color | #64748b | "#64748b" | Legend + label text color. |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | 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.