Attribution control is oddly positioned on Android

[ianthetechie]

Steps to Trigger Behavior

1. Create a full-screen map view, as in the Getting Started example
2. Launch on Android

Link to Minimal Reproducible Example

Either follow the Getting Started guide, or run the bundled examples.

Expected Behavior

Attribution button shows up in the lower right corner

Actual Behavior

It is approximately 2/3 of the way to the left side of the screen

Screenshots (if applicable)

Version(s) affected

• Platform: Android
• OS version: API 30
• Device type: Pixel
• Emulator/ Simulator: Yes
• Development OS: macOS Ventura 13.1
• maplibre-react-native Version 9.0.0
• MapLibre GL version 9.6.0
• React Native Version 0.68.0 and 0.71.0 tested (probably affects all)

Additional context

This might be an upstream issue; check that with a minimal example before digging too deep.

[saheem128]

Yes, weird! Anyways, I ended up using attributionPosition prop in the MapVIew. Eg.

<MapLibreGL.MapView
  {...otherProps}
  attributionPosition={{ right: 10, bottom: 10 }}
/>

[KiwiKilian]

The offset is there, when there is no logo and the default placement is used.

No Logo	Logo

Not sure, which way we should go, maybe enable the logo by default?

[EmilJunker]

May I suggest to align the default attribution position on Android with iOS. In my opinion, the attribution should simply be displayed in the bottom right corner by default. This is already the case on iOS, I think Android should be the same.

The MapLibre logo should continue to be hidden by default, but when it's enabled, its default position should also be in the bottom right corner directly to the left of the attribution control. Again, this is already the case on iOS, and I think Android should be the same.

Note that on Android 15 with Edge-to-Edge enabled, the navigation bar and status bar margins are currently not taken into account when positioning the attribution control. I opened a separate issue about this a while ago: #944. Maybe these issues could be addressed in one go.

For context, the first screenshot shows what the attribution currently looks like on Android with attributionPosition={{ bottom: 8, right: 8 }}. The second one shows how it should look if it was working properly (like it does on iOS):

On a related note, I think it would be great if there was an option to show an additional copyright information link when the attribution control is pressed. In most cases, this would be a link to https://www.openstreetmap.org/copyright. Maybe this link could even be added by default? As is stands, I don't really see the point of having this attribution control at all. On both iOS and Android, it currently just opens a popup saying "MapLibre".

Edit: Sorry, I just figured out I have to set the "attribution" property on the source. Now the attribution control actually shows the copyright link I want.

[KiwiKilian]

Thanks for the input. As both platforms actually default to true for the logo (Android, iOS), I've aligned this for RN in #861 by enabling the logo per default. I understand your notion on aligning the two platforms, but right now it feels like more effort to properly implement the custom default for Android then the benefit. But maybe we can do this when fixing edge-to-edge.

[github-actions]

🎉 This issue has been resolved in version 11.0.0-alpha.9 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀