Zum Inhalt springen
UI Kit
Accent

Karten-App UI für Orte und Routen

Karten-Screens auf einer gezeichneten Stadt ohne Kartendienst. Orte mit Liste und Pins, Routenplaner, Live-Flotte und Liefergebiete mit Adressprüfung.

4 Variants
Kategorie wechseln

Eine Karte, die keinen Kartendienst braucht

Viele Apps brauchen eine Karte, um einen Ort zu finden, eine Tour zu planen, eine Lieferung zu verfolgen oder zu zeigen, wohin ein Laden liefert. Die Karten-App hier zeichnet ihre eigene Stadt in SVG, die Screens laufen also ohne Kartendienst, ohne API-Schlüssel und ohne Kacheln von anderswo.

Die Karten-App gibt es in vier Fassungen. „Orte entdecken“ verbindet Suche und Kategorien mit einer Liste nach Entfernung und Pins, die gemeinsam aufleuchten. Der „Routenplaner“ führt Stopps der Reihe nach mit Uhrzeit, Strecke und Dauer je Abschnitt, mit Auto, Rad oder zu Fuß, und findet per Klick eine kürzere Reihenfolge. Die „Live-Flotte“ bewegt Fahrzeuge auf ihren Runden, mit nächstem Stopp und einer Kamera, die folgt. Die „Liefergebiete“ zeichnen Zonen rund um den Laden mit Gebühr, Mindestbestellwert und Lieferzeit, eine Adressprüfung nennt die Zone.

Nutze die gezeichnete Karte für Prototypen, Onboarding und Screens, in denen die Form mehr zählt als jede Straße. Brauchst du echte Straßen, behältst du Liste, Bereiche und Filter und setzt deine eigene Kartenebene an dieselbe Stelle. Am Telefon wechselt „Orte entdecken“ zwischen Karte und Liste, so bleibt beides groß genug.

Karten-App

Orte entdeckenNeu in 1.2

Suche und Kategorien, eine Liste nach Entfernung und Pins, die gemeinsam aufleuchten. Telefone wechseln zwischen Karte und Liste.

RoutenplanerNeu in 1.2

Stopps der Reihe nach mit Uhrzeit, Strecke und Dauer je Abschnitt, Auto, Rad oder zu Fuß, kürzere Reihenfolge per Klick und die Route auf der Karte.

Live-FlotteNeu in 1.2

Fahrzeuge auf ihren Runden, Filter nach Zustand, ein Bereich mit nächstem Stopp, Ankunft und erledigten Stopps und eine Kamera, die folgt.

LiefergebieteNeu in 1.2

Zonen rund um den Laden mit Gebühr, Mindestbestellwert und Lieferzeit zum Bearbeiten, ein Schalter je Zone und eine Adressprüfung, die die Zone nennt.

Details

Was Karten-App mitbringt, aus Registry und Quellcode gelesen.

Bereich
App
Variants
4
Version
1.0.0 · seit 1.2.0
Datei
components/ui/map-app.tsx
Bringt mit
utilskitbuttoniconswitch
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 74 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle MapAppProps aus components/ui/map-app.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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.

Eingebaute Texte

Diese Texte schreibt Karten-App selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 74 Texte anzeigen
mapEnglisch MapDeutsch Karte
listEnglisch ListDeutsch Liste
placesEnglisch PlacesDeutsch Orte
allEnglisch AllDeutsch Alle
searchEnglisch Search placesDeutsch Orte suchen
resultsEnglisch {n} placesDeutsch {n} Orte
noMatchEnglisch No place matches. Try another word or category.Deutsch Kein Ort passt. Versuch ein anderes Wort oder eine andere Kategorie.
openUntilEnglisch Open until {t}Deutsch Geöffnet bis {t}
opensAtEnglisch Opens at {t}Deutsch Öffnet um {t}
reviewsEnglisch {n} reviewsDeutsch {n} Bewertungen
awayEnglisch {d} awayDeutsch {d} entfernt
routeEnglisch RouteDeutsch Route
detailsEnglisch DetailsDeutsch Details
closeEnglisch CloseDeutsch Schließen
zoomInEnglisch Zoom inDeutsch Vergrößern
zoomOutEnglisch Zoom outDeutsch Verkleinern
locateEnglisch Show my positionDeutsch Meinen Standort zeigen
resetEnglisch Show everythingDeutsch Alles zeigen
youEnglisch You are hereDeutsch Du bist hier
mapLabelEnglisch Map. Arrow keys move it, plus and minus zoom.Deutsch Karte. Pfeiltasten verschieben sie, Plus und Minus zoomen.
selectedEnglisch {name} selectedDeutsch {name} ausgewählt
stopsEnglisch StopsDeutsch Stopps
addStopEnglisch Add stopDeutsch Stopp hinzufügen
pickStopEnglisch Choose a placeDeutsch Ort wählen
removeEnglisch Remove {name}Deutsch {name} entfernen
upEnglisch Move {name} upDeutsch {name} nach oben
downEnglisch Move {name} downDeutsch {name} nach unten
optimizeEnglisch Shorten the routeDeutsch Route verkürzen
optimizedEnglisch Order changed, {m} fasterDeutsch Reihenfolge geändert, {m} schneller
alreadyBestEnglisch This order is already the shortestDeutsch Diese Reihenfolge ist schon die kürzeste
carEnglisch CarDeutsch Auto
bikeEnglisch BikeDeutsch Rad
walkEnglisch WalkDeutsch Zu Fuß
modeEnglisch Travel modeDeutsch Verkehrsmittel
totalEnglisch TotalDeutsch Gesamt
durationEnglisch DurationDeutsch Dauer
returnToEnglisch Ends at {name}Deutsch Ende bei {name}
backAtEnglisch Back atDeutsch Zurück um
legEnglisch {d} · {t}Deutsch {d} · {t}
stayEnglisch {t} stayDeutsch {t} Aufenthalt
startEnglisch StartDeutsch Start
sendRouteEnglisch Send to phoneDeutsch Aufs Telefon senden
sentEnglisch Route sentDeutsch Route gesendet
vehiclesEnglisch VehiclesDeutsch Fahrzeuge
movingEnglisch On the wayDeutsch Unterwegs
idleEnglisch ParkedDeutsch Geparkt
delayedEnglisch Running lateDeutsch Verspätet
followEnglisch FollowDeutsch Folgen
followingEnglisch Following {name}Deutsch {name} wird verfolgt
nextStopEnglisch Next stopDeutsch Nächster Stopp
arrivesEnglisch ArrivesDeutsch Ankunft
stopsDoneEnglisch {a} of {b} stopsDeutsch {a} von {b} Stopps
speedEnglisch SpeedDeutsch Tempo
driverEnglisch DriverDeutsch Fahrer
callEnglisch Call driverDeutsch Fahrer anrufen
liveEnglisch LiveDeutsch Live
pausedEnglisch PausedDeutsch Pausiert
zonesEnglisch Delivery zonesDeutsch Liefergebiete
zoneEnglisch ZoneDeutsch Zone
feeEnglisch Delivery feeDeutsch Liefergebühr
minOrderEnglisch Minimum orderDeutsch Mindestbestellwert
minutesEnglisch Delivery timeDeutsch Lieferzeit
minutesUnitEnglisch minDeutsch Min.
activeEnglisch Delivers to this zoneDeutsch Liefert in diese Zone
saveEnglisch Save zoneDeutsch Zone speichern
savingEnglisch Saving…Deutsch Wird gespeichert…
savedEnglisch Zone savedDeutsch Zone gespeichert
checkEnglisch Check an addressDeutsch Adresse prüfen
checkPickEnglisch Choose an addressDeutsch Adresse wählen
inZoneEnglisch {zone} · delivery {fee} · about {t}Deutsch {zone} · Lieferung {fee} · etwa {t}
outsideEnglisch Outside the zones, pickup in the shop works anytimeDeutsch Außerhalb der Zonen, Abholung im Laden geht jederzeit
zoneOffEnglisch {zone} is paused, pickup in the shop works anytimeDeutsch {zone} pausiert, Abholung im Laden geht jederzeit
shopEnglisch ShopDeutsch Laden
freeEnglisch freeDeutsch kostenlos

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Karten-App reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-current, aria-label, aria-live, aria-pressed und aria-roledescription, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen application, group, img, radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig.

Häufige Fragen

Wie installiere ich Karten-App?

Mit aiw add @ai-website/map-app. Der Befehl legt die Datei components/ui/map-app.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon und switch. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Karten-App?

4 Varianten, Orte entdecken, Routenplaner, Live-Flotte und Liefergebiete. Du wählst sie mit der Prop variant, zum Beispiel variant="route".

Kann ich die Texte von Karten-App übersetzen?

Ja. Karten-App bringt 74 eigene Texte auf Deutsch und Englisch mit, etwa „Karte“, „Liste“ und „Orte“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Karten-App einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Karten-App mit aiw_components und installieren sie mit aiw_add @ai-website/map-app. Nenn im Prompt die Variante, etwa variant="explorer", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus App, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Karten und Orte stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert