mapbox / mapbox/mapbox-maps-flutter
CircleAnnotation not visible from zoom 6 to 13 (including) on iOS
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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