US states map
Map styletype: "map"Generate US-states choropleth images — all 50 states shaded by value in Albers-USA with Alaska & Hawaii insets. Key data by state code or name; fresh on every API call. Start free with Imejis.
Edit it — this is the actual editor panel
Design JSON — “US states” 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": "CA",
"value": 95
},
{
"id": "TX",
"value": 82
},
{
"id": "NY",
"value": 78
},
{
"id": "FL",
"value": 70
},
{
"id": "IL",
"value": 55
},
{
"id": "PA",
"value": 52
},
{
"id": "OH",
"value": 48
},
{
"id": "GA",
"value": 46
},
{
"id": "NC",
"value": 44
},
{
"id": "MI",
"value": 42
},
{
"id": "WA",
"value": 58
},
{
"id": "AZ",
"value": 40
},
{
"id": "MA",
"value": 50
},
{
"id": "CO",
"value": 43
},
{
"id": "VA",
"value": 45
},
{
"id": "NJ",
"value": 49
},
{
"id": "TN",
"value": 38
},
{
"id": "OR",
"value": 36
},
{
"id": "MN",
"value": 37
},
{
"id": "AK",
"value": 30
},
{
"id": "HI",
"value": 33
},
{
"id": "NV",
"value": 34
},
{
"id": "UT",
"value": 35
},
{
"id": "MO",
"value": 32
},
{
"id": "WI",
"value": 31
}
],
"basemap": "us-states",
"projection": "equirectangular",
"colorMode": "ramp",
"baseColor": "#2563eb",
"emptyColor": "#eef2f7",
"showLegend": true,
"opacity": 1,
"strokeWidth": 0.7
}
}
]
}Map examples
Real renders of the us states map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Sales by state
US sales shaded in a blue ramp, keyed by state code.
API overrides for this example
{
"map.basemap": "us-states",
"map.data": [
{
"id": "CA",
"value": 95
},
{
"id": "TX",
"value": 82
},
{
"id": "NY",
"value": 78
},
{
"id": "FL",
"value": 70
},
{
"id": "IL",
"value": 55
},
{
"id": "PA",
"value": 52
},
{
"id": "OH",
"value": 48
},
{
"id": "GA",
"value": 46
},
{
"id": "NC",
"value": 44
},
{
"id": "MI",
"value": 42
},
{
"id": "WA",
"value": 58
},
{
"id": "AZ",
"value": 40
},
{
"id": "MA",
"value": 50
},
{
"id": "CO",
"value": 43
},
{
"id": "VA",
"value": 45
},
{
"id": "NJ",
"value": 49
},
{
"id": "TN",
"value": 38
},
{
"id": "OR",
"value": 36
},
{
"id": "MN",
"value": 37
},
{
"id": "AK",
"value": 30
},
{
"id": "HI",
"value": 33
},
{
"id": "NV",
"value": 34
},
{
"id": "UT",
"value": 35
},
{
"id": "MO",
"value": 32
},
{
"id": "WI",
"value": 31
}
],
"map.colorMode": "ramp",
"map.baseColor": "#2563eb",
"map.emptyColor": "#eef2f7",
"map.strokeWidth": 0.7
}Vote margin by state
A diverging red↔blue margin per state.
API overrides for this example
{
"map.basemap": "us-states",
"map.data": [
{
"id": "CA",
"value": -50
},
{
"id": "TX",
"value": 37
},
{
"id": "NY",
"value": -33
},
{
"id": "FL",
"value": 25
},
{
"id": "IL",
"value": -10
},
{
"id": "PA",
"value": 7
},
{
"id": "OH",
"value": -3
},
{
"id": "GA",
"value": 1
},
{
"id": "NC",
"value": 1
},
{
"id": "MI",
"value": -3
},
{
"id": "WA",
"value": -13
},
{
"id": "AZ",
"value": -5
},
{
"id": "MA",
"value": -5
},
{
"id": "CO",
"value": -2
},
{
"id": "VA",
"value": 0
},
{
"id": "NJ",
"value": 4
},
{
"id": "TN",
"value": 7
},
{
"id": "OR",
"value": -9
},
{
"id": "MN",
"value": 8
},
{
"id": "AK",
"value": -15
},
{
"id": "HI",
"value": 12
},
{
"id": "NV",
"value": -11
},
{
"id": "UT",
"value": 10
},
{
"id": "MO",
"value": -13
},
{
"id": "WI",
"value": 14
}
],
"map.colorMode": "diverging",
"map.baseColor": "#2563eb",
"map.emptyColor": "#e5e7eb",
"map.strokeWidth": 0.7,
"map.positiveColor": "#2563eb",
"map.negativeColor": "#dc2626"
}When to use the us states style
- Sales / users / revenue by US state
- Election, poll and survey results by state
- Coverage, shipping and tax maps across the US
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": "CA",
"value": 95
},
{
"id": "TX",
"value": 82
},
{
"id": "NY",
"value": 78
},
{
"id": "FL",
"value": 70
},
{
"id": "IL",
"value": 55
},
{
"id": "PA",
"value": 52
},
{
"id": "OH",
"value": 48
},
{
"id": "GA",
"value": 46
},
{
"id": "NC",
"value": 44
},
{
"id": "MI",
"value": 42
},
{
"id": "WA",
"value": 58
},
{
"id": "AZ",
"value": 40
},
{
"id": "MA",
"value": 50
},
{
"id": "CO",
"value": 43
},
{
"id": "VA",
"value": 45
},
{
"id": "NJ",
"value": 49
},
{
"id": "TN",
"value": 38
},
{
"id": "OR",
"value": 36
},
{
"id": "MN",
"value": 37
},
{
"id": "AK",
"value": 30
},
{
"id": "HI",
"value": 33
},
{
"id": "NV",
"value": 34
},
{
"id": "UT",
"value": 35
},
{
"id": "MO",
"value": 32
},
{
"id": "WI",
"value": 31
}
],
"map.basemap": "us-states",
"map.projection": "equirectangular",
"map.colorMode": "ramp",
"map.baseColor": "#2563eb",
"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.