Determines the map card's aspect ratio.
You can specify the following aspect ratios:
21:9
16:9
4:3
1:1
3:4
9:16
9:21
Even though 9:21
is provided, we do not recommend you use this aspect ratio for maps as this does not fit within most device screens.
map-card {
aspect-ratio (16:9)
...
}
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.