I am trying to create a custom widget using the Mapbox_Maps_Flutter package but whenever I test the app the map just shows the scale and the mapbox logo on a white map. The code I currently have is below:
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/enums/enums.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'dart:developer';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart' as mb;
import 'package:latlong2/latlong.dart' as ll;
class MapboxMap extends StatefulWidget {
const MapboxMap({
super.key,
this.width,
this.height,
this.point,
required this.startingPoint,
required this.startingZoom,
required this.accessToken,
});
final double? width;
final double? height;
final LatLng? point;
final LatLng startingPoint;
final double startingZoom;
final String accessToken;
@override
State<MapboxMap> createState() => _MapboxMapState();
}
class _MapboxMapState extends State<MapboxMap> {
mb.MapboxMap? mapboxMap;
_onMapCreated(mb.MapboxMap mapboxMap) {
this.mapboxMap = mapboxMap;
log('Map created successfully');
}
@override
Widget build(BuildContext context) {
log('Building map with starting point: ${widget.startingPoint}, zoom: ${widget.startingZoom}');
return Scaffold(
body: mb.MapWidget(
key: ValueKey("mapWidget"),
onMapCreated: _onMapCreated,
styleUri: 'mapbox://styles/ravenknobit/cltjnprwj00mw01qpgclec0ky',
cameraOptions: mb.CameraOptions(
center: mb.Point(
coordinates: mb.Position(
widget.startingPoint.latitude, widget.startingPoint.longitude),
),
zoom: widget.startingZoom,
),
),
);
}
}