Custom marker

[Diielle]

HI, I created a custom marker as follows: in a png I have a white pin and above I place an image, of which I have the URL, cropped so that it is round. To do this I used a canvas and then transformed it into Unit8List.

  ui.Picture picture = recorder.endRecording();
  ui.Image img = await picture.toImage(height.toInt(), width.toInt());

  ByteData? byteData = await img.toByteData(format: ui.ImageByteFormat.png);
  Uint8List combinedImageUint8List = byteData!.buffer.asUint8List();

  return combinedImageUint8List;

I load the result obtained like this:

Uint8List value = await customMarkerMapbox(imageUrl: puntiDiInteresse[i].urlImmagineMarker);
await addByteImage("assetImage_$id", mapController, value);

and then I use a GeoJsonSource to have the markers added

  await mapController.addSymbolLayer(
    "earthquakes",
    "unclustered-pointA",
    const SymbolLayerProperties(
      symbolPlacement: "point",
      iconAnchor: "bottom",
      iconImage: [Expressions.get, 'iconaPin'], //assetImage_$id
      iconSize: [Expressions.get, 'iconaSize'],
      iconAllowOverlap: true,
      symbolZOrder: "auto",
      symbolSortKey: 80,
    ),
    filter: [
      '!',
      ['has', 'point_count']
    ],
    enableInteraction: true,
  );

I get the desired result but now I would like when I press on one of it: mapController.onFeatureTapped.add( the pin under the round photo changes color. How can I do?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.