CircleAnnotation not visible from zoom 6 to 13 (including) on iOS

[mgudev7a]

Edit 20.10.2025
Issue can be reproduced on iOS Simulators with iOS 15.4 / 17.2 / 17.5 / tbc
Issue can NOT be reproduced on physical devices with iOS 15.6.1 / 18.6.2 / tbc
Hence priority of this issue is minor.
Feel free to close the issue if you don't want to address it.

Environment
Flutter (Channel stable, 3.29.3, on macOS 14.6.1 23G93 darwin-x64, locale de-DE)
Xcode - develop for iOS and macOS (Xcode 15.4)
VS Code (version 1.104.0)
mapbox_maps_flutter: ^2.11.0

Pods

• mapbox_maps_flutter (2.11.0):
  • Flutter
  • MapboxMaps (= 11.15.0)
  • Turf (= 4.0.0)
• MapboxCommon (24.15.0):
  • Turf (= 4.0.0)
• MapboxCoreMaps (11.15.0):
  • MapboxCommon (= 24.15.0)
• MapboxMaps (11.15.0):
  • MapboxCommon (= 24.15.0)
  • MapboxCoreMaps (= 11.15.0)
  • Turf (= 4.0.0)
• Turf (4.0.0)

Steps to reproduce
Run below code and increase/decrease the zoom between 1-21
Behaviour stays the same independant from the position. I tried with San Vito Lo Capo, Sicily and Apple HQ.

Expected bahaviour
CircleAnnotation should be visible in any zoom

Actual behaviour
CircleAnnotation vanishes from zoom 6 (including) to zoom 13 (including).

Did I miss sth in the docs or code?

import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  MapboxOptions.setAccessToken(
    "YOUR-ACCESS-TOKEN",
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'MapBox Test', home: const MyHomePage(title: 'MapBox Test'));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MapboxMap? controller;
  CircleAnnotationManager? circleAnnotationManager;
  double currentZoom = 14;

  @override
  Widget build(BuildContext context) {
    var pos = Position(-122.0308, 37.3318); // Apple HQ (Cupertino, CA)
    // var pos = Position(12.7357, 38.1706); // San Vito lo Capo
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              IconButton(
                onPressed: () async {
                  controller!.getCameraState().then((cameraState) {
                    currentZoom = cameraState.zoom + 1;
                    controller
                        ?.easeTo(CameraOptions(zoom: currentZoom), MapAnimationOptions(duration: 300, startDelay: 0))
                        .then((_) {
                          setState(() {});
                        });
                  });
                },
                icon: Icon(Icons.zoom_in),
              ),
              IconButton(
                onPressed: () async {
                  controller!.getCameraState().then((cameraState) {
                    currentZoom = cameraState.zoom - 1;
                    controller
                        ?.easeTo(CameraOptions(zoom: currentZoom), MapAnimationOptions(duration: 300, startDelay: 0))
                        .then((_) {
                          setState(() {});
                        });
                  });
                },
                icon: Icon(Icons.zoom_out),
              ),
              Text("Current zoom: $currentZoom"),
            ],
          ),
          Expanded(
            child: MapWidget(
              onMapCreated: (mapController) async {
                controller = mapController;
                circleAnnotationManager = await controller!.annotations.createCircleAnnotationManager(id: "circles1");
                // await controller!.style.setStyleLayerProperty("circles1", "minzoom", 1.0);
                // await controller!.style.setStyleLayerProperty("circles1", "maxzoom", 21.0);

                circleAnnotationManager!.create(
                  CircleAnnotationOptions(
                    geometry: Point(coordinates: pos),
                    circleColor: Colors.blue.toARGB32(),
                    circleStrokeColor: Colors.white.toARGB32(),
                    circleStrokeWidth: 1,
                    circleRadius: 10,
                  ),
                );
              },
              cameraOptions: CameraOptions(zoom: 14, center: Point(coordinates: pos)),
            ),
          ),
        ],
      ),
    );
  }
}