[BUG] Map is incomplete and undetailed.

[YLagh01]

Platforms

android

Version of flutter maplibre_gl

0.20.0

Bug Description

As you can see in the provided image, the maps is cropped, unprecise and blury. Also, the elements disappear or reappear as I zoom, without logic. I know it's not my server (btw it's martin) because i've tested it locally with the exact same stylesheet on maputnik and it works well. The stylesheet i'm using is also in the added files.

PS: Thank you for maintaining all these open source mapping tools, they're the only good alternative out there.

Steps to Reproduce

See code below

Expected Results

.

Actual Results

.

Code Sample

class MapPage extends StatefulWidget {
  const MapPage({Key? key}) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final LocationAutocompleteService _autocompleteService = LocationAutocompleteService();
  final TextEditingController _searchController = TextEditingController();
  List<String> _suggestions = [];
  bool _isShareStory = false;
  MaplibreMapController? _mapController;
  String _styleString = '';

  Future<void> _loadStyleFromAssets() async {
    try {
      final styleContent = await rootBundle.loadString('assets/DarkMatter.json');
      setState(() {
        _styleString = styleContent;
      });
    } catch (e) {
      print("Error loading style: $e");
    }
  }


  void _onSearchChanged() async {
    if (_searchController.text.isNotEmpty) {
      final suggestions = await _autocompleteService.getAutocompleteSuggestions(_searchController.text);
      setState(() {
        _suggestions = suggestions;
      });
    } else {
      setState(() {
        _suggestions = [];
      });
    }
  }

  void _onMapCreated(MaplibreMapController controller) {
    _mapController = controller;
    _mapController?.moveCamera(
        CameraUpdate.newLatLngZoom(
            LatLng(50.54664, 4.375495), // Center of Belgium from TileJSON
            7.0 // Default zoom level from TileJSON
        )
    );
  }

  @override
  void initState() {
    super.initState();
    _searchController.addListener(_onSearchChanged);
    _loadStyleFromAssets();
  }


  @override
  void dispose() {
    _searchController.removeListener(_onSearchChanged);
    _searchController.dispose();
    _mapController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const styleUrl = "http://192.168.0.224:3000/style.json"; // Adjust if needed

    void _showReportSheet(BuildContext context) {
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
        ),
        builder: (BuildContext context) {
          return AnimatedSwitcher(
            duration: const Duration(milliseconds: 300),
            child: _isShareStory ? _buildShareStoryMenu() : _buildSelectLocationMenu(),
          );
        },
      );
    }

    return Scaffold(
      body: Stack(
        children: [
          // Only render MaplibreMap when style is loaded
          if (_styleString.isNotEmpty)
            MaplibreMap(
              styleString: _styleString,
              initialCameraPosition: const CameraPosition(
                target: LatLng(50.54664, 4.375495), // Center of Belgium
                zoom: 7.0,
              ),
              onMapCreated: _onMapCreated,
              myLocationEnabled: true,
              trackCameraPosition: true,
              minMaxZoomPreference: const MinMaxZoomPreference(0, 18),
            ),
          //...

.
DarkMatter.json

[markszente]

For me, this happened when my style json referenced invalid glyphs.