markerTooltipBuilder property

Returns the widget for the tooltip of the MapMarker.

To show the tooltip for markers, return a customized widget in the MapLayer.markerTooltipBuilder. This widget will then be wrapped in the in-built shape which comes with the nose at the bottom.

The MapLayer.markerTooltipBuilder will be called when the user interacts with the markers i.e., while tapping in touch devices and hovering in the mouse enabled devices.

late List<Model> _worldMapData;
late MapShapeSource _mapSource;

@override
void initState() {
  _worldMapData = 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)
   ];

  _mapSource = MapShapeSource.asset(
    'assets/world_map.json',
    shapeDataField: 'name',
    dataCount: _worldMapData.length,
    primaryValueMapper: (int index) => _worldMapData[index].country,
  );

   super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Padding(
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: <MapLayer>[
           MapShapeLayer(
             source: _mapSource,
             initialMarkersCount: _worldMapData.length,
             markerBuilder: (BuildContext context, int index){
                return MapMarker(
                 latitude: _worldMapData[index].latitude,
                 longitude: _worldMapData[index].longitude,
                );
             },
             markerTooltipBuilder: (BuildContext context, int index) {
               if(index == 0) {
                 return Container(
                   child: Icon(Icons.airplanemode_inactive),
                 );
               }
               else
               {
                 return Container(
                      child: Icon(Icons.airplanemode_active),
                 );
               }
             },
           ),
         ],
       ),
     ),
  );
}

class Model {
 const Model(this.country, this.latitude, this.longitude);

 final String country;
 final double latitude;
 final double longitude;
}

Implementation

MapLayer class