I'm using Flutter's platform views to integrate full-screen maps from Mapbox into my Flutter app. While setting up the iOS platform view with the map, I encountered an issue related to the behavior of pins on the map while using view annotations. Specifically, when a pin is shown on the map and the map is scrolled to the bottom of the page, the pin starts drawing over the Flutter widgets above it.
Here's a screenshot of the issue I'm facing: link
I believe this might be due to the layering of the platform view and Flutter widgets in the hierarchy, but I'm unsure about the best approach to prevent this behavior.
Here is a simplified version of the iOS Code to add pins on map (from - https://docs.mapbox.com/ios/maps/guides/annotations/view-annotations/#add-a-view-annotation-to-the-mapview):
let annotationView = CustomView()
let options = ViewAnnotationOptions(
geometry: Point(CLLocationCoordinate2D(latitude: latitude, longitude:longitude)),
allowOverlap: true,
anchor: .center
)
try? mapView.viewAnnotations.add(annotationView, options: options)
Flutter side code:
Widget _iOSNativeMapView() {
return LayoutBuilder(
key: const Key("key"),
builder: (BuildContext context, BoxConstraints constraints) {
return SizedBox(
key: const Key("key"),
width: constraints.maxWidth,
height: double.infinity,
child: const UiKitView(
key: Key("key"),
viewType: PlatformViewType.map,
layoutDirection: TextDirection.ltr,
creationParamsCodec: StandardMessageCodec(),
),
);
},
);
}
I have tried: Adjusting the z-index of the platform view and Flutter widgets, but this doesn't seem to solve the issue.
My current setup involves hosting the Mapbox map within a platform view. The issue only appears on iOS; Android works as expected.
Any suggestions or insights into how to prevent the pin from drawing over the Flutter widgets when the map is scrolled to the bottom of the page would be greatly appreciated.
