maplibre-compose-material3/org.maplibre.compose.material3

Package-level declarations

Map controls themed from the Material 3 color scheme and typography, replacing the ones that org.maplibre.compose.overlay draws with Compose Foundation alone.

Types

AttributionButtonDefaults

object AttributionButtonDefaults

LocationPuckDefaults

object LocationPuckDefaults

Material 3 themed defaults for LocationPuck parameters

OfflinePackListItemDefaults

object OfflinePackListItemDefaults

Properties

Material3

val MapOverlay.Companion.Material3: MapOverlay

The controls of MapOverlay.Default, themed from the Material 3 color scheme and typography.

Functions

AttributionLinks

@Composable

fun AttributionLinks(attributions: List<String>, modifier: Modifier = Modifier, textStyle: TextStyle = MaterialTheme.typography.bodyMedium, linkStyles: TextLinkStyles? = AttributionButtonDefaults.linkStyles(), spacing: Dp = 8.dp, breakWithinAttribution: Boolean = false)

A composable function that displays a collection of attribution links as a flow layout, styled from the Material 3 theme.

CompassButton

@Composable

fun CompassButton(cameraState: CameraState, modifier: Modifier = Modifier, onClick: () -> Unit = {}, colors: ButtonColors = ButtonDefaults.elevatedButtonColors(), contentDescription: String = CompassDefaults.contentDescription(), size: Dp = 48.dp, contentPadding: PaddingValues = PaddingValues(size / 6), shape: Shape = CircleShape, needlePainter: Painter = CompassDefaults.needlePainter(), getHomePosition: (CameraPosition) -> CameraPosition = { it.copy(bearing = 0.0, tilt = 0.0) })

A compass that points north and returns the camera to getHomePosition when it is clicked.

DisappearingCompassButton

@Composable

fun DisappearingCompassButton(cameraState: CameraState, modifier: Modifier = Modifier, onClick: () -> Unit = {}, colors: ButtonColors = ButtonDefaults.elevatedButtonColors(), contentDescription: String = CompassDefaults.contentDescription(), size: Dp = 48.dp, contentPadding: PaddingValues = PaddingValues(size / 6), shape: Shape = CircleShape, needlePainter: Painter = CompassDefaults.needlePainter(), visibilityDuration: Duration = 1.seconds, enterTransition: EnterTransition = fadeIn(), exitTransition: ExitTransition = fadeOut(), getHomePosition: (CameraPosition) -> CameraPosition = { it.copy(bearing = 0.0, tilt = 0.0) }, slop: Double = 0.5)

A CompassButton that appears when the camera turns away from getHomePosition and fades out once the camera returns to it.

DisappearingScaleBar

@Composable

fun DisappearingScaleBar(metersPerDp: Double, zoom: Double, modifier: Modifier = Modifier, measures: ScaleBarMeasures = ScaleBarDefaults.measures(), color: Color = LocalContentColor.current, haloColor: Color = backgroundColorFor(color), haloWidth: Dp = 0.dp, barWidth: Dp = 2.dp, textStyle: TextStyle = MaterialTheme.typography.labelMedium, alignment: Alignment.Horizontal = Alignment.Start, visibilityDuration: Duration = 3.seconds, enterTransition: EnterTransition = fadeIn(), exitTransition: ExitTransition = fadeOut())

An animated scale bar that appears when the zoom level of the map changes, and then disappears after visibilityDuration. This composable wraps ScaleBar with visibility animations.

ExpandingAttributionButton

@Composable

fun ExpandingAttributionButton(cameraState: CameraState, styleState: StyleState, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.BottomEnd, toggleButton: @Composable (onClick: () -> Unit) -> Unit = AttributionButtonDefaults.button, expandedContent: @Composable (attributions: List<String>, textStyle: TextStyle) -> Unit = AttributionButtonDefaults.content, expandedStyle: AttributionStyle = AttributionButtonDefaults.expandedStyle(), collapsedStyle: AttributionStyle = AttributionButtonDefaults.collapsedStyle(), expand: (Alignment) -> EnterTransition = AttributionDefaults.expand, collapse: (Alignment) -> ExitTransition = AttributionDefaults.collapse)

Info button from which an attribution popup text is expanded. This version retracts when the user interacts with the map.

@Composable

fun ExpandingAttributionButton(expanded: Boolean, onClick: () -> Unit, styleState: StyleState, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.BottomEnd, toggleButton: @Composable (onClick: () -> Unit) -> Unit = AttributionButtonDefaults.button, expandedContent: @Composable (attributions: List<String>, textStyle: TextStyle) -> Unit = AttributionButtonDefaults.content, expandedStyle: AttributionStyle = AttributionButtonDefaults.expandedStyle(), collapsedStyle: AttributionStyle = AttributionButtonDefaults.collapsedStyle(), expand: (Alignment) -> EnterTransition = AttributionDefaults.expand, collapse: (Alignment) -> ExitTransition = AttributionDefaults.collapse)

Info button from which an attribution popup text is expanded. This version allows the caller to manage the state.

OfflinePackListItem

@Composable

fun OfflinePackListItem(pack: OfflinePack, modifier: Modifier = Modifier, offlineManager: OfflineManager = rememberOfflineManager(), leadingContent: @Composable () -> Unit = { OfflinePackListItemDefaults.LeadingContent(pack, offlineManager) }, supportingContent: @Composable () -> Unit = { OfflinePackListItemDefaults.SupportingContent(pack.downloadProgress) }, trailingContent: @Composable () -> Unit = { OfflinePackListItemDefaults.TrailingContent(pack, offlineManager) }, headlineContent: @Composable () -> Unit)

A ListItem to manage an OfflinePack.

PointerPinButton

@Composable

fun MapOverlayScope.PointerPinButton(targetPosition: Position, modifier: Modifier = Modifier, onClick: () -> Unit = {}, enabled: Boolean = true, colors: ButtonColors = ButtonDefaults.elevatedButtonColors(), elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = PaddingValues(12.dp), interactionSource: MutableInteractionSource? = null, content: @Composable BoxScope.() -> Unit)

An elevated button in the shape of a pointer pin, placed through placedTowards on the edge of an ellipse inscribed in the unobstructed map region and pointing towards targetPosition. Only shown while targetPosition is outside of the ellipse.

ScaleBar

@Composable

fun ScaleBar(metersPerDp: Double, modifier: Modifier = Modifier, measures: ScaleBarMeasures = ScaleBarDefaults.measures(), color: Color = LocalContentColor.current, haloColor: Color = backgroundColorFor(color), haloWidth: Dp = 0.dp, barWidth: Dp = 2.dp, textStyle: TextStyle = MaterialTheme.typography.labelSmall, alignment: Alignment.Horizontal = Alignment.Start)

A scale bar composable that shows the current scale of the map in feet, meters or feet and meters when zoomed in to the map, changing to miles and kilometers, respectively, when zooming out.