mapbox / mapbox/mapbox-maps-flutter

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

Open
#1,051 0 comments 0 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

**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?

```dart
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 createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
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)),
),
),
],
),
);
}
}

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

Start with the provided Flutter sample and reproduce the CircleAnnotation behavior on the listed iOS Simulators, comparing it with physical devices. Inspect the annotation manager and the commented style-layer minzoom/maxzoom calls mentioned in the sample. Done means the circle remains visible at zoom levels 6 through 13 without changing behavior at other zoom levels.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.