map-card
optionalmultiple allowed
A card that displays a summary of a location on a static map. You can add markers on the map to indicate points of interest.
Note
Consider the following situations:
- If you nest a card within a
compound-card, anyon-clickdefined is ignored. - If your cards are in a
selection-of, these cards are tappable with an intent automatically generated, even if you do not provide one. Also, if you have multi-selection enabled,on-clickis ignored. - If your cards are in a
list-ofor displaying the details in a result view, and you do not provide anon-click, then the component won't look nor be tappable.
Interactive Demo
Child Keys
| markers required | A set of markers that enable you to set one or more locations on a map-card |
| title-area required | Layout container to hold a title area, which can contain title text and other detailed text |
| aspect-ratio optional | Determines the map card's aspect ratio |
| on-click optional | Defines an intent, a URL, or a view-for to use when a user taps on the component |
| zoom optional | Integer value that indicates the zoom-level of the map |
Examples
result-view {
match: RideShare (rideShare) {
from-output: ShowRideShareMap
}
message {
template ("Here is a map of your ride:")
}
render {
layout {
section {
content {
map-card {
aspect-ratio (1:1)
title-area {
slot1 {
text {
value ("#{value(rideShare.productType)}")
style (Title_L)
}
}
slot2 {
single-line {
text {
value ("Arrives in #{value(rideShare.pickupETA)}")
}
}
}
}
markers {
marker {
geo (rideShare.sourcePoint)
icon ("/images/icons/green-map-marker.png")
width (15)
height (20)
anchor-x (5)
anchor-y (15)
rotation (0)
}
marker {
geo (rideShare.destinationPoint)
icon ("/images/icons/red-map-marker.png")
width (20)
height (20)
anchor-x (5)
anchor-y (15)
rotation (0)
}
}
}
}
}
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
Design Considerations
This component is applicable to these moments:
You can find design specifications for this component in the Components Spec download under Design Resources.