Skip to content

[BUG] Missing sprites cause 404 errors trying to load from Flutter assets instead of style sprite server #663

@JKnowles26

Description

@JKnowles26

Platforms

web

Version of flutter maplibre_gl

0.24.1

Bug Description

When using a MapLibre style that references sprites not included in its sprite sheet, the web implementation attempts to load these sprites as Flutter assets from localhost/assets/ instead of allowing MapLibre GL JS to handle them gracefully or load them from the style's sprite server.

Steps to Reproduce

  1. Create a new Flutter project with the code above
  2. Add maplibre_gl: ^0.24.1 to pubspec.yaml
  3. Ensure web/index.html includes MapLibre GL JS:
<script src="https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.js"></script> 4. Run: flutter run -d chrome 5. Zoom in to level 16+ (where POI icons would appear) 6. Open browser DevTools console 7. Observe 404 errors and exceptions

Expected Results

When a sprite is missing from the style's sprite sheet:

  • MapLibre GL JS should handle it gracefully (either skip rendering or load from sprite server)
  • No exceptions should be thrown
  • No 404 errors to localhost

Actual Results

The web implementation intercepts missing sprite requests and attempts to load them as Flutter assets, causing:

  • Multiple 404 errors: GET http://localhost:62059/assets/hairdresser_11 404 (Not Found)
  • Promise rejection exceptions: DartError: Unable to load asset: "hairdresser_11"
  • Console spam with errors for each missing sprite, and the debugger to pause on exceptions

Image

Image

Code Sample

import 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('MapLibre Sprite Bug')),
        body: MapLibreMap(
          styleString: "https://tiles.stadiamaps.com/styles/outdoors.json?api_key=YOUR_KEY",
          initialCameraPosition: const CameraPosition(
            target: LatLng(51.5074, -0.1278),
            zoom: 13,
          ),
          onMapCreated: (_) {},
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions