skilld
All skills
mapbox avatar

/mapbox-flutter-patterns

@f6055fb official
by mapboxmapbox/mapbox-agent-skills80 stars
17

Official integration patterns for the Mapbox Maps Flutter SDK. Covers installation, iOS/Android platform setup, access token configuration, MapWidget initialization, camera control, annotations with tap handling, user location, and loading GeoJSON. Based on official Mapbox documentation.

Ask your Agent

Use this Skill: https://skilld.dev/gh/mapbox/mapbox-agent-skills/mapbox-flutter-patterns

This session only. Nothing lands on disk.

AGENTS.md

≈684 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Mapbox Flutter Quick Reference

Fast reference for mapbox_maps_flutter on iOS + Android.

Install

# pubspec.yaml
dependencies:
  mapbox_maps_flutter: ^2.0.0
  • iOS: Runner target Minimum Deployments → iOS = 14.0 (Podfile platform :ios, '14.0' if using Pods).
  • Android: minSdk = 21 in android/app/build.gradle(.kts).

Access Token

flutter run --dart-define=ACCESS_TOKEN=pk.your_token
const accessToken = String.fromEnvironment('ACCESS_TOKEN');

void main() {
  MapboxOptions.setAccessToken(accessToken);
  runApp(const MaterialApp(home: MapScreen()));
}

Basic MapWidget

MapWidget(
  key: const ValueKey('mapWidget'),
  onMapCreated: (controller) => mapboxMap = controller,
  cameraOptions: CameraOptions(
    center: Point(coordinates: Position(-122.4194, 37.7749)),
    zoom: 12,
  ),
  styleUri: MapboxStyles.STANDARD,
)

Point Annotations

final manager = await mapboxMap.annotations.createPointAnnotationManager();
final icon = (await rootBundle.load('assets/marker.png')).buffer.asUint8List();

await manager.createMulti([
  PointAnnotationOptions(
    geometry: Point(coordinates: Position(-122.4194, 37.7749)),
    image: icon,
  ),
]);

// Current non-deprecated tap API
manager.tapEvents(onTap: (annotation) {
  debugPrint('tapped ${annotation.id}');
});
// Also: longPressEvents, dragEvents

Load GeoJSON

final raw = await rootBundle.loadString('assets/data.geojson');
final features = (jsonDecode(raw)['features'] as List).cast<Map<String, dynamic>>();

For thousands of features use a GeoJsonSource + SymbolLayer instead of annotations.

User Location

await mapboxMap.location.updateSettings(LocationComponentSettings(
  enabled: true,
  puckBearingEnabled: true,
  locationPuck: LocationPuck(locationPuck2D: DefaultLocationPuck2D()),
));

Grant permission first (use permission_handler).

Camera

await mapboxMap.flyTo(
  CameraOptions(
    center: Point(coordinates: Position(-80.1263, 25.7845)),
    zoom: 17,
  ),
  MapAnimationOptions(duration: 2000),
);

Checklist

  • ✅ iOS Runner target Minimum Deployment = 14.0
  • ✅ Android minSdk = 21
  • ✅ Location permissions declared in Info.plist / AndroidManifest.xml
  • ✅ MapboxOptions.setAccessToken(...) called in main() before runApp
  • ✅ Annotation managers reused; manager.tapEvents (not deprecated addOn...ClickListener)

Resources

Source: SKILL.md on GitHub

Third-party checks

No alertstoday3 checks · Risk SAFE
  • Gen Agent Trust Hubtoday

    The skill provides official integration patterns for the Mapbox Maps Flutter SDK. It follows security best practices by recommending secure token management via build-time definitions and utilizing official Mapbox documentation and repositories. No malicious patterns or security vulnerabilities were identified.

  • Sockettoday

    No alerts

  • Snyktoday

    Risk: LOW · No issues

Provenance

Signed by skilld at f6055fb. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 5 hours ago.

Activeupdated 3 days ago

Topics

  • mapbox
  • flutter
  • dart
  • maps
  • ios
  • android
  • geojson
  • annotations
  • location

README badge

README badge for mapbox/mapbox-agent-skills/mapbox-flutter-patterns

What it does

Provides official Mapbox Maps Flutter SDK integration patterns for iOS and Android, covering installation, access token setup, MapWidget initialization, annotations with tap handling, user location, and GeoJSON loading. Targets the mapbox_maps_flutter package with Dart and requires iOS 14.0+ deployment target.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover web or desktop Flutter apps?
No. The Mapbox Maps Flutter SDK targets iOS and Android only. Web and desktop are not supported.
What are the minimum iOS and Android versions required?
iOS deployment target must be 14.0 or higher. Android requires minSdk 21 or higher.
How do I handle access token configuration?
Call `MapboxOptions.setAccessToken(token)` in `main()` before creating any MapWidget. Pass the token via `--dart-define=ACCESS_TOKEN=pk.your_token` at build time, never hard-code it in source.
What is the current API for detecting taps on annotations?
Use `manager.tapEvents(onTap: ...)` on the annotation manager (PointAnnotationManager, CircleAnnotationManager, etc.). The older `addOnPointAnnotationClickListener` is deprecated.
Can I use annotations for thousands of features?
No. For large datasets, use a style layer with GeoJsonSource and SymbolLayer instead of creating individual annotations.

Generated from the current SKILL.md. These answers refresh after source changes.