I'm trying to add an image (Uint8List) to the maps style, but i get a error: Throwable, java.lang.Throwable: mismatched image size, Cause: null, Stacktrace: java.lang.Throwable: mismatched image size

[zhaoMing8]

I'm trying to add an image (Uint8List) to the maps style, so that I can reference it later in a feature when I assemble a source geojson. This is what I tried:

Andriod 13.0.

ByteData byteData =
        await rootBundle.load('assets/map_icons/home.png');
Uint8List image = byteData.buffer.asUint8List();
// So far everything is okay, the list is correct.
 // But here I struggle with understanding what half of the properties do. The next line throws an error.
await mapController.style.addStyleImage(
      assetName, // A string (which I later use to reference the image in a geojson source)
      1,
      MbxImage(width: 50, height: 50, data: image),
      false,
      [],
      [],
      null,
    );

The error thrown is:

PlatformException (PlatformException(Throwable, java.lang.Throwable: mismatched image size, Cause: null, Stacktrace: java.lang.Throwable: mismatched image size
    at com.mapbox.maps.mapbox_maps.StyleController.addStyleImage$lambda-49(StyleController.kt:641)
    at com.mapbox.maps.mapbox_maps.StyleController.$r8$lambda$9qzAKUZTMYPcXQ8_jKe8hkSxnyU(Unknown Source:0)
    at com.mapbox.maps.mapbox_maps.StyleController$$ExternalSyntheticLambda0.onStyleLoaded(Unknown Source:17)
    at com.mapbox.maps.MapboxMap.getStyle(MapboxMap.kt:355)
    at com.mapbox.maps.mapbox_maps.StyleController.addStyleImage(StyleController.kt:610)
    at com.mapbox.maps.mapbox_maps.StyleController.addStyleImage(StyleController.kt:17)
    at com.mapbox.maps.pigeons.FLTMapInterfaces$StyleManager$-CC.lambda$setup$34(FLTMapInterfaces.java:7898)
    at com.mapbox.maps.pigeons.FLTMapInterfaces$StyleManager$$ExternalSyntheticLambda20.onMessage(Unknown Source:2)
    at io.flutter.plugin.common.BasicMessageChannel$IncomingMessageHandler.onMessage(BasicMessageChannel.java:217)
    at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:295)
    at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$io-flutter-embedding-engine-dart-DartMessenger(DartMessenger.java:319)
    at io.flutter.embedding.engine.dart.DartMessenger$$ExternalSyntheticLambda0.run(Unknown Source:12)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:250)
    at android.app.ActivityThread.main(ActivityThread.java:7806)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:958)
, null))

[felixkrautschuk]

You could try this:

ByteData byteData = await rootBundle.load('assets/map_icons/home.png');
Uint8List image = byteData.buffer.asUint8List();

final parsedImage = await decodeImageFromList(image);
final mbxImage = MbxImage(data: image, height: parsedImage.height, width: parsedImage.width);

await mapController.style.addStyleImage(
      assetName,
      1,
      mbxImage,
      false,
      [],
      [],
      null,
);

[zhaoMing8]

You could try this:

ByteData byteData = await rootBundle.load('assets/map_icons/home.png');
Uint8List image = byteData.buffer.asUint8List();

final parsedImage = await decodeImageFromList(image);
final mbxImage = MbxImage(data: image, height: parsedImage.height, width: parsedImage.width);

await mapController.style.addStyleImage(
      assetName,
      1,
      mbxImage,
      false,
      [],
      [],
      null,
);

Oh! Thanks! That worked for me.

[zhaoMing8]

You could try this:

ByteData byteData = await rootBundle.load('assets/map_icons/home.png');
Uint8List image = byteData.buffer.asUint8List();

final parsedImage = await decodeImageFromList(image);
final mbxImage = MbxImage(data: image, height: parsedImage.height, width: parsedImage.width);

await mapController.style.addStyleImage(
      assetName,
      1,
      mbxImage,
      false,
      [],
      [],
      null,
);

Oh! Thanks! That worked for me. but, i have a question, Why have to use the parsedImage.height and parsedImage.width, Why can`t to use Custom definition hieght or width .

[felixkrautschuk]

Sorry, I am not able to explain you that as I am not a Flutter expert myself. But the same error occurred on my side some days ago and I found that solution/workaround somewhere in StackOverflow, so I was able to continue my work at least.

[zhaoMing8]

Sorry, I am not able to explain you that as I am not a Flutter expert myself. But the same error occurred on my side some days ago and I found that solution/workaround somewhere in StackOverflow, so I was able to continue my work at least.

ohh, A strange question. thank you very much for help me to continue my work!

[felixkrautschuk]

@zhaoMing8 Now that you got it working, I need to ask you a question... :) Do the images appear sharp in your app?

On my side, the SymbolLayer icons look very blurry on Android and iOS (device and simulator) and I have no idea why. I also tried that custom-icon.png asset from the example-app but that does not look sharp as well. How is your experience?

[zhaoMing8]

@zhaoMing8 Now that you got it working, I need to ask you a question... :) Do the images appear sharp in your app?

On my side, the SymbolLayer icons look very blurry on Android and iOS (device and simulator) and I have no idea why. I also tried that custom-icon.png asset from the example-app but that does not look sharp as well. How is your experience?

sorry, l also don`t have a good idea. but it seems to be working normal on ios