shapeTooltipBuilder property

Returns a widget for the shape tooltip based on the index.

A shape tooltip displays additional information about the shapes on a map. To show tooltip for the shape return a widget in MapShapeLayer.shapeTooltipBuilder. This widget will then be wrapped in the existing tooltip shape which comes with the nose at the bottom. It is still possible to customize the stroke appearance using the MapTooltipSettings.strokeColor and MapTooltipSettings.strokeWidth.

To customize the corners, use SfMapsThemeData.tooltipBorderRadius.

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

late MapShapeSource _mapSource;
late List<Model> _data;

@override
void initState() {
  _data = <Model>[
    Model('India', 280, "Low", Colors.red),
    Model('United States of America', 190, "High", Colors.green),
    Model('Pakistan', 37, "Low", Colors.yellow),
  ];

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

  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Padding(
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: <MapLayer>[
           MapShapeLayer(
             source: _mapSource,
             shapeTooltipBuilder: (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.usersCount, this.storage, this.color);

 final String country;
 final double usersCount;
 final String storage;
 final Color  color;
}

Implementation

MapShapeLayer class