My Tooltips will not show
Hi Patrick Schneider,
We have analyzed your query and we understood from your query that the tooltip is not rendering, and you are also trying to change the color of the marker when the marker is tapped. We have implemented a workaround sample using MapTileLayer in the SfMaps to change the color of the marker while tapped and the to replicate the mentioned tooltip issue with the provided code snippet.
Unfortunately, we can’t be able to replicate the mentioned issue, the tooltip is rendering properly from our end and achieved the requested feature that is when the marker is tapped, the color of the marker changes properly.
While rendering the SfMaps in the touch interaction devices alone, the tooltip will be rendered while the marker is tapped and for the desktop and web platform, the tooltip will be rendered while we hover the marker. Therefore, the tooltip is rendering properly while hovering the marker in the desktop platform based on the behavior.
Kindly refer the code snippet below:
|
class _MyHomePageState extends State<MyHomePage> { late MapTileLayerController _controller; Color selectedColor = Colors.red; Color defaultColor = Colors.blue; int previousSelectedIndex = -1; int _selectedIndex = -1; late List<Model> _data;
int get selectedIndex => _selectedIndex;
set selectedIndex(int value) { previousSelectedIndex = _selectedIndex; _selectedIndex = value; }
@override void initState() { _data = const <Model>[ Model('Brazil', -14.235004, -51.92528), Model('Germany', 51.16569, 10.451526), Model('Australia', -25.274398, 133.775136), Model('India', 20.593684, 78.96288), Model('Russia', 61.52401, 105.318756), ]; _controller = MapTileLayerController(); super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( body: SfMapsTheme( data: SfMapsThemeData(), child: SfMaps( layers: <MapLayer>[ MapTileLayer( urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', initialMarkersCount: _data.length, controller: _controller, markerBuilder: (BuildContext context, int index) { return MapMarker( latitude: _data[index].latitude, longitude: _data[index].longitude, size: const Size(10, 10), alignment: Alignment.topCenter, child: GestureDetector( onTap: () { selectedIndex = index; _controller.updateMarkers([ if (previousSelectedIndex != -1) previousSelectedIndex, selectedIndex, ]); }, child: ColoredBox( color: selectedIndex == index ? selectedColor : defaultColor, ), ), ); }, markerTooltipBuilder: (BuildContext context, int index) { return ClipRRect( borderRadius: const BorderRadius.all( Radius.circular(8), ), child: Container( width: 150, height: 80, color: Colors.grey, child: const Icon(Icons.fastfood), ), ); }, ), ], ), ), ); } } |
Snapshot:
Also attached the sample below for your reference. If you replicate the issues further, modify the below attached sample by reproducing the mentioned issue and share us. So, it will be helpful for us to provide the best possible solution from our end.
Regards,
Hari Hara Sudhan. K
Attachment: 183402_8d71a35c.zip
Screenshot:
Attachment: i483214_e89feeae.zip
