Bubble map
Map styletype: "map"Render proportional-symbol (bubble) maps — a circle at each country or state sized by value — for counts, volume and reach. Fresh data per API call. Try Imejis free.
Edit it — this is the actual editor panel
Design JSON — “Bubble” 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": 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": "#eef2f7",
"showLegend": true,
"opacity": 1,
"mode": "bubble",
"bubbleColor": "#2563eb",
"strokeColor": "#ffffff"
}
}
]
}Map examples
Real renders of the bubble map — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Users by country
A bubble per country, sized by monthly active users.
API overrides for this example
{
"map.mode": "bubble",
"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.bubbleColor": "#2563eb",
"map.emptyColor": "#eef2f7",
"map.strokeColor": "#ffffff"
}Orders by US state
A proportional bubble on each US state.
API overrides for this example
{
"map.mode": "bubble",
"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.bubbleColor": "#16a34a",
"map.emptyColor": "#eef2f7",
"map.strokeColor": "#ffffff",
"map.basemap": "us-states"
}When to use the bubble style
- Counts and volume by country (users, orders, stores)
- Reach or population where absolute size matters
- Anywhere a bubble reads better than a shaded region
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": 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": "#eef2f7",
"map.showLegend": true,
"map.opacity": 1,
"map.mode": "bubble",
"map.bubbleColor": "#2563eb",
"map.strokeColor": "#ffffff"
}'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.