Maps
A map block puts records where they happen: sales on the cities they came from, a courier on the street she is driving down, a zone filled to the level it has reached. Orvain's Maps family holds three: an interactive map of sales by city as a globe, a flat map or dots, a delivery map that follows one order to the door, and a zone map that shows how full each area is, from delivery zones to theatre seats and parking levels.
A map earns its space only when position is the information. These blocks keep the geography quiet, a few shores and roads drawn in the surface colour, so the data reads first, and they put the number beside the place rather than in a legend the eye has to travel to. Each one moves live without moving the camera out from under the person reading it.
Using Maps
Reach for it when
- Values that belong to places, where a person asks which city or zone first.
- Something moving through a city that a customer or dispatcher is waiting on.
- Capacity spread over areas, such as zones, seats or parking levels, where the full ones need to stand out.
Reach for something else when
- Ranking places by a number. A sorted list or a bar chart in the Metrics family compares values far better than circles on a map.
- Addresses someone needs to type or pick. An autocomplete with suggestions is the control; a map behind it adds nothing.
- A route with turn-by-turn directions. Hand that to a dedicated map provider; these blocks show progress, not navigation.
Where it shows up
Live sales globe
A dashboard header that shows where today's revenue came from. Each sale lands on its city with the amount, the totals ease up, and a region filter narrows the globe to the market a team owns.
Venue capacity
An events team watching a floor fill up. Each zone shows how many are in against its capacity, a zone near full turns warm, and opening it gives its day so far with one action, such as pausing entry.
Questions
When is a map better than a chart?
When the reader's question is about where. If they want to know which city sells most, a sorted bar chart answers faster. If they want to know whether sales cluster on a coast, or which zone of a floor is nearly full, the position is the answer and only a map shows it. Many dashboards need both, with the map for where and the chart for how much.
How do you keep a live map readable?
Change one thing at a time and leave the camera alone. A sale that lands should light its own city, not pan the whole map; a courier who moves should stay in a view that also holds the destination. Keep the base map quiet, label values beside their places, and let people pause the updates when they want to read.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPMaps
A map block puts records where they happen: sales on the cities they came from, a courier on the street she is driving down, a zone filled to the level it has reached. Orvain's Maps family holds three: an interactive map of sales by city as a globe, a flat map or dots, a delivery map that follows one order to the door, and a zone map that shows how full each area is, from delivery zones to theatre seats and parking levels.
A map earns its space only when position is the information. These blocks keep the geography quiet, a few shores and roads drawn in the surface colour, so the data reads first, and they put the number beside the place rather than in a legend the eye has to travel to. Each one moves live without moving the camera out from under the person reading it.
3 blocks
Using Maps
Reach for it when
- Values that belong to places, where a person asks which city or zone first.
- Something moving through a city that a customer or dispatcher is waiting on.
- Capacity spread over areas, such as zones, seats or parking levels, where the full ones need to stand out.
Reach for something else when
- Ranking places by a number. A sorted list or a bar chart in the Metrics family compares values far better than circles on a map.
- Addresses someone needs to type or pick. An autocomplete with suggestions is the control; a map behind it adds nothing.
- A route with turn-by-turn directions. Hand that to a dedicated map provider; these blocks show progress, not navigation.
Where it shows up
Live sales globe
A dashboard header that shows where today's revenue came from. Each sale lands on its city with the amount, the totals ease up, and a region filter narrows the globe to the market a team owns.
Venue capacity
An events team watching a floor fill up. Each zone shows how many are in against its capacity, a zone near full turns warm, and opening it gives its day so far with one action, such as pausing entry.
Questions
When is a map better than a chart?
When the reader's question is about where. If they want to know which city sells most, a sorted bar chart answers faster. If they want to know whether sales cluster on a coast, or which zone of a floor is nearly full, the position is the answer and only a map shows it. Many dashboards need both, with the map for where and the chart for how much.
How do you keep a live map readable?
Change one thing at a time and leave the camera alone. A sale that lands should light its own city, not pan the whole map; a courier who moves should stay in a view that also holds the destination. Keep the base map quiet, label values beside their places, and let people pause the updates when they want to read.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
