mapbox / mapbox/mapbox-maps-flutter

Normalize ornament positioning relative to safe areas on iOS and Android

Open
#1,137 1 comment 1 reaction 1 assignee View on GitHub

@maios is already working on this.

Since Jul 15, 2026.

Dominant language
Dart
Stars
380
Forks
204
PR merge metrics
No merged PRs in 30d

Description

Mapbox ornaments such as the logo, attribution button, compass, and scale bar are positioned differently on iOS and Android when the map extends behind system UI.

On iOS, the native Maps SDK treats ornament margins as relative to the `MapView` safe area. https://docs.mapbox.com/ios/maps/api/10.5.1/Structs/OrnamentOptions.html

On Android, ornament margins are applied relative to the edges of the native map view. System insets are not handled in the same way.

This results in inconsistent ornament positioning between platforms.

There is also a visual alignment difference between the attribution ornament on iOS and Android. On iOS, the attribution is rendered inside a button with additional internal padding, while Android aligns it more closely to the configured ornament margin. As a result, using the same marginLeft for the attribution and logo does not necessarily align their visible content on iOS, even when their ornament frames share the same position.

## Current Behavior safe area

The same ornament settings produce different visual positions on iOS and Android.

For example:

```dart
await mapboxMap.logo.updateSettings(
LogoSettings(
position: OrnamentPosition.BOTTOM_LEFT,
marginLeft: 8,
marginBottom: 8,
),
);
```

The expected interpretation is:

```text
8 logical pixels from the bottom-left safe-area boundary
```

The effective behavior is closer to:

```text
iOS: safe-area inset + 8
Android: map-view edge + 8
```

A typical workaround looks like this:

```dart
final safeArea = MediaQuery.paddingOf(context);

final bottomMargin = Platform.isAndroid
? safeArea.bottom + 8
: 8;
```

This workaround must be repeated for every affected ornament and every relevant edge. It also couples application code to a native platform difference that is not represented by the Flutter API.

## Current Behavior attribution

For example, an additional iOS-specific offset may be required to visually align the attribution with the logo:

```
const iOSAttributionContentInset = 8.0;

final attributionLeftMargin = Platform.isIOS
? (logoLeftMargin - iOSAttributionContentInset).clamp(0.0, double.infinity)
: logoLeftMargin;

await mapboxMap.attribution.updateSettings(
AttributionSettings(
position: OrnamentPosition.BOTTOM_LEFT,
marginLeft: attributionLeftMargin,
marginBottom: 36,
),
);
```

Without this adjustment, the attribution button can appear visually indented compared with the logo on iOS, even when both use the same configured left margin.

## Expected Behavior

The Flutter SDK should expose a platform-consistent ornament positioning model.

When safe-area-aware positioning is enabled, ornament margins should be measured from the Flutter view's unobstructed safe-area boundary on both iOS and Android.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.