Bixby Developer Center

References

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, any on-click defined 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-click is ignored.
  • If your cards are in a list-of or displaying the details in a result view, and you do not provide an on-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)
}
}
}
}
}
}
}
}

View master on GitHub

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.