mapbox / mapbox/mapbox-maps-flutter

Inconsistent ornament positioning

Open
#864 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I want to draw attention to multiple inconsistencies about ornaments and their positioning.

Edge-to-Edge / Margin

With the release of Android 15 and edge-to-edge as default UI mode even when opting out of edge-to-edge, ornaments can be positioned inside the status bar area.

Image

This can be handled pretty well using Flutter's MediaQuery.

Image

Unfortunately this fix does not translate well into iOS. Here there seems to already be padding (or margin) applied to the ornament by default.

Positioning and overlapping ornaments

This seems to not only be a cross-platform issue but rather all over inconsistency.

Positioning attribution to the left on Android will put the attribution icon next to the mapbox logo which is quiet nice.
Positioning the compass to the left is not handled alike and will result in the compass being positioned behind the scale bar.

Image
Image

Also the attribution positioning to the left on iOS results in the attribution being positioned over the mapbox logo.

You might have also spotted the different horizontal paddings for 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.

Research direction

Reproduce the ornament layouts on Android and iOS, focusing on MediaQuery, safe-area padding, and left-positioned attribution, compass, and scale bar. Compare edge-to-edge behavior, horizontal padding, and overlaps against the reported screenshots; done means consistent placement without ornaments overlapping or entering unintended system-bar areas.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
design, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.