Map UI components for places and routes

Map screens on a drawn town without a map service. Places with list and pins, a route planner, a live fleet and delivery zones with an address check.

4 variants

Switch category

A map that needs no map service

Many apps need a map, to find a place, to plan a round, to follow a delivery or to say where a shop delivers. The map app here draws its own town in SVG, so the screens work without a map service, without an API key and without loading tiles from elsewhere.

Map app comes in four versions. Place explorer pairs search and category chips with a list sorted by distance and pins that light up together. Route planner lists stops in order with time, distance and duration per leg, by car, bike or on foot, and finds a shorter order in one click. Live fleet moves vehicles on their rounds with a panel for the next stop and a camera that follows. Delivery zones draws zones around the shop with fee, minimum order and time, and an address check names the zone.

Use the drawn map for prototypes, onboarding and screens where the shape matters more than every street. When you need real streets, keep the list, panels and filters and put your own map layer in the same place. On phones explorer switches between map and list, so neither gets squeezed.

Place explorerNew in 1.2

Search and category chips, a list sorted by distance and pins that light up together. Phones switch between map and list.

Installv1.0.0

aiw add @ai-website/map-app

Brings along utils, kit, button, icon, switch

Usage

<MapApp variant="explorer" categories={[{ id, label, icon }]} places={[{ id, name, category, x, y, rating, closes }]} origin={[405, 370]} />

Source

Route plannerNew in 1.2

Stops in order with times, distance and duration per leg, car, bike or on foot, a shorter order in one click and the route on the map.

Installv1.0.0

aiw add @ai-website/map-app

Brings along utils, kit, button, icon, switch

Usage

<MapApp variant="route" stops={[{ id, name, x, y, stay }]} suggestions={[…]} departure="09:00" />

Source

Live fleetNew in 1.2

Vehicles moving on their rounds, filters by status, a panel with next stop, arrival and stops done, and a camera that follows.

Installv1.0.0

aiw add @ai-website/map-app

Brings along utils, kit, button, icon, switch

Usage

<MapApp variant="fleet" vehicles={[{ id, name, driver, status, loop: [[x, y]], eta }]} now="14:30" />

Source

Delivery zonesNew in 1.2

Zones drawn around the shop with fee, minimum order and time to edit, a switch per zone and an address check that names the zone.

Installv1.0.0

aiw add @ai-website/map-app

Brings along utils, kit, button, icon, switch

Usage

<MapApp variant="zones" shop={{ name, x, y }} zones={[{ id, name, polygon, fee, minOrder, minutes }]} addresses={[…]} currency="EUR" />

Source

Details

What Map app brings along, read from the registry and the source.

Area: App
Variants: 4
Version: 1.0.0 · since 1.2.0
File: components/ui/map-app.tsx
Brings along: utilskitbutton icon switch
npm packages: None
Languages: English and German, 74 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The MapAppProps interface from components/ui/map-app.tsx, with the comments from the code.

variantoptional
MapAppVariant
explorerroutefleetzones
titleoptional
string
subtitleoptional
string
originoptional
MapPoint
Where the user is, the start of distances
categoriesoptional
MapCategory[]
explorer
placesoptional
MapPlace[]
stopsoptional
MapStop[]
route
suggestionsoptional
MapStop[]
route: places that can be added as a stop
departureoptional
string
route: HH:MM of departure
vehiclesoptional
MapVehicle[]
fleet
nowoptional
string
fleet: HH:MM that counts as now
zonesoptional
MapZone[]
zones
shopoptional
{ name: string; x: number; y: number }
zones: the shop the zones belong to
addressesoptional
{ label: string; x: number; y: number }[]
zones: addresses to check
currencyoptional
string
onActionoptional
(action: string, data: Record<string, unknown>) => void | Promise<void>
Called on route, save, share and the like. Without it the block simulates the request.

Built-in texts

Map app writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 74 texts

Key	English	German
map	English Map	German Karte
list	English List	German Liste
places	English Places	German Orte
all	English All	German Alle
search	English Search places	German Orte suchen
results	English {n} places	German {n} Orte
noMatch	English No place matches. Try another word or category.	German Kein Ort passt. Versuch ein anderes Wort oder eine andere Kategorie.
openUntil	English Open until {t}	German Geöffnet bis {t}
opensAt	English Opens at {t}	German Öffnet um {t}
reviews	English {n} reviews	German {n} Bewertungen
away	English {d} away	German {d} entfernt
route	English Route	German Route
details	English Details	German Details
close	English Close	German Schließen
zoomIn	English Zoom in	German Vergrößern
zoomOut	English Zoom out	German Verkleinern
locate	English Show my position	German Meinen Standort zeigen
reset	English Show everything	German Alles zeigen
you	English You are here	German Du bist hier
mapLabel	English Map. Arrow keys move it, plus and minus zoom.	German Karte. Pfeiltasten verschieben sie, Plus und Minus zoomen.
selected	English {name} selected	German {name} ausgewählt
stops	English Stops	German Stopps
addStop	English Add stop	German Stopp hinzufügen
pickStop	English Choose a place	German Ort wählen
remove	English Remove {name}	German {name} entfernen
up	English Move {name} up	German {name} nach oben
down	English Move {name} down	German {name} nach unten
optimize	English Shorten the route	German Route verkürzen
optimized	English Order changed, {m} faster	German Reihenfolge geändert, {m} schneller
alreadyBest	English This order is already the shortest	German Diese Reihenfolge ist schon die kürzeste
car	English Car	German Auto
bike	English Bike	German Rad
walk	English Walk	German Zu Fuß
mode	English Travel mode	German Verkehrsmittel
total	English Total	German Gesamt
duration	English Duration	German Dauer
returnTo	English Ends at {name}	German Ende bei {name}
backAt	English Back at	German Zurück um
leg	English {d} · {t}	German {d} · {t}
stay	English {t} stay	German {t} Aufenthalt
start	English Start	German Start
sendRoute	English Send to phone	German Aufs Telefon senden
sent	English Route sent	German Route gesendet
vehicles	English Vehicles	German Fahrzeuge
moving	English On the way	German Unterwegs
idle	English Parked	German Geparkt
delayed	English Running late	German Verspätet
follow	English Follow	German Folgen
following	English Following {name}	German {name} wird verfolgt
nextStop	English Next stop	German Nächster Stopp
arrives	English Arrives	German Ankunft
stopsDone	English {a} of {b} stops	German {a} von {b} Stopps
speed	English Speed	German Tempo
driver	English Driver	German Fahrer
call	English Call driver	German Fahrer anrufen
live	English Live	German Live
paused	English Paused	German Pausiert
zones	English Delivery zones	German Liefergebiete
zone	English Zone	German Zone
fee	English Delivery fee	German Liefergebühr
minOrder	English Minimum order	German Mindestbestellwert
minutes	English Delivery time	German Lieferzeit
minutesUnit	English min	German Min.
active	English Delivers to this zone	German Liefert in diese Zone
save	English Save zone	German Zone speichern
saving	English Saving…	German Wird gespeichert…
saved	English Zone saved	German Zone gespeichert
check	English Check an address	German Adresse prüfen
checkPick	English Choose an address	German Adresse wählen
inZone	English {zone} · delivery {fee} · about {t}	German {zone} · Lieferung {fee} · etwa {t}
outside	English Outside the zones, pickup in the shop works anytime	German Außerhalb der Zonen, Abholung im Laden geht jederzeit
zoneOff	English {zone} is paused, pickup in the shop works anytime	German {zone} pausiert, Abholung im Laden geht jederzeit
shop	English Shop	German Laden
free	English free	German kostenlos

Read from the source of the component.

Map app handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-current, aria-label, aria-live, aria-pressed and aria-roledescription, so screen readers announce purpose and state.
Uses the roles application, group, img, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still.

Frequent questions

How do I install Map app?

With aiw add @ai-website/map-app. The command puts components/ui/map-app.tsx into your project, the code is yours from then on. It brings along button, icon and switch. It needs no further npm packages.

Which variants does Map app have?

4 variants, Place explorer, Route planner, Live fleet and Delivery zones. You pick one with the variant prop, for example variant="route".

Can I translate the texts of Map app?

Yes. Map app carries 74 texts of its own in English and German, such as “Map”, “List” and “Places”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Map app?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Map app with aiw_components and install it with aiw_add @ai-website/map-app. Name the variant in your prompt, for example variant="explorer", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Maps and places on a page.

A map that needs no map service

Map app

Place explorerNew in 1.2

Route plannerNew in 1.2

Live fleetNew in 1.2

Delivery zonesNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with